Question

我正在尝试创建一个在按键上移动以进行乒乓球游戏的矩形，当我按下该键时，左直接消失了.. 任何想法如何解决问题？这非常重要.. 代码是用vanilla javascript编写的，所以请不要写jQuery ..

＆＃13;

<!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 moveFirst(eFirst) {
                ctx.clearRect(0,0,750,750); //clear rects
                if (eFirst.keyCode == 40) {
                    ymoveFirst+=25;
                    console.log("first,"+ymoveFirst);
                }
                
                else if (eFirst.keyCode == 38) {
                    ymoveFirst-=25;
                    console.log("first,"+ymoveFirst);
                }
                ctx.fillStyle="white";
                ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
                ctx.fillRect(xmoveSecond,ymoveSecond,5,75);

            }
            var first = document.onkeydown = moveFirst;
            
          //second player move
            
            function moveSecond(eSecond) {
                ctx.clearRect(0,0,750,750);
                if (eSecond.keyCode == 83) {
                    ymoveSecond+=25;
                    console.log("second,"+ymoveSecond);
                }
                
                else if (eSecond.keyCode == 87) {
                    ymoveSecond-=25;  
                }
                
                ctx.fillStyle="white";
                ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
                ctx.fillRect(xmoveSecond,ymoveSecond,5,75);
                console.log("second,"+ymoveSecond)
            }
            
            var second = document.onkeydown = moveSecond;
        }
      
            
        83,87
    </script>
</head>
<body onload="canvas()">
    <canvas id="theCanvas" width="750" height="750"></canvas>
</body>
</html>

＆＃13;

Answer 1

这一行：can.width=can.width;重置画布宽度。

更改画布大小（宽度或高度）时，清除画布（使所有内容变黑）。在这一行之后，你只是重新绘制最右边的桨，所以左边的桨仍然缺失。

如果你想让它回来，你还需要重新绘制最左边的球拍。这是修改后的moveRight（）函数：

function moveRight(eFirst) {
  if (eFirst.keyCode==40) {
    ymoveFirst+=25;
    console.log(ymoveFirst);
  }

  else if (eFirst.keyCode==38) {
    ymoveFirst-=25;
    console.log(ymoveFirst);
  }
  can.width=can.width;
  ctx.fillStyle="white";

  // Redraw BOTH paddles
  ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
  ctx.fillRect(xmoveSecond,ymoveSecond,5,75);
}

另外，替换

document.onkeydown = moveFirst;和document.onkeydown = moveSecond;

带

document.addEventListener("keydown", moveFirst);和document.addEventListener("keydown", moveSecond);

目前，您正在使用document.onkeydown = moveSecond;覆盖第一个侦听器。使用addEventListener，您不会覆盖已存在的那些。

Canvas在事件监听器

1 个答案: