Question

im creating a simple 2d game, and I want save the keydown keys into array, and execute them inisde a loop, so the user can hold a key and make it look like the chartater is moving non stop.

i got a setInterval function that act like a game Timer, and it just loop it self all the time. i added a listener and an array to hold the key.

I checked the keys inside the array and it look fine but, the functions moveRight and moveLeft are not working for some reson.

here is the code:

      this.keysPressed = new Array();
      InitGameLoop: function () {
        var that = this;
        setInterval(function () {
            $(document).keydown(function (e) {
                var key = e.which;
                that.keysPressed.push(key);
                for (var i = 0; i < that.keysPressed.length; i++) {
                    if (that.keysPressed[i] == 38) {
                        that.moveRight(worldWidth, 10);
                    }
                    else if (that.keysPressed[i] == 37) {
                        that.moveLeft(10);
                    }
                    log(that.keysPressed, that.yPos);
                    that.keysPressed.pop();
                }
            });
        }, 60);

my questions are:

1. what am i doing worng?
2. is this a good idea? (if not, please feel free to recommend me about another 🙂 )

(sorry for my english)

Answer 1

Registering an eventhandler inside setInterval is always wrong. In your case, every 60 milliseconds you are creating an additional listener, and when you press a key, all of your listeners will fire. Also there is absolutely no need to store them in an array. Just register the listener once, and it will fire each time a key is pressed. If more than one keys are pressed, the listener will fire for each key individually.

$(document).keydown(function (e) {
     var key = e.which;
     console.log(key);
     // call your according functions here
     switch (key){
     case 37: // moving left
        // do stuff
        // set a flag to indicate that you are moving left
        moveleft = true;
        break;
     case 39: // moving right
        // do stuff
        // set a flag to indicate that you are moving right
        moveright = true;
        break;
     }
});

Since you are catching the keydown, you should set flags. This way you can track which keys are pressed currently. On keyup, you are resetting these flags again (need another eventhandler for that).