單擊按鈕開始/暫停畫布動畫

Question

我正在嘗試運行一個簡單的蛇游戲，其中游戲默認關閉，然后單擊“開始”開始。

StartStop 按鈕的代碼：

StartStop.onclick = function()
{
    //flip the name on the button
    if (StartStop.value = "Start")
    {
        StartStop.value = "Stop";
        update();
    }
    else
    {
        StartStop.value = "Start";
        clearInterval(update);
    }
}

update() 中的代碼啟動動畫：

function update()
{
    setInterval(function()
    {
        console.log(snake.x + ", " + snake.y);
        //check for collisions
        //if no collisions move and draw snake
        snake.x += velocity[vi][0];
        snake.y += velocity[vi][1];
        snake.draw();
    },30);
}

我的思考過程是，當按鈕的文本值為 Start 時，它將文本更改為 Stop 並調用 update()，后者調用 setInterval()。 然后當你點擊按鈕並且文本值為Stop時，它會調用clearInterval(timer)來停止動畫

我想我沒有正確使用 setInterval，關於如何讓它在單擊按鈕時啟動和停止的任何想法？

Answer 1

我通過將代碼更改為以下內容來修復它：

StartStop.onclick = function()
{
    if (StartStop.value == "Start")
    {
        StartStop.value = "Stop";
        var timer = setInterval(
        function()
        {
        if (StartStop.value == "Stop")
        {
            console.log(snake.x + ", " + snake.y);
            //check for collisions
            //if no collisions move and draw snake
            snake.x += velocity[vi][0];
            snake.y += velocity[vi][1];
            snake.draw();
        }
        else
        {
            clearInterval(timer);
        }
        },30);
    }
    else
        StartStop.value = "Start";
}