Question

我正在用javaScript构建一个俄罗斯方块游戏。我试图让它在Android手机上播放，所以我添加了四个箭头按钮：

<button onclick="rightArrow()">→</button>

我有四个功能（由键盘触发），如下所示：

function right () {
 // Move brick to the right 
}

有没有办法在用户按住按钮时反复调用right（）函数，直到他放弃它为止？我在这里和其他地方发现了几个类似的问题，但答案高于我的javaScript知识水平。我没有使用jQuery。我的游戏是here。

Answer 1

我汇总了一个使用touchstart和touchend事件如何实现这一目标的小例子。

＆＃13;

let counter = 0
let held = false
let button = document.getElementById('button')

// touch events
button.addEventListener('touchstart', (event) => { held = true })
button.addEventListener('touchend', (event) => { held = false })

// mouse events
button.addEventListener('mousedown', (event) => { held = true })
button.addEventListener('mouseup', (event) => { held = false })

// loop
function animate() {
  document.getElementById('counter').innerHTML = counter
  
  if (held) { counter++ }
  else if (counter > 0) { counter-- }

  window.requestAnimationFrame(animate)
}

animate()

＆＃13;

<button id="button">
  Press and hold!
</button>

<div id="counter">
  0
</div>

＆＃13;

关键是在touchstart发生时设置一些变量，这样我们就知道用户正在按住，直到我们检测到touchend事件，这表示用户放手了。在单独的循环中，我们基于此变量执行代码。在您的情况下，您可以检查主游戏循环，然后运行移动代码（小心它可能会非常频繁地执行;但这可以通过计时器轻松解决）。

我还添加了mousedown和mouseup个事件，以便此代码也适用于桌面，但您也可以通过在{{3}中打开设备预览模式来确认此功能在移动设备上有效（单击时使用触摸事件）。

Answer 2

这是一个简单的例子：

HTML:
<div id="a"></div>

CSS:
#a {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

Javascript

const myDiv = document.getElementById('a');
let currentMargin = 0;

function shiftDivRight() {
  currentMargin += 10;
  myDiv.style.marginLeft = currentMargin + 'px';
}
document.addEventListener('keydown', () => {
  shiftDivRight();
});

只要按下任何键，这就会将div移到右侧。

要触发特定键，例如输入键：

document.addEventListener('keydown', (event) => {
   if(event.which === 13) {
      shiftDivRight();
   }
});

如何在用户按住按钮时重复执行功能？

2 个答案: