javascript - 如何阻止按钮被按下两次

Question

所以我正在制作一个神，如果你点击进入，它会发射一个炮弹，而进入按钮会增加球的速度。问题是当我多次点击进入时，我不知道如何制作它，这样人们就不能多次点击它来使大炮超快。我也不知道如何点击按钮进入，所以我只是使用向上箭头。

document.onkeydown = (e) => {
  e.preventDefault();

  if (e.repeat) return; // Do nothing

  const { key } = e;

  switch(key) {
    case 'ArrowUp':
      cannonball.dx++,
      cannonball.dy++
      break;
  }
};

这是我正在使用它的东西

const c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//variables
const cannon = {
w: 150,
h: 75,
x:0,
y:0
}

const cannonball = {
x: 77,
y: 565,
r:25,
dx:0,
dy:0
}

const cannonRotate = {
degree: -43.5
}



//running the whole function
function animate(){
c.clearRect(0,0,innerWidth,innerHeight);
//cannon
c.save();
c.translate(-25,600);
c.rotate(cannonRotate.degree * Math.PI / 180);
c.fillStyle = '#000';
c.fillRect(cannon.x,cannon.y,cannon.w,cannon.h);
c.restore();

//cannonball
c.beginPath();
c.arc(cannonball.x,cannonball.y, cannonball.r, 0, Math.PI * 2, false);
c.fillStyle = '#000';
c.fill();

cannonball.x += cannonball.dx;
cannonball.y -= cannonball.dy;



document.onkeydown = (e) => {
  e.preventDefault();

  if (e.repeat) return; // Do nothing

  const { key } = e;

  switch(key) {
    case 'ArrowUp':
      cannonball.dx += 5,
      cannonball.dy += 5
      break;
  }
};

requestAnimationFrame(animate)
}

Answer 1

如果我正确理解您的问题，您想限制按键之间的间隔，对吗？因此，您可以通过实现一个计时器来实现，该计时器在完成之前忽略下一次按键操作:

let ignoreKeyPress = false;

document.onkeydown = (e) => {
  e.preventDefault();

  if (e.repeat || ignoreKeyPress) return; // Do nothing

  ignoreKeyPress = true;
  setTimeout(() => ignoreKeyPress = false, 1000); // change the 1000 to the interval between keypresses that you want in miliseconds.

  const { key } = e;

  switch(key) {
    case 'ArrowUp':
      cannonball.dx++,
      cannonball.dy++
      break;
  }
};