如何使用canvas处理多个按键

Question

使用类似的东西:

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

对于多人游戏,我如何能够同时处理多个按键？多人会使用一个键盘,因此同时按下Q和P键可以在屏幕上移动不同的对象.

我还没有任何keyup手柄,并想知道这是否能解决这个问题.

到目前为止我的逻辑是这样的:

if keydown == Q
    paddle.left = true;

...

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

玩家也可以按住按钮.

Answer 1

这就是我一般的做法.首先,您需要一个数组来保存keystates.

var keys=[];

然后设置您的事件监听器.

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

下面的操作是将数组中的项设置为true或false,对应于该键代码.

然后你只需要使用一些条件来查看按下的内容以及应该做什么.

    // 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--;
        }
    }

下面是一个演示,您可以在其中移动并弄乱多个按键.使用wasd和箭头键.

现场演示

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;
});