Javascript 循环无法正常工作(FRAME UPDATE LOOP)

Question

当我尝试运行以下代码时，在我的控制台日志上，我得到“完成!!”，而不是得到

currentFrame=0

sourceX=0

它应该有一个计数器，并且每 300 毫秒间隔一次，它是假设更新“currentFrame”和“sourceX”变量。尽管如此，条件为真，除了“完成!!”之外，它不输出任何内容。

• 注意:是的，页面上的所有元素都已正确加载

以下是我的代码:.

            var canvas = document.querySelector("canvas");
            var drawingSurface = canvas.getContext("2d");
            var tileSheet = new Image();
            tileSheet.src="frames.png";

            var msperFrame = 300;

            var interval;
            SIZE=128;

            tileSheet.addEventListener("load",loadHandler,false);

            var monster={
                frames:6,
                SIZE:128,
                currentFrame:0,
                sourceX:0,
                sourceY:0,
                updateAnimation: function(){
                    var self=this;
                    if(self.currentFrame <= self.frames){
                        self.sourceX = self.currentFrame*this.SIZE;
                        console.log("Current Frame: "+self.currentFrame+"\nSourceX: "+self.sourceX);
                        self.currentFrame++;
                        render();
                    }else{
                        console.log("Done!!");
                        window.clearInterval(interval);
                    }
                }
            };

            function loadHandler(){
                interval = window.setInterval(monster.updateAnimation,msperFrame);
            }

            function render(){
                drawingSurface.drawImage(tileSheet,
                monster.sourceX,monster.sourceY,monster.SIZE,monster.SIZE,
                0,0,monster.SIZE,monster.SIZE);
            }

Answer 1

这是一个有趣的错误:-)

您的问题是this :当由 setTimeout 运行时或setInterval ，默认为window ，不是monster 。试试这个:

interval = window.setInterval(function(){monster.updateAnimation();},msperFrame);

通过将其包装在匿名函数中，应该没问题。你已经“完成了!”因为 if (window.currentFrame <= window.frames) 中的两个属性未定义。

旁注:

您正在使用this.SIZE而不是self.SIZE .

每个渲染循环 300 毫秒可能会产生厚实的动画。