HTML5 游戏对象和共享方法

HTML5 game objects and sharing methods

本文关键字：共享 方法 对象 游戏 HTML5      更新时间：2023-09-26

我在理解HTML5游戏的以下代码时遇到了一些问题。我认为正在发生的事情，想知道我的理解是否正确？

1） 调用实体函数时，将创建对象 SELF 及其方法（测试碰撞）

2）当创建Enemy对象时，它调用函数"actor"并从SELF对象继承函数（因为self引用自身），但它也继承了perform.attack方法

我不确定为什么我们返回对象，但简而言之，通过创建 SELF 对象，我们可以共享方法、行为和属性，从而允许我们创建 DRY 代码？

我希望我的理解是正确的？

Entity = function(type,id,x,y,spdX,spdY,width,height,color){
    // a function to call 
    var self = {
            type:type,
            x:x,
            spdX:spdX,
            y:y,
            spdY:spdY,
            width:width,
            height:height,
            color:color,
    };
    self.testCollision = function(entity2){
            var rect1 = {
                    x:self.x-self.width/2,
                    y:self.y-self.height/2,
                    width:self.width,
                    height:self.height,
            }
            var rect2 = {
                    x:entity2.x-entity2.width/2,
                    y:entity2.y-entity2.height/2,
                    width:entity2.width,
                    height:entity2.height,
            }
            return testCollisionRectRect(rect1,rect2);
    }
    return self;
}
//---------actor can be an enemy or player in the game-----//  

Actor = function(type,id,x,y,spdX,spdY,width,height,color){
    var self = Entity(type,id,x,y,spdX,spdY,width,height,color);
    self.attackCounter = 0;
    self.aimAngle = 0;
    self.atkSpd = 1;
    self.performAttack = function(){
            if(self.attackCounter > 25){    //every 1 sec
                    self.attackCounter = 0;
                    generateBullet(self);
            }
    }
    return self;
}

// ------------------Create the enemy function----------- //
Enemy = function(id,x,y,spdX,spdY,width,height){
    var self = Actor('enemy',id,x,y,spdX,spdY,width,height,'red');
    enemyList[id] = self;
}
randomlyGenerateEnemy = function(){
    //Math.random() returns a number between 0 and 1
    var x = Math.random()*WIDTH;
    var y = Math.random()*HEIGHT;
    var height = 10 + Math.random()*30;     //between 10 and 40
    var width = 10 + Math.random()*30;
    var id = Math.random();
    var spdX = 5 + Math.random() * 5;
    var spdY = 5 + Math.random() * 5;
    Enemy(id,x,y,spdX,spdY,width,height);
}

感谢您的帮助。P

JavaScript 没有原生继承。JavaScript甚至还没有可以继承的类 - 但JS6有类。

Entity是一个工厂，它创建和返回具有属性和testCollision方法的匿名self对象。

Actor 从实体请求新对象。Actor 将属性和 performAttack 方法添加到请求的对象，并返回该扩展对象。

Enemy 从 Actor 请求一个新对象。敌人将该对象添加到数组中。

如果我们只检查这段代码

如果这是唯一一次使用实体和Actor，那么代码就会不必要地分解成几个部分。整个最终对象（包括所有属性和所有方法）可以在randomlyGenerateEnemy中最有效地构建。

如果有更多使用实体和演员的代码

大概（！

实体创建所有游戏棋子（棋子 == 角色、结构等）通用的属性和方法。借用数学短语，Entity 创建一个具有"最常见分母"的对象。

Actor使用

Actor游戏角色固有的属性和方法增强基本实体对象。

敌人只需在enemyList中添加一个新的Actor对象即可。

据推测，可能还有一个Structure函数（如Actor）使用结构游戏块固有的属性和方法来增强基本实体对象。

大概可能还有一个Buildings函数（如 Enemy）只是将一个新的结构对象添加到buildingsList。

由于实体代码被Actor和Structure在假定的代码中重用，因此假定的代码将使用DRY（Don't Repeat Yourself）编码模式。

相关文章：