Wie kann ich meine Keydown-Veranstaltung zum Laufen bringen?

Question

Ich habe eine Klasse Jugador, die ein neues SVG-Rect erstellt und auf Leinwand (Pong-Spiel) und ich möchte ArrowUp und ArrowDown für den ersten Spieler zuweisen, und die Taste "W" und "A" für den zweiten Spieler für Bewege den "Stock".

class Jugador { 
    constructor(num, coorx, coory, color) { 
     this.parent = document.getElementById("svg"); 
     this.rectan = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
     this.parent.appendChild(this.rectan); 
     this.jugador = document.getElementsByTagName("rect")[num]; 
     this.jugador.setAttribute("x", coorx); 
     this.jugador.setAttribute("y", coory); 
     this.jugador.setAttribute("rx", "14"); 
     this.jugador.setAttribute("ry", "14"); 
     this.jugador.setAttribute("width", "35"); 
     this.jugador.setAttribute("height", "250"); 
     this.jugador.setAttribute("onkeydown", "movimiento(event)"); 
     this.jugador.style.fill = color; 
     this.jugador.style.stroke = "black"; 
     this.jugador.style.strokeWidth = "2"; 
    } 

    movimiento(event) { 
     let code = event.keyCode || event.which; 

     if (document.getElementsByTagName("rect")[0]) { 
      if (code == 38) { // flecha arriba 
       pala1.setAttribute("y", (pala1.getAttribute("y") + 5)); 
      } else if (code == 40) { //flecha abajo 
       pala1.setAttribute("y", (pala1.getAttribute("y") - 5)); 
      } 
     } 
     if (document.getElementsByTagName("rect")[1]) { 
      if (code == 113) { // letra Q 
       pala2.setAttribute("y", (pala2.getAttribute("y") + 5)); 
      } else if (code == 97) { //letra A 
       pala2.setAttribute("y", (pala2.getAttribute("y") - 5)); 
      } 
     } 
    } 
} 

var pala1 = new Jugador(0, 50, 300, "orange"); 
var pala2 = new Jugador(1, 1715, 300, "blue"); 

Answer 1

statt

this.jugador.setAttribute("onkeydown", "movimiento(event)"); 

könnten Sie tun

this.jugador.addEventListener("onkeydown", movimiento); 

aber nach wie vor, wird das Ereignis nur ausgelöst werden, wenn Sie den Fokus auf dieses Element haben.

stattdessen können Sie die Ereignisse auf das gesamte Dokument binden:

document.body.addEventListener("onkeydown", movimiento);