Javascript 在关键事件后启动秒表

Question

我正在开发一款带有 Canvas 元素的游戏。目标是当您第一次按下某个键时，它会启动秒表。一旦出现gameoverscreen/winscreen，它就会结束。

在游戏结束/胜利屏幕之后，它应该像之前一样工作(如果按下按键而不是启动秒表)

问题是该函数只能调用一次。

代码(最重要的部分):

function startTime(){
    startTime = function(){};
    var count = 0;
    function stopwatch(){
        if(winScreen || gameOver){ 
            count = 0;
        } else{
            console.log(count++);
        }
    }
    setInterval(stopwatch, 1000);
}
document.addEventListener('keydown', function(event){
    startTime();
});

有办法解决这个问题吗？

Answer 1

问题的原因是您在第二行用空函数覆盖了 startTime 。第二次调用 startTime() 时，它会运行空函数。

为了保持代码干净，你的秒表不应该真正检查获胜或游戏结束的情况 - 它应该只跟踪计数。当这些情况发生时，游戏代码的其余部分可以启动和重置秒表。你可以有一个像这样的秒表对象:

var stopwatch = {
  count: 0,
  
  intervalId: null,
  
  start: function() {
    stopwatch.intervalId = setInterval(function() {
      stopwatch.count++;
    }, 1000)
  },
  
  reset: function() {
    if (stopwatch.intervalId) {
      clearInterval(stopwatch.intervalId);
      stopwatch.intervalId = null;
    }
    stopwatch.count = 0;
  }
}

然后你的游戏可以在开始时调用 stopwatch.start() 并在结束时调用 stopwatch.reset() 。

请注意，重置时它也会清除间隔。如果没有这个，setInterval 中的函数每次都会重复，从而导致潜在的错误和内存泄漏。