Creé un juego de autos poco convincente en el que, al hacer clic en un botón, la imagen de un automóvil se mueve un poco hacia la derecha cada vez. Pero ahora quiero activar el botón presionando una tecla. Usé onKeypress y lo coloqué dentro de la etiqueta del botón, pero no funciona. Traté de resolverlo por mi cuenta, pero desafortunadamente no pude encontrar la lógica. ¿Pueden ayudarme con esto, por favor?
<div id="racetrack"><img id="user" src="ferrari.jpg"></div> <button id="pedal" onkeypress="moveCar()">Pedal</button> function moveCar(){ var car = document.getElementById("user"); var marginLeft = car.style.marginLeft == "" ? "0px" : car.style.marginLeft; car.style.marginLeft = parseInt(marginLeft) + 100 + "px";Vea un ejemplo muy simple a continuación. (Intente hacer clic en los botones y presionar las teclas de flecha izquierda/derecha)
Creo que le gustaría adjuntar un evento keydown general a la window (o global ), en lugar de adjuntarlo al button . Si bien puede escuchar eventos de teclado en un botón, primero debe tener el elemento enfocado.
const buttons = document.querySelectorAll('button'); const user = document.querySelector('#user'); let delta = 0; function move() { user.style.transform = `translateX(${delta}px)`; } function handleClick(e) { const direction = e.target.dataset.id; if (direction === 'left') { delta += -10; } else { delta += 10; } move(); } function handleKeydown(e) { const key = e.code; if (key !== 'ArrowLeft' && key !== 'ArrowRight') return; if (key === 'ArrowLeft') { delta += -10 } else { delta += 10; } move(); } buttons.forEach(btn => btn.addEventListener('click', handleClick)); window.addEventListener('keydown', handleKeydown); #racetrack { width: 100%; display: flex; flex-direction: column; align-items: center; } #racetrack img { transition: transform .2s; } .controls { margin-top: 15px; } <div id="racetrack"> <img id="user" src="https://picsum.photos/id/237/200/"> <div class="controls"> <button data-id="left">left</button> <button data-id="right">right</button> </div> </div>