キーを押したときにキャンバス（PACMAN）上のオブジェクトを移動する方法

Question

私のJavascriptプログラムに問題があります。私はパックマンをやっている。私はキャンバス上にイメージ（パックマン）を移動する必要があります。ユーザーがキーを押すと、イベントが発生したときに実行された関数を作成しました。私はイベントが取られないので問題が発生したと思う。あなたの助けが必要です。ありがとう!!

function startGame() 
{ 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    pacman_derecha.src = 'pacman_derecha.jpg'; 
    pacman_derecha.onload = function() 
    { 
     context.drawImage(pacman_derecha, pos_pacman_x,pos_pacman_y); 
    } 

    /* Procedimiento principal */ 

    /* Dibujamos el escenario */ 
    for (var i = 0; i < escenario.length; i++) 
    { 
     var x = escenario[i].x; 
     var y = escenario[i].y; 
     var ancho = escenario[i].ancho; 
     var alto = escenario[i].alto; 
     context.strokeStyle = "#0000ff"; 
     context.lineWidth = 2; 
     context.strokeRect(x, y, ancho, alto); 
    } 

    /* Dibujamos las bolitas */ 
    context.strokeStyle = "#f3f3f3"; 
    for(var j = 0; j < bolas.length; j++) 
    { 
     var x = bolas[j].x; 
     var y = bolas[j].y; 
     context.strokeRect(x,y,2,2); 
    } 

    /* Pintamos de nuevo el escenario y la nueva posicion del pacman */ 
    setInterval(drawloop, 10); 

    /* Analizamos si el usuario presiona alguna tecla */ 
    canvas.addEventListener('keydown', movimiento, true); 

} 

function movimiento(evento) 
{ 
    alert(evento.keyCode); 
    switch (evento.keyCode) 
    { 
     /*derecha*/ 
     case 39: 
      pos_pacman_x = pos_pacman_x + 200; 
      break; 

     /*izquierda*/ 
     case 37: 
      pos_pacman_x = pos_pacman_x - 200; 
      break; 

     /*abajo*/ 
     case 40: 
      pos_pacman_y = pos_pacman_y - 200; 
      break; 

     /*arriba*/ 
     case 38: 
      pos_pacman_y = pos_pacman_y + 200; 
      break; 

     default: 
      pos_pacman_x = pos_pacman_x + 50; 
      pos_pacman_y = pos_pacman_y - 50; 
      break; 
    } 
} 

function drawloop() 
{ 
    pacman_arriba.src = 'pacman_arriba.jpg'; 
    pacman_arriba.onload = function() 
    { 
     context.drawImage(pacman_arriba, pos_pacman_x,pos_pacman_y); 
    } 
    alert(pos_pacman_x+" - "+pos_pacman_y) 
} 

Answer 1

あなたのカーソルでそれを集中することができないので、canvasは​​- イベントをリッスンすることが可能ではありません。代わりに、これらのイベントを受信するウィンドウにする必要があります。

window.onkeydown = movimiento;