Question

var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
var xPosition = 0;
var yPosition = 0;
var frameLength = 20; 

function gameLoop(){

    gameUpdate();
    setTimeout(function(){gameLoop()}, frameLength);
}

function gameUpdate(){

ctx.clearRect(0, 0, 480, 640);
window.addEventListener('keydown', function(event){switch(event.keyCode){case 38: yPosition -= 1; break; case 40: yPosition += 1; break;}}, false);
ctx.fillRect(xPosition, yPosition, 50, 50);

}

$(document).ready(function () {
gameLoop();
});

我正在尝试通过箭头键在画布中移动一个矩形。 X和Y位置是变量xPosition和yPosition。目前严格处理Y方向，我有一个由eventlistener触发的“keydown”切换功能。例如，当按下DOWN-Arrow键时，它会增加fillRect(X, Y, originX, OriginY)中的Y值。这会更改全局变量，然后在“画布”上绘制带有新坐标的新矩形。 GameLoop重置，冲洗重复。这就是我认为它在理论上起作用的方式。

然而，出于某种原因，即使我什么都不做，我让脚本运行的时间越长，当我按下向上或向下按钮时，“更远”的方块会跳跃。也就是说，按下它会从画布上启动这么多像素，这个像素由setTimeout的循环次数决定，它出现了。为什么会这样，我该如何解决？

Answer 1

您要多次添加活动。只需将此行移至全局范围：

window.addEventListener('keydown', function(event){switch(event.keyCode){case...

如果不是，将多次检测到密钥并因此累积

您还可以在处理程序中输入preventDefault：

window.addEventListener('keydown', function(event){
    if (event.preventDefault) event.preventDefault();
    switch(event.keyCode){case ...

尽管没有事件发生，为什么var yPosition在每个循环后递增？

1 个答案: