Need help with enemy health bars

Phaser 3
1

Hey everyone, I’m a beginner coder and this is my first attempt at creating a game with Phaser. It’s a scrolling space shooter with asteroids. Demo here.

Here’s my question (and code). As you can see, each asteroid has its own health bar (2HP for each asteroid, requiring two shots). I’ve successfully made it so each asteroid can be destroyed on 2 shots; however, you can see there is a problem with the HP bar display. Basically, hitting an asteroid is reflected on the HP bar of the following asteroid behind it. I’ve been stuck on this for days!!!

Here’s the code for this particular part…

        function minionhealthBar() {
            miniongraphics.fillStyle(0xffffff, 1);
            miniongraphics.fillRect(createAsteroid.x, createAsteroid.y, 40, 5);

            if (m < 21) {
                miniongraphics.fillGradientStyle(0xff0000, 0xffffff, 1);
            } else {
                miniongraphics.fillGradientStyle(0xff0000, 0xffffff, 1);
            }
            miniongraphics.fillRect(createAsteroid.x, createAsteroid.y, m, 5);
        }


        if (enableAsteroids) {
            var asteroidTimer = this.time.addEvent({
                delay: 1250,
                callback: createAsteroid,
                callbackScope: this,
                loop: true
            });
        }

        function createAsteroid() {

            container = this.add.container(850, Math.random() * 600);

            m = 40;
            miniongraphics = this.add.graphics();
            minionhealthBar();

            createAsteroid = this.physics.add.sprite(0, 0, Phaser.Math.RND.pick(['asteroid', 'asteroid2'])).setScale(Math.random(2, 4));
            asteroidHealth = 2;
            asteroidcontainer = container.add([createAsteroid, miniongraphics]);

            var tween = this.tweens.add({
                targets: [asteroidcontainer],
                x: Phaser.Math.Between(-400, -100),
                duration: 5000,
                yoyo: false,
                delay: function(i, total, target) {
                    return i * 600;
                }

            });

            this.physics.add.overlap(player, createAsteroid, hitAsteroid, null, this);
            this.physics.add.overlap(bullets, createAsteroid, laserasteroid, null, this);
        }

        function laserasteroid(asteroidcontainer, bullet) {
            asteroidHealth--;
            console.log(asteroidHealth);
            bullet.destroy();
            m = m - 20;
            minionhealthBar();
            console.log("Laser hit asteroid");

            if (asteroidHealth == 0) {
                console.log(asteroidHealth);
                asteroidcontainer.destroy();
                miniongraphics.destroy();
            }
        }
2

I’m a bit confused by the code. You have a function named createAsteroid, but it seems you also have a variable(global?) named createAsteroid. Is there a reason for this?

Also if that createAsteroid variable is global the reference will be overwritten every time the function is called.

1 Like