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

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

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