Estoy creando un juego de Pong usando JS y HTML, hay dos paletas (jugador1 y jugador2), la declaración If que comienza en la línea 11 dicta el movimiento de las paletas.
Sin embargo, cuando muevo la primera paleta, la segunda paleta también se mueve aunque tienen controles diferentes, parece que no puedo entender por qué sucede esto.
// 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>En lugar de usar margin, use para los jugadores position:absolute (y para el contenedor: position:relative )
para el jugador de la derecha haz right:10px . para el jugador de la izquierda haz left:10px
entonces, para mover cambiar la top por ejemplo
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>