如何处理多个按键与画布 [英] How to handle multiple keypresses with canvas

问题描述

使用类似：

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

我如何能够同时处理多个按键，适合多人使用？多人将使用一个键盘，所以像Q和P键将同时按下，以移动屏幕上的不同对象。

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.

我没有 keyup 句柄，并且想知道是否会解决这个问题。

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

我到目前为止的逻辑是： / p>

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;

玩家也可以持有按钮。

推荐答案

这是我一般做的。首先你需要一个数组来保存密钥。

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

以下操作将数组中的项设置为true或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--;
        }
    }

下面是一个演示，与多个按键。使用wasd和箭头键。

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

Live Demo

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

这篇关于如何处理多个按键与画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！