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

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事件时重新绘制矩形，应在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); } 

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

Answer 2

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

代替

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

实际在起作用/不起作用？ 我需要更多信息才能真正回答问题... :(