如何让 setInterval 在按下按钮时开始而不破坏 clearInterval 内部功能？

Question

我有一个 setInterval 来绘制我的蛇游戏，每次蛇 "eats" 我有一个 clearInterval，然后是调整速度的 setInterval 变量。原始的 setInterval 在加载时开始。我怎样才能让它一键启动？

我尝试将 setInterval 放置在按钮内并使用函数使按钮启动 setInterval，但它总是会破坏我在 draw 函数内的 clearInterval。

<button onclick="">Start game</button>


if (snakeX == food.x && snakeY == food.y){
            food = {
                x : Math.round(Math.random()*(cvsWidth/snakeWidth-1)),
                y : Math.round(Math.random()*(cvsHeight/snakeHeight-1))
            };
            score++;
            if (speed >= 40) speed = speed-3;
            clearInterval(interval);
            interval = setInterval(draw, speed);
        }else{

            //Remove last
            snake.pop();
        }

var speed = 140;

var interval = setInterval(draw, speed);

Answer 1

通过将按钮的 onclick 属性设置为 start() 可以在单击按钮时调用 start。

我还将 interval 声明为全局变量，因为我认为您需要它是全局的。

然后当 start 被调用时，间隔开始，间隔的 id 被放入 interval

var speed = 500;

function draw() {
  console.log("Running")
}


var interval;
function start() {
  //Prevent start from running twice.
  if(interval != null) return;
  interval = setInterval(draw, speed);

}

<button onclick="start()">Start game</button>

如何让 setInterval 在按下按钮时开始而不破坏 clearInterval 内部功能？

How to have setInterval start at button press without breaking clearInterval inside function?

html

javascript

button

setinterval

clearinterval