Need help moving two objects on Canvas

Question

To start off, I'm learning JavaScript and trying to create an old Atari Pong game. I'm stuck at this point where I can get one of the paddles moving, but not the second. The game is still functional, but one paddle won't move. Here is my code for the paddle that won't move:

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

and:

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

I already used EventListener and keyUp/downHandler for the first paddle, and I'm wondering if this is why the second won't move?

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;
}
}

Here is the actual moving bit:

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

Any help would be much appreciated. Thanks!

Answer 1

First, a tip on debugging: Start by seeing if the handlers for player 2 are being called! Easy to do, just put console.log("hello fren"); in the handler, then press the key and watch the console. Alternatively you can use breakpoints or "watch" the p2UpPressed variable in the console, but those techniques are a bit more advanced and not really necessary in this situation.

So based on a guess and then your confirmation in the comments, you've got your handler functions named the same for both players. That won't work because it will simply use whichever function is defined first in the code. Don't forget you can name functions whatever you want, so you could name them p1KeyDownHandler and p2KeyDownHandler , or yoyoboi and misterdude if you felt so inclined (although the convention is that you name them something sensible :P).

I'm pretty sure you can add multiple handlers to the same event, but this is probably the better way to do this:

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;
    }
}

And then you only do this once:

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