Javascript 条件为true时cancelAnimationFrame（）不工作-JS Canvas

我正在构建一个类似于使用JS画布的小游戏。目前，当敌人击中你的飞船时，你的飞船会爆炸，这让我很头疼。我试图在一个单独的文件中创建效果

我的想法是，当敌人击中你时，一系列图像（14个图像）将快速连续播放，从而产生爆炸的错觉。因此，我确实包含了

标记，我将它们全部放在一个数组中（使用

querySelectorAll

），然后我创建了爆炸效果。我使用一个计数器遍历数组，并相应地显示每个图像

但是，计数器只是不断增加，因此它最终将导致

索引器

，因为它超出了数组的范围。我尝试使用

return

终止函数和

cancelAnimationFrame（）

，但两者都不起作用

结果是，控制台中每秒不断出现60个错误（当然，这会把一切搞糟）jebba jabba够了，下面是JS Fiddle的链接：

以下是我试图解决的问题：

        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

循环，但它甚至没有显示爆炸。这简直让我发疯。

接受从中返回的id

或者正如Kaido指出的，你们不能要求帧停止

    let counter = 0;

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

let计数器=0；
函数drawBoom（）{
计数器++；
if（counter接受从

或者正如Kaido指出的，你们不能要求帧停止

    let counter = 0;

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

let计数器=0；
函数drawBoom（）{
计数器++；
如果（计数器如果不满足此条件，您最好调用
requestAnimationFrame
，或者在满足此条件之前立即返回，而不是存储id。如果不满足此条件，您最好调用
requestAnimationFrame
，或者在满足此条件之前立即返回，而不是存储id。非常感谢！谢谢太感谢你了！