HTML5游戏功能

HTML5 game function

本文关键字：功能 游戏 HTML5      更新时间：2023-09-26

我正在浏览HTML5游戏教程，并遇到了下面的功能。谁能解释一下这个函数是如何工作的？

 var super_update = self.update;
    self.update = function(){
            super_update();
            self.attackCounter += self.atkSpd;
    }

我不确定为什么你需要这种类型的函数，逻辑似乎令人困惑。

为什么我们需要一个名为 super_update 的变量？

//------------------------- Full code -------------------//

Player = function(){
        var self = Actor('player','myId',50,40,30,5,20,20,'green',10,1);
        self.updatePosition = function(){
                if(self.pressingRight)
                        self.x += 10;
                if(self.pressingLeft)
                        self.x -= 10;  
                if(self.pressingDown)
                        self.y += 10;  
                if(self.pressingUp)
                        self.y -= 10;  

        var super_update = self.update;
        self.update = function(){
                super_update();
                if(self.hp <= 0){
                        var timeSurvived = Date.now() - timeWhenGameStarted;           
                        console.log("You lost! You survived for " + timeSurvived + " ms.");            
                        startNewGame();
                }
        }
        self.pressingDown = false;
        self.pressingUp = false;
        self.pressingLeft = false;
        self.pressingRight = false;
        return self;
}
Entity = function(type,id,x,y,spdX,spdY,width,height,color){
        var self = {
                type:type,
                id:id,
                x:x,
                y:y,
                spdX:spdX,
                spdY:spdY,
                width:width,
                height:height,
                color:color,
        };
        self.update = function(){
                self.updatePosition();
                self.draw();
        }
        self.draw = function(){
                ctx.save();
                ctx.fillStyle = self.color;
                ctx.fillRect(self.x-self.width/2,self.y-self.height/2,self.width,self.height);
                ctx.restore();
        }
        self.getDistance = function(entity2){   //return distance (number)
                var vx = self.x - entity2.x;
                var vy = self.y - entity2.y;
                return Math.sqrt(vx*vx+vy*vy);
        }
        self.updatePosition = function(){
                self.x += self.spdX;
                self.y += self.spdY;
                if(self.x < 0 || self.x > WIDTH){
                        self.spdX = -self.spdX;
                }
                if(self.y < 0 || self.y > HEIGHT){
                        self.spdY = -self.spdY;
                }
        }
        return self;
}

Actor = function(type,id,x,y,spdX,spdY,width,height,color,hp,atkSpd){
        var self = Entity(type,id,x,y,spdX,spdY,width,height,color);
        self.hp = hp;
        self.atkSpd = atkSpd;
        self.attackCounter = 0;
        self.aimAngle = 0;

        var super_update = self.update; // WHAT IS THIS FOR?
        self.update = function(){
                super_update();
                self.attackCounter += self.atkSpd;
        }

        self.performAttack = function(){
                if(self.attackCounter > 25){    //every 1 sec
                        self.attackCounter = 0;
                        generateBullet(self);
                }
        }

        return self;
}

首先，您没有链接所有代码。 很可能在某处还有另一行这样的行：

var self = this;
// Stuff...
// Code you posted.

至于它是如何工作的...

链接的代码段以 var super_update = self.update; 开头 在 JavaScript 中，这可以理解为"将对象self的属性update的内容分配给变量super_update。

这样做的原因是因为JavaScript是一种面向对象的语言！ 下一行，self.update = function () { functionbody };是创建一个具有给定函数体的函数对象，并将其分配给对象self的属性update。

现在，我相信你会问自己，"指令的顺序不重要吗？ 在这种情况下...答案是"是的，但需要注意"。 像 undefined/null、number s 和 boolean s 这样的基元都是按值传递的;对象和数组由非常类似于 reference* 的东西传递。 由于function对象仍然是对象，因此它们不会按值传递，因此每次调用super_update时，将执行分配时self.update存在的self.update内容。

现在，由于原始问题的评论中指出的原因@JaredSmith，这将不起作用：存在无限递归的情况，或者一个调用自己的方法没有办法不这样做。 您正在将self.update分配给super_update，但在super_update 中调用self.update。 因此，此代码将锁定它正在执行的页面。 这不是一件好事。 我建议删除self.update函数内部对super_update的调用。

我确定您没有发布所有代码的另一个原因是，通常这种"分配行为"设置发生在 JavaScript 框架中，例如三个.js或角度......大概，无论你在做什么教程。 而且，这就是此代码的重点 - 将可配置的行为传递给一些预定义的代码位，以使其以自定义方式运行。

TL;DR：在JavaScript中，函数可以分配给变量/属性并作为参数传递。 您可以使用它使现有代码表现出多态行为。

Super TL;DR：在JavaScript中，函数是语言的一等公民。

超级骗子 TL;DR：此片段：

var super_update = self.update;
self.update = function () {};

。就是所谓的闭包;这意味着super_update被分配self.update分配时存在。 闭包是一个有用的主题，您可能想阅读更多内容。（感谢@ankhzet在此回答的评论中。

*：我之所以说"非常类似于引用的东西"，是因为 JavaScript 实际上没有通过引用/指针传递某些东西的概念 - JavaScript 是一种高级语言，因此不完全处理传递内存地址。 这发生在 JavaScript 引擎内部的引擎盖下。

相关文章：