javascript setInterval在每次触发时增加速度

9fkzdhlc  于 2023-04-28  发布在  Java
关注(0)|答案(1)|浏览(124)

我正在自学javascript,并有一个div,每次按下空格键时它都会在屏幕上移动。但是每次按下空格键时速度都会增加,我很困惑为什么会这样,我错过了什么来保持速度恒定?

window.addEventListener('keydown', (event) => {
        switch (event.key) {
        case ' ':
        if (posLeft > canvasWidth - 100 || Rocket.style.visibility != 'hidden') {
            Rocket.style.visibility = 'hidden'
        }
        else {
            Rocket.style.visibility = 'visible';
            console.log(posLeft);
            Rocket.style.left = (Player.offsetLeft + Player.offsetWidth) + 'px';
            Rocket.style.top = (Player.offsetTop + Player.offsetHeight / 2.5) + 'px';
            setInterval(function () {
                if (rocketLeft < canvasWidth) {
                    rocketLeft++;
                    console.log(rocketLeft);
                    Rocket.style.left = parseInt(Rocket.style.left, 10) + 1 + 'px';
                }
            });
            rocketLeft = 0;
            break;
        }
        };
        });
brccelvz

brccelvz1#

感谢@Heiko Theißen指出clearInterval丢失了,我已经更新了代码,我相信它可以做得更好,但这是有效的。

let fireRocket = '';
window.addEventListener('keydown', (event) => {
  switch (event.key) {
    case ' ':
    if (posLeft > canvasWidth - 100 || Rocket.style.visibility != 'hidden') {
       Rocket.style.visibility = 'hidden'
    }
    else {
      Rocket.style.visibility = 'visible';
      console.log(posLeft);
      Rocket.style.left = (Player.offsetLeft + Player.offsetWidth) + 'px';
      Rocket.style.top = (Player.offsetTop + Player.offsetHeight / 2.5) + 'px';
      setInterval(function () {
        if (rocketLeft < canvasWidth) {
           rocketLeft++;
           console.log(rocketLeft);
           Rocket.style.left = parseInt(Rocket.style.left, 10) + 1 + 'px';
        }
      });
      if (rocketLeft >= 10) { clearInterval(fireRocket);
      rocketLeft = 0;
      break;
      }
   };
});

相关问题