Execution of Regular function and Arrow function

Question

I am trying to build this 2d-breakout game https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript I tried to replace some function with arrow function.

  document.addEventListener("keydown", keyDownHandler, false);
  document.addEventListener("keyup", keyUpHandler, false);
  document.addEventListener("mousemove", mouseMoveHandler, false);

  function keyDownHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
      rightPressed = true;
    } else if (e.key == "Left" || e.key == "ArrowLeft") {
      leftPressed = true;
    }
  }

  function keyUpHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
      rightPressed = false;
    } else if (e.key == "Left" || e.key == "ArrowLeft") {
      leftPressed = false;
    }
  }

  function mouseMoveHandler(e) {
    var relativeX = e.clientX - canvas.offsetLeft;
    if (relativeX > 0 && relativeX < canvas.width) {
      paddleX = relativeX - paddleWidth / 2;
    }
  }

This code executes fine, when I use this to move the paddle it moves perfectly.

// Key Down Handler
document.addEventListener(
  "keydown",
  (e) => {
    if (e.key == "Right" || e.key == "ArrowRight") {
      rightPressed = true;
    } else if (e.key == "Left" || e.key == "ArrowLeft") {
      leftPressed = true;
    }
  },
  false
);

// Key Up Handler
document.addEventListener(
  "keyup",
  (e) => {
    if (e.key == "Left" || e.key == "ArrowLeft") {
      rightPressed = false;
    } else if (e.key == "Left" || e.key == "ArrowLeft") {
      leftPressed = false;
    }
  },
  false
);

// Mouse Move Handler
document.addEventListener(
  "mouseover",
  (e) => {
    var relativeX = e.clientX - canvas.offsetLeft;
    if (relativeX > 0 && relativeX < canvas.width) {
      paddleX = relativeX - paddleWidth / 2;
    }
  },
  false
);

But this code does not work, the paddle doesn't stop when pressed right or left until it reaches the boundary. And the mouse does not move the paddle swiftly.

Answer 1

For the keyUp handler your previous code was

function keyUpHandler(e) {
  if (e.key == "Right" || e.key == "ArrowRight") {
    rightPressed = false;
  } else if (e.key == "Left" || e.key == "ArrowLeft") {
    leftPressed = false;
  }
}

but what you wrote was just opposite.

(e) => {
  if (e.key == "Left" || e.key == "ArrowLeft") {  //should be (e.key == "Right" || e.key == "ArrowRight")
    rightPressed = false;
  } else if (e.key == "Left" || e.key == "ArrowLeft") {
    leftPressed = false;
  }
}

Try changing that.

and as for the mouse one I am not sure what the problem is but you seem to be confused between the "mousemove" event and the "mouseover" events

the code on the top executes the function only if the mouse is moving but if you use mouseover event it will be triggered even if the mouse is not moving. and that may cause some unwanted problems.

Try removing them. ;)