Este es un juego de serpientes, pero estoy tratando de permitir que los usuarios controlen la serpiente con teclas de flecha y botones en los que se puede hacer clic. Las teclas de flecha funcionan bien, pero no puedo hacer que funcionen todos los botones, un botón funcionará y luego nada más 😢
Traté de ponerlos todos en su propia declaración de cambio y luego probé un if-else pero todavía Nada.
Cualquier ayuda o incluso algo de información sobre qué camino debo seguir sería muy apreciada.
let inputDirection = { x: 0, y: 0 } let lastInputDirection = { x: 0, y: 0 } let btnUp = document.querySelector(".btn-up") let btnLeft = document.querySelector(".btn-left") let btnRight = document.querySelector(".btn-right") let btnDown = document.querySelector(".btn-down") window.addEventListener('keydown', e => { switch (e.key) { case 'ArrowUp': // case btnUp: console.log('hi'); if (lastInputDirection.y !== 0) break inputDirection = { x: 0, y: -1 } break case 'ArrowDown': if (lastInputDirection.y !== 0) break inputDirection = { x: 0, y: 1 } break case 'ArrowLeft': if (lastInputDirection.x !== 0) break inputDirection = { x: -1, y: 0 } break case 'ArrowRight': if (lastInputDirection.x !== 0) break inputDirection = { x: 1, y: 0 } break } }) function getInputDirection() { lastInputDirection = inputDirection return inputDirection } <button type="button" class="btn-up">Up</button><br> <button type="button" class="btn-left">left</button><button type="button" class="btn-right">Right</button><br> <button type="button" class="btn-down">Down</button><br>Puede reutilizar las declaraciones en su interruptor como detectores de eventos para los botones
let inputDirection = { x: 0, y: 0 } let lastInputDirection = { x: 0, y: 0 } const ArrowUp = () => { console.log('hi'); if (lastInputDirection.y !== 0) return inputDirection = { x: 0, y: -1 } }; const ArrowDown = () => { if (lastInputDirection.y !== 0) return inputDirection = { x: 0, y: 1 } }; const ArrowLeft = () => { if (lastInputDirection.x !== 0) return inputDirection = { x: -1, y: 0 } }; const ArrowRight = () => { if (lastInputDirection.x !== 0) return inputDirection = { x: 1, y: 0 } }; let btnUp = document.querySelector(".btn-up") let btnLeft = document.querySelector(".btn-left") let btnRight = document.querySelector(".btn-right") let btnDown = document.querySelector(".btn-down") btnUp.addEventListener("click",ArrowUp) btnLeft.addEventListener("click",ArrowLeft) btnRight.addEventListener("click",ArrowRight) btnDown.addEventListener("click",ArrowDown) window.addEventListener('keydown', e => { console.log(e.key) switch (e.key) { case 'ArrowUp': ArrowUp(); break case 'ArrowDown': ArrowDown(); break case 'ArrowLeft': ArrowLeft(); break case 'ArrowRight': ArrowRight(); break } }) function getInputDirection() { lastInputDirection = inputDirection return inputDirection } <button type="button" class="btn-up">Up</button><br> <button type="button" class="btn-left">left</button><button type="button" class="btn-right">Right</button><br> <button type="button" class="btn-down">Down</button><br>Establezca detectores de eventos en sus botones.
function Up() { console.log('hi'); // Do something } <button onclick="Up(event)">Up</button>Todo está funcionando ahora.
Gracias por la ayuda.
const btnUpOne = document.getElementById('btn-up-one') const btnLeftOne = document.getElementById('btn-left-one') const btnRightOne = document.getElementById('btn-right-one') const btnDownOne = document.getElementById('btn-down-one') btnUpOne.addEventListener('click', goingUp) btnRightOne.addEventListener('click', goingRight) btnLeftOne.addEventListener('click', goingLeft) btnDownOne.addEventListener('click', goingDown) //BUTTON MOVEMENTS //UP function goingUp(e){ if(lastInputDirection.y !== 0) return; inputDirection = { x: 0, y: -1 } console.log('up'); } //DOWN function goingDown(e){ if(lastInputDirection.y !== 0) return; inputDirection = { x: 0, y: 1 } console.log('down'); } //RIGHT function goingRight(e){ if(lastInputDirection.x !== 0) return; inputDirection = { x: 1, y: 0 } console.log('right'); } //left function goingLeft(e){ if(lastInputDirection.x !== 0) return; inputDirection = { x: -1, y: 0 } console.log('left'); }