使用JS实现贪吃蛇方向键与按钮控制时按钮无法全部生效问题求助

你当前的代码只给键盘keydown事件绑定了方向控制逻辑，四个方向按钮没有绑定任何点击事件处理函数，所以点击后不会触发方向变更。

把方向设置逻辑抽为公共函数，同时给键盘事件、按钮点击事件复用该逻辑，避免重复编码，也方便后续统一调整规则。

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")

// 公共方向设置函数，键盘、按钮共用逻辑
function setDirection(x, y) {
  // 保留原有的禁止180度掉头规则
  if (y !== 0 && lastInputDirection.y !== 0) return
  if (x !== 0 && lastInputDirection.x !== 0) return
  inputDirection = { x, y }
}

// 键盘控制逻辑
window.addEventListener('keydown', e => {
  switch (e.key) {
    case 'ArrowUp':
      setDirection(0, -1)
      break
    case 'ArrowDown':
      setDirection(0, 1)
      break
    case 'ArrowLeft':
      setDirection(-1, 0)
      break
    case 'ArrowRight':
      setDirection(1, 0)
      break
  }
})

// 按钮点击控制逻辑
btnUp.addEventListener('click', () => setDirection(0, -1))
btnDown.addEventListener('click', () => setDirection(0, 1))
btnLeft.addEventListener('click', () => setDirection(-1, 0))
btnRight.addEventListener('click', () => setDirection(1, 0))

function getInputDirection() {
  lastInputDirection = inputDirection
  return inputDirection
}

HTML代码不需要做任何修改，调整JS后即可同时支持键盘和按钮两种控制方式，原有的禁止掉头规则也会同时生效。

内容的提问来源于stack exchange，提问作者Joey