Direction array to support multiple keydowns in 4-directional movement

Question

To get a simple, responsive, 4-directional movement in a 2D game, I've implemented the following. When a key is pressed, the add method adds the direction to the keys array. When the key is released, the remove method removes the direction from the keys array. In my Update method, I call getLast to get the last direction and move the player in that direction.

I want to restrict movement to one direction, but when I press multiple keys, I want the last key's direction to be used. Basically, if I'm going left and press up, but then release up while still holding down left, I want the character to go left, up, and continue going left.

I'm rather inexperienced when it comes to this kind of Javascript, so I'm hoping anyone has some tips / best practices recommendations for this small code snippet. I know naming is a bit iffy - I wanted to name it 'stack', but it's hardly a stack implementation.

function Keys() {
    this.keys = [];
}

// Only add the direction if it doesn't exist yet
Keys.prototype.add = function (dir) {
    for (var i = 0; i < this.keys.length; i++) {
        if (this.keys[i] == dir) {
            return;
        }
    }

    this.keys[this.keys.length] = dir;
};

// Find the index of the first occurrence and splice the array there without it
Keys.prototype.remove = function (dir) {
    for (var i = 0; i < this.keys.length; i++) {
        if (this.keys[i] == dir) {
            this.keys.splice(i, 1);
        }
    }
};

Keys.prototype.getLast = function () {
    if (this.keys.length > 0) {
        return this.keys[this.keys.length - 1];
    }
};

In my main file, I use it as: var keys = new Keys();

Answer 1

If you don't need to support IE8 and under, you could cut out those for-loops by using indexOf().

// Only add the direction if it doesn't exist yet
Keys.prototype.add = function (dir) {
    if (!~this.keys.indexOf(dir)) {
        // you could also do this.keys.indexOf(dir) == -1
        this.keys[this.keys.length] = dir;
    }
};

// Find the index of the first occurrence and splice the array there without it
Keys.prototype.remove = function (dir) {
    // you could also save this in a variable to use the second time
    if (~this.keys.indexOf(dir)) {
        this.keys.splice(this.keys.indexOf(dir), 1);
    }
};

Instead of this.keys[this.keys.length] = dir;, you could just push():

this.keys.push(dir);

Your check in Keys.prototype.getLast is redundant. It'll either return an item from the array, or nothing (undefined). A nonexistant array index also returns undefined, so you could just cut it out:

Keys.prototype.getLast = function () {
    return this.keys[this.keys.length - 1];
};

If you need to support oldIE, you could at least optimize Keys.prototype.remove by adding a return statement after removing the item:

Keys.prototype.remove = function (dir) {
    for (var i = 0; i < this.keys.length; i++) {
        if (this.keys[i] == dir) {
            this.keys.splice(i, 1);
            return;
        }
    }
};