Benötigen Sie Hilfe beim Verschieben von zwei Objekten auf Canvas

Question

Um anzufangen, lerne ich JavaScript und versuche, ein altes Atari Pong-Spiel zu erstellen. Ich stecke an diesem Punkt fest, an dem ich eines der Paddel bewegen kann, aber nicht das zweite. Das Spiel ist noch funktionstüchtig, aber ein Paddel bewegt sich nicht. Hier ist mein Code für das Paddel, die sich nicht bewegen wird:

var p2X = canvas.width/2 + 550; 
var p2Y = canvas.height/2; 
var p2Radius = 35; 
var p2Height = 100; 

und:

var p2UpPressed = false; 
var p2DownPressed = false; 
document.addEventListener("keydown", keyDownHandler, false); 
document.addEventListener("keyup", keyUpHandler, false); 

ich schon Eventlistener und keyUp/downHandler für das erste Paddel benutzt, und ich frage mich, ob dies Warum wird sich die zweite nicht bewegen?

function keyDownHandler(e){ 
if(e.keyCode == 87){ 
p2UpPressed = true; 
} 
else if(e.keyCode == 83){ 
p2DownPressed = true; 
} 
} 
function keyUpHandler(e){ 
if(e.keyCode == 87){ 
p2UpPressed = false; 
} 
else if(e.keyCode == 83){ 
p2DownPressed = false; 
} 
} 

Hier ist die tatsächliche Bewegungs Bit:

if(p2UpPressed && p2Y <canvas.height-p2Radius){ 
p2Y += 7; 
} 
else if(p2DownPressed && p2Y > 0){ 
p2Y-=7; 
} 

Jede Hilfe wäre sehr geschätzt. Vielen Dank!

Answer 1

Zuerst ein Tipp zum Debugging: Beginne damit, zu sehen, ob die Handler für Spieler 2 aufgerufen werden! Einfach zu tun, setzen Sie einfach console.log("hello fren"); in den Handler, dann drücken Sie die Taste und beobachten Sie die Konsole. Alternativ können Sie Haltepunkte verwenden oder die Variable p2UpPressed in der Konsole beobachten, aber diese Techniken sind etwas fortgeschrittener und in dieser Situation nicht wirklich notwendig.

Also basierend auf einer Schätzung und dann Ihre Bestätigung in den Kommentaren, haben Sie Ihre Handler-Funktionen die gleichen für beide Spieler benannt. Das wird nicht funktionieren, weil es einfach die Funktion verwendet, die zuerst im Code definiert ist. Vergessen Sie nicht, dass Sie Funktionen benennen können, was auch immer Sie wollen, also könnten Sie sie p1KeyDownHandler und p2KeyDownHandler oder yoyoboi und misterdude nennen, wenn Sie so geneigt waren (obwohl die Konvention ist, dass Sie ihnen etwas Vernünftiges nennen: P).

Ich bin mir ziemlich sicher, dass Sie mehrere Handler auf das gleiche Ereignis hinzufügen können, aber das ist wahrscheinlich der beste Weg, dies zu tun:

function keyDownHandler(e) { 
    if (e.keyCode == xx) { //replace xx with whatever keycode you want for p1 
     p1UpPressed = true; 
    } else if (e.keyCode == xx) { //same as above 
     p1DownPressed = true; 
    } else if (e.keyCode == 87) { 
     p2UpPressed = true; 
    } else if (e.keyCode == 83) { 
     p2DownPressed = true; 
    } 
} 

function keyUpHandler(e) { 
    if (e.keyCode == xx) { //same as above 
     p1UpPressed = false; 
    } else if (e.keyCode == xx) { //same as above 
     p1DownPressed = false; 
    } else if (e.keyCode == 87) { 
     p2UpPressed = false; 
    } else if (e.keyCode == 83) { 
     p2DownPressed = false; 
    } 
} 

Und dann nur Sie dies einmal tun:

document.addEventListener("keydown", keyDownHandler, false); 
document.addEventListener("keyup", keyUpHandler, false);