当条件为真时，cancelAnimationFrame（）无效 - JS Canvas

Question

我正在使用JS Canvas构建一个类似于Chicken Invaders的小游戏。目前，当敌人撞到你的船时，我被你的船爆炸的影响所困扰。我试图在一个单独的文件中创建自己的效果。

我的想法是，当一个敌人击中你时，一系列图像（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循环，但它甚至没有显示爆炸。这让我很生气。

Answer 1

cancelAnimationFrame从requestAnimationFrame返回一个id

    let counter = 0;

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

或者正如Kaiido指出的那样你可以不要求停止帧

    let counter = 0;

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