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()

当条件为true时cancelAnimationFrame（）不起作用-JS Canvas

1 个答案: