用箭頭鍵在畫布中移動圖形

需要我的代碼幫助，以便它移動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

用箭頭鍵在畫布中移動圖形

回答

相關問題