0
\$\begingroup\$

I have a boss appearing in my game, but since it's only one character I didn't put it in an array. Now I'm trying to make disappear if its health is less or equal to 0 but I don't know how to do that. Is there a way to remove the object? I only know how to remove a property of an object.

Here's the boss object:

function Boss1(x, y) {
    this.sprite = boss1Sprite;
    this.x = x;
    this.y = y;
    this.imgWidth = 160;
    this.imgHeight = 224;
    this.frameWidth = this.imgWidth / 4;
    this.frameHeight = this.imgHeight / 4;
    this.health = 1500;
    this.directionMode = 1;
    this.currentFrame = 0;
    this.SPEED = 1;
    this.delta = 1;
    this.updateFrame = function () {
        this.currentFrame += 0.2;
    }
    this.showHealth = function () {
        ctx.fillStyle="red";
        ctx.fillRect(this.x,this.y - 10,(this.health/100)*3.3,5);
        ctx.strokeRect(this.x, this.y-10, (100/100) * 50, 5);
    }
    this.show = function () {
        this.updateFrame();
        this.walkingMode = Math.floor(this.currentFrame) % 4;
        ctx.drawImage(this.sprite, this.walkingMode * this.frameWidth, this.directionMode * this.frameHeight, this.frameWidth, this.frameHeight, this.x, this.y, this.frameWidth, this.frameHeight);
    }
    //target == hero
    //position == this
    this.move = function () {
        this.dx = hero.x - this.x;
        this.dy = hero.y - this.y;
        this.length = Math.sqrt(this.dx * this.dx + this.dy * this.dy);
        if (this.length) {
            this.dx = this.dx / this.length;
            this.dy = this.dy / this.length;
        }
        this.x += this.dx * this.delta * this.SPEED;
        this.y += this.dy * this.delta * this.SPEED;
    }
}

//enemy wave object
function random(min, max) {
    return Math.random() * (max - min) + min;
}
function Enemy(x, y){
    this.sprite = enemySprite;
    this.x = x;
    this.y = y;
    this.imgWidth = 128;
    this.imgHeight = 192;
    this.frameWidth = this.imgWidth / 4 ;
    this.frameHeight = this.imgHeight / 4;
    this.toDelete = false;
    this.dx = random(1, 3);
    this.enemiesHealth = 100;
    this.directionMode = 1;
    this.currentFrame = 0;
    this.updateFrame = function(){
        this.currentFrame += 0.2;
    }
    this.showHealth = function (){
        ctx.fillStyle="red";
        ctx.fillRect(this.x,this.y - 10,(this.enemiesHealth/100)*50,5);
        ctx.strokeRect(this.x, this.y-10, (100/100) * 50, 5);
    }
    this.show = function(){
        this.updateFrame();
        this.walkingMode = Math.floor(this.currentFrame) % 4;
        ctx.drawImage(this.sprite,this.walkingMode * this.frameWidth, 
        this.directionMode * this.frameHeight, this.frameWidth, this.frameHeight, 
        this.x, this.y, this.frameWidth, this.frameHeight );
    }
    this.move = function(){
        this.x = this.x - this.dx;
    }
    this.deletion = function(){
        this.toDelete = true;
    }
}

//this is when the boss is spawning
//the game loop
function draw() {
    bullets = bullets.filter((bullet) => bullet.x <= viewLimit);
    enemies = enemies.filter((enemy) => enemy.x >= viewLimit1);
    while (enemies.length <= enemiesPerTick && kills <= 5) {
        var enemy = new Enemy(canvas.width, random(0, canvas.height - 60));
        enemies.push(enemy);
    }
    for (var v = 0; v < enemies.length; v++) {
        enemies[v].showHealth();
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    hero.show();
    hero.update();
    hero.showHealth();
    for (var i = 0; i < bullets.length; i++) {
        bullets[i].show();
        bullets[i].move();
    }
    for (var j = 0; j < enemies.length; j++) {
        enemies[j].show();
        enemies[j].move();
    }
    for (var t = 0; t < enemies.length; t++) {
        enemies[t].showHealth();
    }
    collision();
    drawScore();
    if (enemies.length == 0) {
        boss1.show();
        boss1.move();
        boss1.showHealth();
    }

    requestAnimationFrame(draw);
}

console.log(enemies, bullets);
draw();
\$\endgroup\$
  • \$\begingroup\$ When do you call show()? \$\endgroup\$ – DMGregory Jul 10 '19 at 10:25
  • 1
    \$\begingroup\$ Sounds like you should show us that code in your question. \$\endgroup\$ – DMGregory Jul 10 '19 at 10:49
  • 1
    \$\begingroup\$ i updated the code, if you need more information , let me know \$\endgroup\$ – Chrissisbeast Jul 10 '19 at 10:53
  • 1
    \$\begingroup\$ Okay, so that needs to be in your question too. Please don't make us beg for your code piecemeal — a minimal complete verifiable example is standard procedure. \$\endgroup\$ – DMGregory Jul 10 '19 at 11:03
  • 1
    \$\begingroup\$ Right, which is why you take the time to make a Minimal, Complete, Verifiable Example: all the code needed to diagnose your problem, and no more. No one is asking for your whole game — we're asking you to do the work of isolating the relevant parts of your code, so that you can get timely and high-quality answers that don't overlook important details. \$\endgroup\$ – DMGregory Jul 10 '19 at 11:05
2
\$\begingroup\$

Only show and update the boss when its health is larger than 0:

        if (enemies.length == 0 && boss1.health > 0) {
            boss1.show();
            boss1.move();
            boss1.showHealth();
        }

However, for a more extensible architecture you might want to handle the boss just like any other enemy. Push it onto the enemies array when the spawn condition is met and remove it from the enemies array when its defeat condition is met.

In order for your draw-loop to work with the boss just like it works with any other enemy, it needs all the same fields and functions. An elegant way to do that in Javascript is to create the boss as a regular enemy and then overwrite all functions and fields on that enemy object where the boss differs from a regular enemy.

Or even use prototype inheritance. Create an enemy base-class with all the functionality all enemies in your game have in common. Then create classes for every type of enemy you have in your game, including boss enemies, which use that base class as a prototype.

\$\endgroup\$
  • \$\begingroup\$ Now thats a helpful anwer , you made my life so much easier dude , thank you so much . \$\endgroup\$ – Chrissisbeast Jul 10 '19 at 15:15
0
\$\begingroup\$

If simply not drawing it when its health is 0 isn't enough, you can just set the variable to null. This won't affect the memory immediately, but since JavaScript is garbage collected, unless you have multiple global references to it, it will eventually get deleted when space is needed

\$\endgroup\$
  • \$\begingroup\$ On top of that, one can use the delete keyword, to remove the reference to an object. It's the same as setting the variable to null, but I think its cleaner as the variable is now undefined and does not appear when you do console.logs or something similar. As far as I'm aware, this doesn't have any different behaviour on garbage collection. \$\endgroup\$ – TomTsagk Jul 10 '19 at 10:36
  • \$\begingroup\$ It looks like they're still calling boss1.show() in their game loop, so they'll need a branch to skip over those lines and avoid errors, yes? \$\endgroup\$ – DMGregory Jul 10 '19 at 11:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.