Controls issue

Question

Hi 👋
I want to make a two player ping pong game but I just can’t get the controls correct.
Can someone please help me 🙏
My apologies if my code is not readable 😅😅,
I’m still mastering the basics.

https://sololearn.com/compiler-playground/W7uNwmq8gKN9/?ref=app

Answer 1

Hey, it's not very clear what you are trying to do, since there are only 2 buttons and the players already move without input, but assuming you wanted to control each player individually with buttons, here is a fixed copy of code:

https://www.sololearn.com/en/compiler-playground/WcQTujgW74pC

What was changed:

1. Removed automatic movemnt of the players from animate(), including the check : lines 71, 73-78
2. Correctly defined movement functions, with checks (these are probably terrible, but minimally functional) - P1() and P2() functions.
3. Extra buttons for down/up control.

If you want to be able to control players with keyboard clicks instead (like a real game), you want to create an event listener. Something like:

document.addEventListener('keydown', function(e) {
if (e.key === 'w' || e.key === 'W') P1Up();
if (e.key === 's' || e.key === 'S') P1Down();
if (e.key === 'ArrowUp') P2Up();
if (e.key === 'ArrowDown') P2Down();
});

https://www.w3schools.com/js/js_htmldom_eventlistener.asp