So verschieben Sie ein Objekt auf Leinwand (PACMAN), wenn Sie eine Taste drücken

Question

Ich habe ein Problem mit meinem Javascript-Programm. Ich mache Pacman. Ich muss das Bild (Pacman) auf Leinwand verschieben Wenn der Benutzer eine Taste drückt, so habe ich eine Funktion, die ausgeführt wurde, wenn das Ereignis auftritt. Ich denke, das Problem wird erzeugt, weil das Ereignis nicht genommen wird. Ich brauche deine Hilfe. Vielen Dank!!

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

Es ist nicht möglich, eine canvas hören für keydown -Veranstaltungen zu machen, weil Sie es nicht mit dem Cursor konzentrieren. Sie müssen das Fenster stattdessen auf diese Ereignisse aufmerksam machen lassen:

window.onkeydown = movimiento;