cancelAnimationFrame () не работает, когда условие истинно - JS Canvas - PullRequest
Новая
       88

cancelAnimationFrame () не работает, когда условие истинно - JS Canvas

0 голосов
/ 18 сентября 2018

Я создаю небольшую игру, похожую на Chicken Invaders , используя JS Canvas.В настоящее время я застрял с эффектом взрыва вашего корабля, когда враг поражает ваш корабль.Я пытаюсь создать эффект самостоятельно в отдельном файле.

Моя идея состоит в том, что когда враг поражает вас, серия изображений (14 изображений) будет воспроизводиться в быстрой последовательности, так что это даетиллюзия взрыва.Поэтому я включил теги <img>, я поместил их все в массив (используя querySelectorAll), а затем создал эффект взрыва.Я использовал счетчик для итерации по массиву и отображения каждого изображения соответственно.

Но затем счетчик просто продолжает увеличиваться, так что в конечном итоге это приведет к indexError, поскольку он выходит за пределы диапазона массива.Я пытался использовать return для завершения функции и cancelAnimationFrame(), но оба они не работали.

В результате в консоли постоянно появляются 60 ошибок в секунду (что, конечно,все испортит) Достаточно jebba-jabba, вот ссылка на JS-Fiddle:

https://jsfiddle.net/h7Lvpytm/8/

Вот моя попытка решить эту проблему: 

        const canvas = document.querySelector("canvas");
        const ctx = canvas.getContext("2d");
        const video = document.querySelector("video");
        const boomFrames = document.body.querySelectorAll("img");
        let counter = 0;

        function drawBoom() {
            requestAnimationFrame(drawBoom)
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.drawImage(boomFrames[counter], 0, 0, 200, 96);
            counter++;
            if (counter > 13) {
                cancelAnimationFrame(drawBoom)
            }
        }
        drawBoom()

РЕДАКТИРОВАТЬ: Я также пробовал цикл while, но он даже не отображал взрыв.Это сводит меня с ума.

1 Ответ

0 голосов
/ 18 сентября 2018

cancelAnimationFrame принимает идентификатор, полученный из requestAnimationFrame

    let counter = 0;

    function drawBoom() {
        const requestId = requestAnimationFrame(drawBoom)
        counter++;
        if (counter > 13) {
            cancelAnimationFrame(requestId);
        }
    }
    drawBoom()

Или, как указывает Кайидо, вы можете просто не запрашивать остановку кадра 

    let counter = 0;

    function drawBoom() {
        counter++;
        if (counter <= 13) {
            requestAnimationFrame(drawBoom);
        }
    }
    drawBoom()
...