代码之家 › 专栏 › 技术社区 › Saif Taher

条件为true时cancelAnimationFrame()不起作用-JS Canvas

cancelanimationframe requestanimationframe 2d-games html5-canvas javascript

0

Saif Taher · 技术社区 · 7 年前

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

我的想法是,当敌人击中你时,一系列图像(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 回复 | 直到 7 年前

1

2

gman 7 年前

cancelAnimationFrame 获取从返回的id requestAnimationFrame

    let counter = 0;

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

或者正如kaido指出的,你不能要求frame停止

    let counter = 0;

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