Moving an image

Question

So I am doing a new project, and this project will be a game, tennis. I am trying to create a 2-player game, but I am currently stuck on moving an image. I have managed to move the image by holding down the "WASD", or arrow keys, but they move across the screen unexpectedly. How do I fix this?
You can see my code here and try to move the characters: https://code.sololearn.com/WJRPNb50TQue/#js

Answer 1

Your way of speed += 2 and then left/top = - speed is wrong! Your player will jump like crazy between different quadrants with respect to the page origin 0, 0
You need to separate position variables and speed variable:
var playerLeft, playerTop;
// and then initialize them with value of your start position
const speed = 2; // constant
//move left
playerLeft += speed;
.style.left = playerLeft + "px" ; //use your own dom name
//move right
playerLeft -= speed; /* you see? Update Current position by minus speed. */
.style.right = player Left + "px" ; // use your own dom name
Same idea for moving up and down, I leave it to yourself as homework.
And oh, because you have two players
For players positions you need two pairs:
player1_left
player1_top
player2_left
player2_top