Estoy tratando de construir este juego de 2d-breakout https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript Intenté reemplazar alguna función con la función de flecha.
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; } }Este código se ejecuta bien, cuando lo uso para mover la paleta se mueve perfectamente.
// 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 );Pero este código no funciona, la paleta no se detiene cuando se presiona hacia la derecha o hacia la izquierda hasta que llega al límite. Y el mouse no mueve la paleta rápidamente.
Para el controlador keyUp, su código anterior era
function keyUpHandler(e) { if (e.key == "Right" || e.key == "ArrowRight") { rightPressed = false; } else if (e.key == "Left" || e.key == "ArrowLeft") { leftPressed = false; } }pero lo que escribiste fue todo lo contrario.
(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; } }Intenta cambiar eso.
y en cuanto al mouse, no estoy seguro de cuál es el problema, pero parece estar confundido entre el evento "mousemove" y los eventos "mouseover"
el código en la parte superior ejecuta la función solo si el mouse se está moviendo, pero si usa el evento mouseover, se activará incluso si el mouse no se está moviendo. y eso puede causar algunos problemas no deseados.
Intenta eliminarlos. ;)