矢印キーでキャンバスに図形を移動

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")) 

} 

代わりに、実際に働いて/いない働いて何

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

の

Answer 1

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

？私は、このコードは非常に厄介である:(

Answer 2

...実際に質問に答えるために多くの情報を必要とする、フォーマットししかし、いくつかのバグもあります！

• はのKeyDownイベントは、ウィンドウに適用します、 。。。！ないキャンバスそうでない場合は、イベントリスナーを行わない
• あなたはevent.keycodeを使用し、このプロパティが存在しない正しいプロパティがevent.keyCodeある

• keyEventHandlerで何もしないステートメントがあります：(y - dy > 0)あなたはif (y - dy > 0)を意味すると思います。

• ​​イベントが発生したときに矩形を再描画するには、keyEventHandlerの末尾にrender()を呼び出す必要があります。

• renderdrawRectおよび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で開くことができる組み込みのコンソールを持っています。