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

【问题标题】：Moving shapes in canvas with arrow keys使用箭头键在画布中移动形状
【发布时间】：2016-05-01 08:06:10
【问题描述】：

需要有关我的代码的帮助，以便它使用键盘箭头移动 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"))

}

感谢所有帮助！！！

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

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

将 keydown 事件 应用到窗口，而不是画布。否则不执行事件监听。
您使用了event.keycode。该属性不存在！正确的属性是event.keyCode。
在keyEventHandler 中有一个什么都不做的声明：(y - dy > 0) 我猜你的意思是if (y - dy > 0)。
要在keydown 事件发生时重新绘制矩形，您应该在keyEventHandler 的末尾调用render()。
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打开。

【讨论】：

【解决方案2】：

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

而不是

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

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

【讨论】：

显然 G.context 是<canvas> 元素的二维上下文。而且您的解决方案不起作用。