Using something like:

window.addEventListener("keydown", handleFn, true);

How would I be able to handle multiple keypresses at the same time, for multiplayer use? Multiple people would be using one keyboard, so like the Q and P keys would be pressed at the same time to move different objects on screen.

I don't have any keyup handles yet and wonder if that would solve this.

The logic I have so far is something like:

if keydown == Q
    paddle.left = true;

...

//game loop
if paddle.left == true
    paddle.x -= 1;
    paddle.left = false;

Players can be expected to hold the button(s) as well.

Using something like:

window.addEventListener("keydown", handleFn, true);

How would I be able to handle multiple keypresses at the same time, for multiplayer use? Multiple people would be using one keyboard, so like the Q and P keys would be pressed at the same time to move different objects on screen.

I don't have any keyup handles yet and wonder if that would solve this.

The logic I have so far is something like:

if keydown == Q
    paddle.left = true;

...

//game loop
if paddle.left == true
    paddle.x -= 1;
    paddle.left = false;

Players can be expected to hold the button(s) as well.

• javascript
• canvas

2 Answers 2

This is how I generally do it. First you need an array to hold the keystates.

var keys=[];

Then setup your event listeners.

// key events
document.body.addEventListener("keydown", function (e) {
    keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function (e) {
    keys[e.keyCode] = false;
});

What the following does is set an item in the array to either true or false, corresponding to that keys code.

Then you just need to use some conditions to see what is pressed and what you should do.

    // check the keys and do the movement.
    if (keys[38]) {
        if (velY > -speed) {
            velY--;
        }
    }

    if (keys[40]) {
        if (velY < speed) {
            velY++;
        }
    }
    if (keys[39]) {
        if (velX < speed) {
            velX++;
        }
    }
    if (keys[37]) {
        if (velX > -speed) {
            velX--;
        }
    }

Below is a demo where you can move around and mess with multiple key presses. Use wasd, and the arrow keys.

Live Demo

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = canvas.height = 300;

var player1 = {
    x: 50,
    y: 150,
    velY: 0,
    velX: 0,
    color: "blue"
},
player2 = {
    x: 250,
    y: 150,
    velY: 0,
    velX: 0,
    color: "red"
};

var x = 150,
    y = 150,
    velY = 0,
    velX = 0,
    speed = 2,
    friction = 0.98,
    keys = [];

function update() {

    if (keys[38]) {
        if (player1.velY > -speed) {
            player1.velY--;
        }
    }

    if (keys[40]) {
        if (player1.velY < speed) {
            player1.velY++;
        }
    }
    if (keys[39]) {
        if (player1.velX < speed) {
            player1.velX++;
        }
    }
    if (keys[37]) {
        if (player1.velX > -speed) {
            player1.velX--;
        }
    }

    if (keys[87]) {
        if (player2.velY > -speed) {
            player2.velY--;
        }
    }

    if (keys[83]) {
        if (player2.velY < speed) {
            player2.velY++;
        }
    }
    if (keys[68]) {
        if (player2.velX < speed) {
            player2.velX++;
        }
    }
    if (keys[65]) {
        if (player2.velX > -speed) {
            player2.velX--;
        }
    }
    ctx.clearRect(0, 0, 300, 300);
    updatePlayer(player1);
    updatePlayer(player2);
    setTimeout(update, 10);
}

function updatePlayer(player) {
    player.velY *= friction;
    player.y += player.velY;
    player.velX *= friction;
    player.x += player.velX;

    if (player.x >= 295) {
        player.x = 295;
    } else if (player.x <= 5) {
        player.x = 5;
    }

    if (player.y > 295) {
        player.y = 295;
    } else if (player.y <= 5) {
        player.y = 5;
    }

    ctx.fillStyle = player.color;
    ctx.beginPath();
    ctx.arc(player.x, player.y, 5, 0, Math.PI * 2);
    ctx.fill();
}

update();

document.body.addEventListener("keydown", function (e) {
    keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function (e) {
    keys[e.keyCode] = false;
});

You could try a pattern like this:

(function game(){
    // canvas setup ...

    // set up a "hash" of keycodes associated with whether or not they  
    // are pressed, and what should happen when they are pressed.
    var keys = {
        37:{down:false, action:function(){player1.velX--;}},
        38:{down:false, action:function(){player1.velY--;}},
        39:{down:false, action:function(){player1.velX++;}},
        40:{down:false, action:function(){player1.velY++;}},

        65:{down:false, action:function(){player2.velX--;}},
        68:{down:false, action:function(){player2.velX++;}},
        83:{down:false, action:function(){player2.velY++;}},
        87:{down:false, action:function(){player2.velY--;}},
    };

    document.body.addEventListener("keydown", function (e) {
        if(keys[e.keyCode]) keys[e.keyCode].down = true;
    });
    document.body.addEventListener("keyup", function (e) {
        if(keys[e.keyCode]) keys[e.keyCode].down = false;
    });

    (function update() {
        ctx.clearRect(...);

        for(var key in keys)
            if(keys[key].down)
                keys[key].action();

        // redraw players. 

        requestAnimationFrame(update);
    })();
})();

The nice thing about this setup is that it associates the actions directly with the keys, allows you to add more key-actions easily, and allows for a great amount of flexibility with the possibility of easily adding/removing key presses at runtime, and even changing what a particular key does at any given time.