Question

需要帮助我的代码，以便它在initializePlayer中移动矩形，使用键盘箭头向上，向下，向左和向右移动？

function initializePlayer() {
G.context.fillStyle = "purple";
G.context.fillRect(300, 200, 20, 20);
G.context.beginPath(130, 130);
}

function playerMove(dx, dy) {
var canvas = document.getElementById("canvas");
canvas.addEventListener("keydown", keyEventHandler, true); 

}


function keyEventHandler(event) {
if (event.keycode == 38) {
(y - dy > 0)
y -= dy;
}
else if (event.keycode === 40) {  /* Down arrow was pressed */
if (y + dy < HEIGHT)
y += dy;
}
else if (event.keycode === 37) {  /* Left arrow was pressed */
if (x - dx > 0)
x -= dx;
}
else if (event.keycode === 39) {  /* Right arrow was pressed */
if (x + dx < WIDTH)
x += dx;
}
}

function render() {
drawRect(makeRect(300, 200, 20, 20, "purple"))

}

任何和所有帮助表示赞赏!!!

Answer 1

这段代码很乱，格式化！但也有一些错误：

将 keydown事件应用于窗口，而不是画布。否则，事件监听器不会执行。
您使用了event.keycode。这个属性不存在！正确的属性是event.keyCode。
在keyEventHandler中，有一条声明无效：(y - dy > 0)我想你的意思是if (y - dy > 0)。
要在keydown事件发生时重新绘制矩形，您应该在render()结束时调用keyEventHandler。
render不起作用，因为drawRect和makeRect不存在。我希望这只是你代码的一部分，但我还是没有看到这个意义，因为你使用固定坐标？那怎么样：
```
function render() {
    G.context.clearRect(0, 0, WIDTH, HEIGHT);
    G.context.fillStyle = "purple";
    G.context.fillRect(x, y, 20, 20);
}
```

如果您在调试方面遇到问题，我强烈建议您Firebug for Firefox，但每个浏览器都有一个可以使用F12打开的内置控制台。

Answer 2

window.addEventListener("keydown",function(e){keyEventHandler(e);},false);

而不是

canvas.addEventListener("keydown",keyEventHandler,false);

什么实际工作/不工作？我需要更多信息才能真正回答这个问题...... :(

用箭头键在画布中移动形状

2 个答案: