I am creating a Pong game using JS and HTML, there are two paddles (player1 and player2), the If satement starting on line 11 dictates the movement of the paddles.
However, when I move the first paddle, the second paddle moves as well although they have different controls, I cannot seem to figure out why this is happening
// Important Variables to declare
let paddle1 = document.getElementById("player1")
let paddle2 = document.getElementById("player2")
let paddlepos1 = 250
let paddlepos2 = 250
//Event Listener
// Paddle 1: (W to move up, S to move down)
//Paddle 2: (UpArrow to move up, down arrow to Move down)
document.addEventListener('keydown', function(event) {
if (event.keyCode == 87) {
//Move Paddle 1 Up
paddlepos1 -= 10
paddle1.style.marginTop = paddlepos1 + "px"
} else if (event.keyCode == 83) {
//Move Paddle 1 Down
paddlepos1 += 10
paddle1.style.marginTop = paddlepos1 + "px"
} else if (event.keyCode == 38) {
// paddle 2 up
paddlepos2 -= 10
paddle2.style.marginTop = paddlepos2 + "px"
} else if (event.keyCode == 40) {
//paddle 2 down
paddlepos2 += 10
paddle2.style.marginTop = paddlepos2 + "px"
}
}
)#gameArena {
width: 500px;
height: 500px;
border: 1px solid black;
align-self: auto;
margin: auto;
background-color: green
}
#player1 {
width: 10px;
height: 100px;
border: 1px solid black;
background-color: white;
margin-left: 10px;
margin-top: 250px;
}
#player2 {
width: 10px;
height: 100px;
border: 1px solid black;
background-color: white;
margin-left: 480px;
margin-top: -250px;
}<body>
<div id="gameArena">
<div id="player1"> </div>
<div id="player2"> </div>
</div>
</body>Instead of using margin , use for players position:absolute ( and for the container : position:relative )
for the player on the right do right:10px. for the player of left do left:10px
then , to move change the top for example
if (event.keyCode == 83) {
//Move Paddle 1 Down
paddlepos1 += 10;
return (paddle1.style.top = paddlepos1 + "px");
}
// Important Variables to declare
let paddle1 = document.getElementById("player1");
let paddle2 = document.getElementById("player2");
let paddlepos1 = 250;
let paddlepos2 = 250;
//Event Listener
// Paddle 1: (W to move up, S to move down)
//Paddle 2: (UpArrow to move up, down arrow to Move down)
document.addEventListener('keydown', function (event) {
if (event.keyCode == 87) {
//Move Paddle 1 Up
paddlepos1 -= 10;
return (paddle1.style.top = paddlepos1 + "px");
} else if (event.keyCode == 83) {
//Move Paddle 1 Down
paddlepos1 += 10;
return (paddle1.style.top = paddlepos1 + "px");
} else if (event.keyCode == 38) {
// paddle 2 up
paddlepos2 -= 10;
return (paddle2.style.top = paddlepos2 + "px");
} else if (event.keyCode == 40) {
//paddle 2 down
paddlepos2 += 10;
return (paddle2.style.top = paddlepos2 + "px");
}
});#gameArena {
width: 500px;
height: 500px;
border: 1px solid black;
align-self: auto;
margin: auto;
background-color: green;
position: relative;
}
#player1 {
width: 10px;
height: 100px;
border: 1px solid black;
background-color: white;
position:absolute;
left: 10px;
top: 250px;
}
#player2 {
width: 10px;
height: 100px;
border: 1px solid black;
background-color: white;
position:absolute;
right: 10px;
top: 250px;
}<body>
<div id="gameArena">
<div id="player1"> </div>
<div id="player2"> </div>
</div>
</body>