moving two pong game paddles at the same time

Question

I have been frustrated with making a pong game. I have two paddles that I can move separately and freely as required but I miss something and they can't move at the same time as I want, it's a multiplayer game, two opponents press different keyboard keys at the same time, but something's missing in my code!

function leftPaddleMoveUp() {
  leftTopLenght = leftPaddle.getBoundingClientRect().top;
  if (Math.floor(leftTopLenght) === 100) {
    return NaN;
  } else {
    leftPaddle.style.top = leftPaddleTopUp + leftPaddleTopDown + "px";
    leftPaddleTopUp -= 20; // Speed
  }
}
function leftPaddleMoveDown() {
  leftTopLenght = leftPaddle.getBoundingClientRect().top;
  if (Math.floor(leftTopLenght) === 660) {
    return NaN;
  } else {
    leftPaddle.style.top = leftPaddleTopUp + leftPaddleTopDown + "px";
    leftPaddleTopDown += 20; // Speed
  }
}
function rightPaddleMoveUp() {
  rightTopLenght = rightPaddle.getBoundingClientRect().top;
  if (Math.floor(rightTopLenght) === 100) {
    return NaN;
  } else {
    rightPaddle.style.top = rightPaddleTopUp + rightPaddleTopDown + "px";
    rightPaddleTopUp -= 20; // Speed
  }
}
function rightPaddleMoveDown() {
  rightTopLenght = rightPaddle.getBoundingClientRect().top;
  if (Math.floor(rightTopLenght) === 660) {
    return NaN;
  } else {
    rightPaddle.style.top = rightPaddleTopUp + rightPaddleTopDown + "px";
    rightPaddleTopDown += 20; // Speed
  }
}
document.addEventListener("keypress", (event) => {
  // PlayerOne&LeftSide
  if (event.keyCode === 83 /*azerty & qwerty*/) {
    leftPaddleMoveUp();
  } else if (
    event.keyCode === 87 /*azerty*/ ||
    event.keyCode === 90 /*qwerty*/
  ) {
    leftPaddleMoveDown();
  }
  // PlayerTwo&RightSide
  else if (event.keyCode === 38 /*UpperArrow*/) {
    rightPaddleMoveUp();
  } else if (event.keyCode === 40 /*LowerArrow*/) {
    rightPaddleMoveDown();
  }
});

Is there is any method or function to accomplish this task?

[Keypress Event](https://stackoverflow.com/a/5597114/10304804) doesn't trigger for the arrow keys, you have to listen for the keydown/keyup events. — Christopher, Oct 02 '22 at 20:44

score 0 · Answer 1 · answered Oct 02 '22 at 20:43

You should use keydown and keyup events, and store the currently pressed keys inside an array.

const currentKeysDown = []

document.addEventListener("keydown", (event) => {
  if (!currentKeysDown.includes(event.keyCode)) {
    currentKeysDown.push(event.keyCode)
  }
  console.log(currentKeysDown)

  movePaddles()
})

document.addEventListener("keyup", (event) => {
  currentKeysDown.splice(currentKeysDown.indexOf(event.keyCode), 1)
  console.log(currentKeysDown)

  movePaddles()
})


function movePaddles() {
  // PlayerOne&LeftSide
  if (currentKeysDown.includes(83) /*azerty & qwerty*/ ) {
    leftPaddleMoveUp();
  } else if (
    currentKeysDown.includes(87) /*azerty*/ ||
    currentKeysDown.includes(90) /*qwerty*/
  ) {
    leftPaddleMoveDown();
  }

  // PlayerTwo&RightSide
  if (currentKeysDown.includes(38) /*UpperArrow*/ ) {
    rightPaddleMoveUp();
  } else if (currentKeysDown.includes(40) /*LowerArrow*/ ) {
    rightPaddleMoveDown();
  }
}

function leftPaddleMoveUp() {
  console.log('Player1 moves UP')
}

function leftPaddleMoveDown() {
  console.log('Player1 moves DOWN')
}

function rightPaddleMoveUp() {
  console.log('Player2 moves UP')
}

function rightPaddleMoveDown() {
  console.log('Player2 moves DOWN')
}

moving two pong game paddles at the same time

1 Answers1