CODEWITHSUNDEEP
javascripthtmlcss
Ninad Bhide
Ninad Bhide

Reputation: 11

Why is the <div> in my if statement affecting another div although they have no relation?

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>

Upvotes: 1

Views: 50

Answers (1)

Khalfoun Mohamed El Mehdi
Khalfoun Mohamed El Mehdi

Reputation: 364

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>

Upvotes: 2

Related Questions