How do I beat level 7?

Question

In Untrusted, I got to Level 7, where I can get the phone, and create my own JS function. I saw from the demo that I can change the colour! Great! So I figured I'd write a nested if... then statement, saying if I'm one colour, switch to the next! Apparently, that does not work.

I then tried to change my colour to white (#fff), thinking the collision check would accept white as all colours, and open the locks. What can I put in this function to change me as needed?

Answer 1

You can get past all the gates using the code below:

if(player.getColor()=='#f00')
   player.setColor('#ff0');
else if(player.getColor()=='#ff0')
   player.setColor('#0f0');
else
   player.setColor('#f00');

Basically, it makes it so every time you hit Q, you change to the color of the next gate.
Green -> Red -> Yellow -> Green

Answer 2

If you have solved it once, now you can play with it, improving the code. Thinking what else you can do, for example you can do something ugly and funny:

player.setPhoneCallback(function () {
  var i = 66;
  var callback = function(){
    player.setColor("#" + ((--i % 3) > 0 ? 'f' : '0') + ((i + 1) % 3 > 0 ? 'f' : '0') + '0')
  }
  return callback;
}());
(function doNothingHack(){ 
});

Also we can see that f00, ff0 and 0f0 can be represented as 100, 110, and 010, and this, as you can see are just 3 small integers (2, 3, 1) represented as binary. So modulo arithmetic, decimal to binary conversion then replace 1 with f, and we have another such solution.

Answer 3

I decided to go ahead and post a few solutions of my own.

Switch

This one makes use of switch statements and saves each color as an object literal to improve readability and increase coding speed and efficiency:

var color = { 'green' : '#0f0',
              'red'   : '#f00',
              'yellow': '#ff0'};

switch(player.getColor()) {
    case color.green:
        player.setColor(color.red); break;

    case color.red:
        player.setColor(color.yellow); break;

    case color.yellow:
        player.setColor(color.green); break;

    default:
        player.setColor(color.green);
}

The default case at the end isn't necessary for that particular level, as the player's color is already green by default, but I decided to include it anyways for completion's sake.

---

Increment and modulo

This solution makes use of the increment operator ++ and the modulo operator %, making the code much, much shorter.

var colors = ['#0f0', '#f00', '#ff0'];
var i = 0;

player.setPhoneCallback(function() {
    player.setColor(colors[++i % 3]);
});

player.setColor(colors[++i]);

Since we can't add code outside the player.setPhoneCallback() method, it has become a bit hacky.

The idea behind this solution, is to define a color array which we will cycle through. For that, the increment and modulo operators are instrumental. For those who don't know: the modulo operator returns the rest of a division.

Since we don't want our variable i to be reset every time we use the phone, we have to redefine the phone method. Once we're done, we call player.setColor() to change our color. That part isn't necessary, but without it, we'd have to use the phone twice to change our color for the first time.

Once you understand the above code, we can shorten it even more:

if (!player.i) player.i = 0;
player.setColor(['#0f0', '#f00', '#ff0'][++player.i % 3]);

Answer 4

Found the solution! I inserted the following code:

if (player.atLocation(24, 12)) {
player.setColor('#f00');
}
if (player.atLocation(27, 12)) {
player.setColor('#ff0');
}
if (player.atLocation(30, 12)) {
player.setColor('#0f0');
}
if (player.atLocation(33, 12)) {
player.setColor('#f00');
}
if (player.atLocation(35, 12)) {
player.setColor('#ff0');
}

If I am at the x, y coordinates, then it will execute that one colour change for me.