Need help moving two objects on the canvas
To get started, I'm learning JavaScript and trying to create an old Atari Pong game. I am stuck at this point where I can take one of the paddles, but not the other. 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've 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. Thank!
source to share
First, a debugging tip: Start by seeing handlers for Player 2 being called! Easy to do, just put console.log("hello fren");
in a handler, then hit a key and watch the console. Alternatively, you can use breakpoints or "watch" the variable p2UpPressed
in the console, but these methods are a little more advanced and unnecessary in this situation.
So, based on guesswork and then your confirmation in the comments, you have handler functions that are the same for both players. It won't work because it will just use whatever function is defined first in the code. Don't forget that you can call the functions what you want, so you can call them p1KeyDownHandler
and p2KeyDownHandler
, or yoyoboi
and misterdude
if you think you are so inclined (although the convention is that you call them something sane: p).
I'm sure you can add multiple handlers to the same event, but this is probably the best way to do it:
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 it once:
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
source to share