Question

所以我一直在努力使用HTML5和JavaScript进行游戏。我试图制作一个太空入侵者风格的游戏，因此我有一系列的敌人。我有各自独立的功能，专门用于创建敌人阵列，将它们绘制到屏幕上，移动敌人并最终移除它们。然而，移除敌人是一个问题。这是我的逻辑如果敌人的生命值小于或等于0，则从阵列中删除敌人并将阵列长度缩小1.现在逻辑将指示这可能是一场灾难，如果你开始射击并从阵列的开始杀死敌人，因为数组长度将减少，这正是我的问题，所以很低，看到我的代码。

function hostile(x, y) {
    this.speed = 1;
    this.health = 100;
    this.x = x;
    this.y = y;
    this.height = 32;
    this.width = 32;
    this.isDead = false;
    this.direction = 0;
    this.deadCount = 0;
    this.firing = false;
    //this.moving = true;
    this.move = function () {

        if (this.isDead === false && gameStart === true) {
            context.clearRect(0, 0, canvas1.width, canvas1.height);
            if (this.x > canvas.width - 64) {

                this.y += 10;
                this.direction = 0;
            }
            if (this.x < 0) {
                this.y += 10;

            }

            if (this.direction === 1) {
                this.x += this.speed;
            } else {
                this.x -= this.speed;

            }

            if (this.x < 0) {
                this.direction = 1;
            }

            if (this.y > 420) {
                this.x = 600;
            }
        }

    };

    this.draw = function () {

        context.drawImage(sprite, 0, 480, 65, 68, this.x, this.y, 65, 65);
    };
    this.reset = function () {
        context.clearRect(this.x, this.y, 65, 65);
        this.x = 20;
        this.y = 20;
        this.health = 100;
    };
};
var enemylist = [];

function createEnemies() {
    for (var i = 0; i < 6; i++) {
        enemylist.push(new hostile(75 * i, 20));

    }
};

function deleteEnemy(a) {
    enemylist.splice(a);
    enemyBulletList.splice(a);

    //enemylist.length  = enemylist.length-1;
    //enemyBulletList.length = enemyBulletList.length - 1;
};

createEnemies();

function moveEnemies() {
    for (var i = 0; i < enemylist.length; i++) {
        if (enemylist[i].isDead === false && gameStart === true) {

            if (enemylist[i].x > canvas.width - 64) {

                enemylist[i].y += 10;
                enemylist[i].direction = 0;
            }
            if (enemylist[i].x < 0) {
                enemylist[i].y += 10;

            }

            if (enemylist[i].direction === 1) {
                enemylist[i].x += enemylist[i].speed;
            } else {
                enemylist[i].x -= enemylist[i].speed;

            }

            if (enemylist[i].x < 0) {
                enemylist[i].direction = 1;
            }

            if (enemylist[i].y > 420) {
                enemylist[i].x = 600;
            }
        }
    }
};

所以为了解释我的问题，我可以射击并杀死阵列中的敌人，这也会将它们从屏幕上删除。但是，如果我从阵列的开始射击敌人，我会让所有的敌人从屏幕上清除并且游戏崩溃。如果您需要更多信息，请随时提出。

根据要求，我提交了更多与我的问题相关的代码。上面的代码包括敌对功能和与之直接相关的其他功能。

编辑：Vitim.us就我的问题提供了一个非常有用的提示，他建议创建某种类型的标志（var dead = false / true等），一旦值改变，就可以简单地删除特定实例从屏幕远离播放器。

Answer 1

不要像这样手动更新数组。 delete用于删除命名属性。如果您要删除Array中的元素，请使用splice：

function deleteEnemy(a) { // capitalized functions are usually reserved for constructors
    enemylist.splice(a);
    enemyBulletList.splice(a);  
}

此外，var enemylist = [6]没有按照您的想法执行。它创建一个包含单个元素[6]的数组。您应该创建一个空数组，然后enemylist.push(new hostile(...))将它们添加到数组中。

这将避免您必须手动设置长度（您不应该这样做。）

Answer 2

您可以通过各种方式实现此目的

你可以实现一种方法来敌对从屏幕上移除自己，

为此，每个实例应在屏幕上保留对自身的引用，它可以是对DOM的直接引用，也可以是与屏幕对象相关的hostile.entitieId之类的属性。

当您hostile.health<=0标记hostile.isDead = true;并自动调用方法将其从屏幕中删除时，请通知其他方法最终从enemyList[]

中删除该实例

您可以在游戏标签上查看此内容，也可以使用事件调度方式构建它，使用getter和setter作为健康属性。

this.setHeath = function(value){
   //set entity heath

   if(health<=0){
       //remove itself from screen
       //notify other method to clear this instance from the enemyArray[]
   } 
}

从数组中删除元素并避免在javascript中崩溃

2 个答案: