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

需要我的代码帮助，以便它移动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")) 

}

任何和所有的帮助表示赞赏！

来源

2016-04-29 sonickd

-1

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

代替

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

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

来源

2016-04-30 19:02:57

G.context显然是'

这段代码很凌乱，格式化但也有一些缺陷：

应用keydown事件到窗口，。！不是画布否则事件侦听器无法进行
您使用event.keycode此属性不存在正确的属性是event.keyCode
在keyEventHandler还有就是什么都不做的语句：。(y - dy > 0)我想你的意思是if (y - dy > 0)。
要在发生事件时重新绘制矩形，应在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打开控制台。

来源

2016-04-30 19:56:46 Aloso

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

回答

相关问题