Removing elements from an array and avoiding crashes in javascript

Question

So i have been working hard at a game using HTML5 and JavaScript. I am trying to make a space invaders styled game and as a result i have an array of enemies. I have separate functions dedicated to creating the array of enemies, drawing them to screen, moving the enemies and finally removing them. the removal of enemies however is causing an issue. This is my logic if an enemies health is less than or equal to 0, delete the enemy from the array and shrink the arrays length by 1. Now logic would dictate that this can be a calamity, if you start shooting and killing enemies from the start of the array, as the arrays length will be reduced and this is exactly my problem, so low and behold my code.

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;
            }
        }
    }
};

So to explain my problem, i can shoot and kill enemies from the array, this will also remove them from the screen. However if i shoot an enemy from the start of the array i cause all the enemies to cleared off the screen and the game to crash. If you need more information, feel free to ask.

By request, i have submitted more code relating to my question. The code above includes the hostile function and other functions associated directly with it.

EDIT: Vitim.us had offered a very useful tip regarding my question, he suggested to create a flag of some sort (var dead = false/true etc.) and once the value is changed the specific instance can simply be removed from the screen away from the player.

Answer 1

You can implement this in various ways

You can implement a method to hostile to remove itself from screen,

To this each instance should keep a reference to itself on screen, it can be a direct reference to DOM or it can be a property like hostile.entitieId that correlate to the onscreen object.

When hostile.health<=0 you flag hostile.isDead = true; and automatically call a method to remove it from screen, than notify other method to finally delete the instance from your enemyList[]

You can either check this on the game tick or you can build it in a event dispatch fashion, using getter and setter for the health property.

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

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

Answer 2

Don't manually update the array like that. delete is for removing named properties. If you want to remove elements from an Array, use splice:

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

Also, var enemylist = [6] doesn't do what you think it does. It creates an array with a single element, [6]. You should create an empty array and then enemylist.push(new hostile(...)) to add them to the array.

This will avoid you having to manually set the length (which you should not ever have to do.)