不能同时移动两个 canvas 个矩形

Question

我今天又问了一个问题，我还有一个..

但首先是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pong</title>
    <script type="text/javascript">
        var x = 100;
        var y = 100;
        var xmoveFirst = 720;
        var ymoveFirst = 0;
        var xmoveSecond = 30  ;
        var ymoveSecond = 0;
        function canvas() {
            var can = document.getElementById('theCanvas');
            can.style.backgroundColor = "black";
            var ctx = can.getContext('2d');
            
            //first player
            ctx.fillStyle="white";
            ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
            
            //second player
            ctx.fillStyle = 'white';
            ctx.fillRect(xmoveSecond,ymoveSecond,5,75);
            
            //first player move
            function move(event) {
                ctx.clearRect(0,0,750,750); //clear rects
                if (event.keyCode == 40) {
                    ymoveFirst+=25;
                    console.log("first,"+ymoveFirst);
                }
                
                else if (event.keyCode == 38) {
                    ymoveFirst-=25;
                    console.log("first,"+ymoveFirst);
                }
                
                else if (event.keyCode == 83) {
                    ymoveSecond +=25;
                }
                
                else if (event.keyCode==87) {
                    ymoveSecond -=25;
                }
                ctx.fillStyle="white";
                ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
                ctx.fillRect(xmoveSecond,ymoveSecond,5,75);

            }
            var movement = document.addEventListener("keydown", move);
            
          
        }
      
             
    </script>
</head>
<body onload="canvas()">
    <canvas id="theCanvas" width="750" height="750"></canvas>
</body>
</html>

所以每个矩形都在完美移动:) 但这是问题.. 我不能把它们都移到一起..

感谢帮助！！

Answer 1

问题是，浏览器一次只能处理 1 个按下的键。要绕过这个，你需要做以下事情：

一个数组
两个事件侦听器，一个用于 keydown 事件，一个用于 keyup 事件。

数组将保存当前按下的键。在 keydown 事件侦听器中，您需要将与按下的键的 id 相同索引处的元素设置为 true，而在 keyup 事件侦听器中，您需要将相同的元素设置为 false。示例：

var keys = [];

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

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

这将确保元素在释放键之前保持为真。您可以通过检查具有相同索引的元素来检查当前是否按下了某个键：

if (keys[87]) {
    // The "W" key is pressed
}
if (keys[83]) {
    // The "S" key is pressed
}
/// ...

注意：检查按下的键时不应使用 else-ifs。

不能同时移动两个 canvas 个矩形

cant move two canvas rectangles at same time

javascript

canvas

pong

html5-canvas