Запуск / приостановка анимации холста нажатием кнопки - PullRequest
Новая
       12

Запуск / приостановка анимации холста нажатием кнопки

0 голосов
/ 21 февраля 2020

Я пытаюсь запустить простую игру-змейку, в которой игра выключена по умолчанию, и вы нажимаете Пуск, чтобы начать.

код кнопки StartStop: 

StartStop.onclick = function()
{
    //flip the name on the button
    if (StartStop.value = "Start")
    {
        StartStop.value = "Stop";
        update();
    }
    else
    {
        StartStop.value = "Start";
        clearInterval(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);
}

Мой мыслительный процесс состоял в том, что когда текстовое значение кнопки имеет значение «Пуск», оно меняет текст на «Стоп» и вызывает update (), которое вызывает setInterval (). Затем, когда вы нажимаете кнопку, и текстовое значение Стоп, он вызывает clearInterval (таймер), чтобы остановить анимацию

Я думаю, что я не использую setInterval правильно, какие-либо идеи о том, как заставить его запускаться и останавливаться на нажатие кнопки?

1 Ответ

0 голосов
/ 21 февраля 2020

Я исправил это, изменив свой код на это: 

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";
}
...