class Example extends Phaser.Scene { constructor () { super(); this.graphics = null; this.playerBullets = null; this.players = null; this.enemyBullets = null; this.enemies = null; this.coins = []; this.asteroids = []; this.shields = null; this.powerups = null; this.gameCoinScoreTxt = null; this.gameScale = 0.30; this.gameSpeed = 1; this.playerSelected = 7; this.playerHitpoints = 3; this.gameCoinScore = 0; this.gameStage = 0; this.gameStarted = false; this.gameOver = false; this.spawnCoinTimerEvent = null; this.playerSelectBtns = []; } preload () { // Asset credits: https://gvituri.itch.io/space-shooter this.load.image('spr_red_particle', `https://play.rosebud.ai/assets/red.png?ORpm`); this.load.image('spr_player_ship', `https://play.rosebud.ai/assets/ship_sidesC.png.png?oriZ`); this.load.spritesheet('playerShips120x120', `https://play.rosebud.ai/assets/playerShips120x120.png.png?0dca`, { frameWidth: 120, frameHeight: 120 }); this.load.image('shield', `https://play.rosebud.ai/assets/shield_160x60.png.png?3FZZ`); this.load.spritesheet('gold_coins', `https://play.rosebud.ai/assets/gold_coins_40x40.png.png?xNpo`, { frameWidth: 80, frameHeight: 80 }); this.load.image('blue_shield', `https://play.rosebud.ai/assets/blue_shield_80x78.png.png?aM8a`); this.load.image('pink_heart', `https://play.rosebud.ai/assets/pink_heart_80x78.png.png?VdcA`); this.load.image('green_powerup', `https://play.rosebud.ai/assets/green_powerup_80x80.png.png?g1pi`) this.load.image('small_asteroid', `https://play.rosebud.ai/assets/small_asteroid_80x80.png.png?zg9M`); this.load.image('big_asteroid', `https://play.rosebud.ai/assets/big_asteroid_130x140.png.png?0MRC`); this.load.image('spr_player_bullet', 'https://storage.googleapis.com/rosebud_assets_storage/f5dc46b2-a09e-43f8-990d-3f820074596a-preview.png'); this.load.spritesheet('bigEnemyShips240x240', `https://play.rosebud.ai/assets/bigEnemyShips240x240.png.png?qQzf`, { frameWidth: 240, frameHeight: 240 }); this.load.image('spr_enemy_bullet_small', 'https://storage.googleapis.com/rosebud_assets_storage/fe511315-27a2-482a-adf2-460eda6d0094-preview.png'); } create () { this.screenWidth = this.sys.game.config.width; this.screenHeight = this.sys.game.config.height; this.graphics = this.add.graphics(); this.players = this.physics.add.group(); this.create_playerAnims (); this.create_playerObj(); this.shields = this.physics.add.group(); this.coins = this.physics.add.group(); this.asteroids = this.physics.add.group(); this.powerups = this.physics.add.group(); this.enemies = this.physics.add.group(); this.enemyBullets = this.physics.add.group(); this.enemyTypes = [ { spriteKey: '0', speedX: 10, sideMovementDistance: 200, speedY: 50, hitPoints: 20, hitPointsCurrent: 20, hitPointsBars: 2, hitPointsBarsCurrent: 2, hasGun: true, gunOption: 0, gunTarget: null }, { spriteKey: '1', speedX: 10, sideMovementDistance: 200, speedY: 50, hitPoints: 30, hitPointsCurrent: 30, hitPointsBars: 3, hitPointsBarsCurrent: 3, hasGun: true, gunOption: 1, gunTarget: null }, { spriteKey: '2', speedX: 10, sideMovementDistance: 200, speedY: 50, hitPoints: 30, hitPointsCurrent: 30, hitPointsBars: 3, hitPointsBarsCurrent: 3, hasGun: true, gunOption: 2, gunTarget: this.playerShip }, ]; this.anims.create({ key: 'coin', frames: this.anims.generateFrameNumbers('gold_coins', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); //this.goldCoin.play('coin'); this.gameStageController(this.gameStage); // Collision detection this.physics.add.overlap(this.playerBullets, this.enemies, this.bulletHitsEnemy, null, this); this.physics.add.overlap(this.playerBullets, this.asteroids, this.bulletHitsAsteroid, null, this); this.physics.add.overlap(this.enemyBullets, this.players, this.bulletHitsPlayer, null, this); this.physics.add.overlap(this.asteroids, this.players, this.bulletHitsPlayer, null, this); this.physics.add.overlap(this.enemyBullets, this.shields, this.bulletHitsPlayerShield, null, this); this.physics.add.overlap(this.players, this.powerups, this.collectPowerup, null, this); this.physics.add.overlap(this.players, this.coins, this.collectPowerup, null, this); } setCoinTimer() { // Cancel the prior timer if it's set if (this.spawnCoinTimerEvent) { this.spawnCoinTimerEvent.remove(false); } // Set a new timer this.spawnCoinTimerEvent = this.time.addEvent({ delay: Phaser.Math.Between(3000, 8000), // between 3-5 seconds, callback: () => { let x = Phaser.Math.Between(0, this.screenWidth); let y = Phaser.Math.Between(0, this.screenHeight); if (!this.gameOver) { if (this.coins.getLength() < 12) { let coin = this.create_powerupObj('gold_coins', x, y); coin.play('coin'); this.moveObjectRandomly(coin, 100); } this.setCoinTimer(); // Reset the timer again } }, loop: false }); } setAsteroidTimer() { // Cancel the prior timer if it's set if (this.spawnAsteroidTimerEvent) { this.spawnAsteroidTimerEvent.remove(false); } // Set a new timer this.spawnAsteroidTimerEvent = this.time.addEvent({ delay: Phaser.Math.Between(3000, 8000), // between 3-5 seconds, callback: () => { let x = Phaser.Math.Between(0, this.screenWidth); let y = Phaser.Math.Between(0, this.screenHeight); if (!this.gameOver) { if(this.asteroids.getLength() < 4) { let asteroid = this.create_powerupObj('big_asteroid', x, y); asteroid.hitPointsCurrent = 3; asteroid.setAlpha(0); asteroid.setScale(0.1); asteroid.name = 'big_asteroid'; this.tweens.add({ targets: asteroid, alpha: 1, scale: this.gameScale, ease: 'linear', duration: 500 }); this.moveObjectRandomly(asteroid, Phaser.Math.Between(100, 50), false, Phaser.Math.Between(3000, 8000)); } this.setAsteroidTimer(); // Reset the timer again } }, loop: false }); } create_playerAnims () { this.anims.create({ key: 'player1', frames: this.anims.generateFrameNumbers('playerShips120x120', { start: 0, end: 2 }), frameRate: 10, repeat: 0 }); this.anims.create({ key: 'player2', frames: this.anims.generateFrameNumbers('playerShips120x120', { start: 3, end: 5 }), frameRate: 10, repeat: 0 }); this.anims.create({ key: 'player3', frames: this.anims.generateFrameNumbers('playerShips120x120', { start: 6, end: 8 }), frameRate: 10, repeat: 0 }); } create_playerObj() { this.playerShip = this.add.sprite( this.screenWidth/2, this.screenHeight*1.2, 'playerShips120x120'); this.players.add(this.playerShip); this.playerShip.setScale(this.gameScale); this.playerShip.setFrame(this.playerSelected); this.playerShip.targetX = this.playerShip.x; this.playerShip.targetY = this.playerShip.y; this.playerBullets = this.physics.add.group(); this.playerShip.hitPoints = 10; this.playerShip.hitPointsCurrent = 10; let gunOptionsPlayer = { gunSpeed: 400, numberOfBullets: 1, shootingArc: 35, startingAngle: -90, shootingCooldown: 500, delay: 0 }; this.playerShip.gun = this.createGun(this.playerShip, 'spr_player_bullet', this.playerBullets, gunOptionsPlayer) } createPlayerShield(x, y) { let shield = this.shields.create(x, y, 'shield'); shield.setScale(this.gameScale); shield.hitPoints = 5; shield.hitPointsCurrent = shield.hitPoints; shield.flipY = true; return shield; } updatePlayerShieldPosition(player, shield, offsetY) { shield.x = player.x; shield.y = player.y + offsetY; } movePlayerToPointer(offsetX = 0, offsetY = 0) { let pointer = this.input.activePointer; if (pointer.x >= 0 && pointer.x <= this.screenWidth && pointer.y >= 0 && pointer.y <= this.screenHeight) { let prevTargetX = this.playerShip.x; this.playerShip.targetX = pointer.x; this.playerShip.targetY = pointer.y - offsetY; let movementDirection = this.playerShip.targetX - prevTargetX; if (movementDirection > 6) { this.playerShip.setFrame(this.playerSelected+1); } else if (movementDirection < -6) { this.playerShip.setFrame(this.playerSelected-1); } else { this.playerShip.setFrame(this.playerSelected); } } let factor = 0.14; this.playerShip.x += (this.playerShip.targetX - this.playerShip.x) * factor; this.playerShip.y += (this.playerShip.targetY - this.playerShip.y) * factor; } spawnObject(sprObj, x, y, flipX=false, flipY=false, funcToCall=null) { let obj = this.physics.add.sprite(x, y, sprObj); obj.setScale(this.gameScale); obj.flipX=flipX; obj.flipY=flipY; if (funcToCall) { funcToCall(); } return obj; } createBullet(bulletArray, spr, gunObj, speed, direction) { let bullet = bulletArray.create(gunObj.x,gunObj.y, spr); this.physics.velocityFromAngle(direction, speed, bullet.body.velocity); bullet.setCollideWorldBounds(false); bullet.setDepth(-1); bullet.setScale(this.gameScale*1.5); bullet.body.onWorldBounds = true; this.physics.world.on('worldbounds', (body) => { if (body.gameObject === bullet) { bullet.destroy(); } }); } createBulletSpread(bulletArray, spr, gunObj, speed, numBullets, arcAngle, startAngle, delay=0, clockwise=true) { if (numBullets === 1) { this.createBullet(bulletArray, spr, gunObj, speed, startAngle); } else { let halfArc = arcAngle / 2; let angleStep = arcAngle / (numBullets - 1); angleStep = clockwise ? angleStep*1 : angleStep * -1; this.lastBulletTime = 0; for (let i = 0; i < numBullets; i++) { this.time.delayedCall(i * delay, () => { let angle = startAngle - halfArc + angleStep * i; this.createBullet(bulletArray, spr, gunObj, speed, angle); }); } } } createGun(ship, bulletSpr, bulletArray, gunOptions) { let gun = { myShip: ship, bulletSprite: bulletSpr, myBulletArray: bulletArray, x: ship.x, y: ship.y, speed: gunOptions.gunSpeed, numBullets: gunOptions.numberOfBullets, arcAngle: gunOptions.shootingArc, startAngle: gunOptions.startingAngle, shootingCooldown: gunOptions.shootingCooldown, delay: gunOptions.delay, clockwise: gunOptions.clockwise, bulletsLastFireTime: 0, fire: function() { if (this.destroyed) { return; } this.x = this.myShip.x; this.y = this.myShip.y; let time = this.scene.time.now; if (time >= this.bulletsLastFireTime + this.shootingCooldown) { this.scene.createBulletSpread( this.myBulletArray, this.bulletSprite, this.myShip, this.speed, this.numBullets, this.arcAngle, this.startAngle, this.delay, this.clockwise ); this.bulletsLastFireTime = time; } }, scene: this, destroy: function() { this.myShip = null; this.bulletSprite = null; this.myBulletArray = null; this.destroyed = true; }, destroyed: false }; ship.on('destroy', function() { gun.destroy(); }); return gun; } moveEnemyBoss(object, pattern) { switch (pattern) { case 'horizontal': this.moveInPattern(object, this.screenWidth - object.x * 2, 4000, 0, 2000, true, true, Phaser.Math.Easing.Sine.InOut); break; default: console.error(`Pattern ${pattern} not recognized`); break; } } moveInPattern(object, distanceX, speedX, distanceY, speedY, startRight=true, yoyo=true, easing='linear', onComplete=null) { let targetXRight = object.x + distanceX; let targetXLeft = object.x - distanceX; let targetYDown = object.y + distanceY; let targetYUp = object.y - distanceY; object.tweenX = this.tweens.add({ targets: object, x: startRight ? targetXRight : targetXLeft, ease: easing, duration: speedX, yoyo: onComplete ? false : yoyo, repeat: yoyo ? -1 : 0, flipX: true, onComplete: onComplete }); object.tweenY = this.tweens.add({ targets: object, y: startRight ? targetYDown : targetYUp, ease: easing, duration: speedY, yoyo: yoyo, repeat: yoyo ? -1 : 0, onComplete: onComplete }); } moveObjectRandomly(object, speed, wrap=false, rotationTime=0) { let randomAngle = Phaser.Math.Between(0, 360); this.physics.velocityFromAngle(randomAngle, speed, object.body.velocity); if (wrap) { object.wrap = wrap; } else { object.setCollideWorldBounds(true); object.setBounce(1); } if (rotationTime > 0) { object.rotationTime = rotationTime; this.tweens.add({ targets: object, angle: 360, ease: 'Linear', duration: object.rotationTime, repeat: -1, }); } } splitObj(bigObj, smallObjKey, objGroup, health = 0) { const bigObjVelocity = bigObj.body.velocity; const speed = Math.hypot(bigObjVelocity.x, bigObjVelocity.y); const smallObj1 = this.physics.add.image(bigObj.x, bigObj.y, smallObjKey).setScale(this.gameScale); smallObj1.name = smallObjKey; smallObj1.hitPointsCurrent = health; const smallObj2 = this.physics.add.image(bigObj.x, bigObj.y, smallObjKey).setScale(this.gameScale); smallObj2.name = smallObjKey; smallObj2.hitPointsCurrent = health; objGroup.add(smallObj1); objGroup.add(smallObj2); this.moveObjectRandomly(smallObj1, speed, bigObj.wrap, bigObj.rotationTime * 0.8); this.moveObjectRandomly(smallObj2, speed, bigObj.wrap, bigObj.rotationTime * 0.8); bigObj.destroy(); } moveAlongBorder(obj, speed, margin, clockwise) { const directions = clockwise ? [ { prop: 'x', target: this.cameras.main.width - margin, rotation: 90 }, { prop: 'y', target: this.cameras.main.height - margin, rotation: 180 }, { prop: 'x', target: margin, rotation: 270 }, { prop: 'y', target: margin, rotation: 0 }, ] : [ { prop: 'y', target: this.cameras.main.height - margin, rotation: 180 }, { prop: 'x', target: this.cameras.main.width - margin, rotation: 90 }, { prop: 'y', target: margin, rotation: 0 }, { prop: 'x', target: margin, rotation: 270 }, ]; const makeTween = (direction, onComplete) => { const duration = Math.abs(direction.target - obj[direction.prop]) / speed * 1000; this.tweens.add({ targets: obj, [direction.prop]: direction.target, ease: 'Linear', duration: duration, onComplete: () => { obj.rotation = Phaser.Math.DegToRad(direction.rotation); onComplete(); } }); }; const move = (directionIndex) => { makeTween(directions[directionIndex], () => { move((directionIndex + 1) % directions.length); }); }; move(0); } spawnEnemy(enemyType, x, y) { let enemy = this.enemies.create(x, y, 'bigEnemyShips240x240') enemy.setFrame(enemyType.spriteKey); enemy.setScale(this.gameScale); enemy.hitPoints = enemyType.hitPoints; enemy.hitPointsCurrent = enemyType.hitPointsCurrent; enemy.hitPointsBars = enemyType.hitPointsBars, enemy.hitPointsBarsCurrent = enemyType.hitPointsBarsCurrent, enemy.speedX = enemyType.speedX; enemy.speedY = enemyType.speedY; enemy.sideMovementDistance = enemyType.sideMovementDistance; enemy.hasGun = enemyType.hasGun; enemy.gunOption = enemyType.gunOption; enemy.gunTarget = enemyType.gunTarget; let gunOptionsEnemy = [{ gunSpeed: 70, numberOfBullets: 4, shootingArc: 65, startingAngle: 90, shootingCooldown: 500, delay: 0 }, { gunSpeed: 60, numberOfBullets: 4, shootingArc: 35, startingAngle: 90, shootingCooldown: 1500, delay: 50 }, { gunSpeed: 90, numberOfBullets: 3, shootingArc: 45, startingAngle: 90, shootingCooldown: 1000, delay: 10 }, ]; enemy.gun = this.createGun(enemy, 'spr_enemy_bullet_small', this.enemyBullets, gunOptionsEnemy[enemy.gunOption]) return enemy; } enemyShootAtTarget(enemy) { if (enemy.gun && (enemy.y > 10 && enemy.y < this.screenHeight-100)) { if (enemy.gunTarget) { enemy.gun.startAngle = Phaser.Math.RadToDeg(Phaser.Math.Angle.Between(enemy.x, enemy.y, enemy.gunTarget.x, enemy.gunTarget.y)); } else { enemy.gun.startAngle = Phaser.Math.RadToDeg(enemy.rotation) +90; } enemy.gun.fire(); } } drawHealthBar(obj, totalHitpoints, currentHitpoints, color, emptyColor, offsetY = -20) { let healthBarTotalLength = obj.width * this.gameScale; let healthBarCurrentLength = (healthBarTotalLength / totalHitpoints) * currentHitpoints; this.graphics.fillStyle(emptyColor, 1); this.graphics.fillRect(obj.x - healthBarTotalLength/2, obj.y - offsetY, healthBarTotalLength, 5); this.graphics.fillStyle(color, 1); this.graphics.fillRect(obj.x - healthBarTotalLength/2, obj.y - offsetY, healthBarCurrentLength, 5); } drawEnemyHealthBars(enemy) { const healthBarWidth = 10; // You can change this to the width of each health bar const healthPerBar = enemy.hitPoints / enemy.hitPointsBars; for (let i = 0; i < enemy.hitPointsBars; i++) { let currentHealthInThisBar = Math.max(0, Math.min(healthPerBar, enemy.hitPointsCurrent - (i * healthPerBar))); this.drawHealthBar(enemy, healthPerBar, currentHealthInThisBar, 0x00ff00, 0xff0000, 50 + (i * healthBarWidth)); } } bulletHitsEnemy(bullet, enemy) { bullet.destroy(); enemy.hitPointsCurrent -= 1; if (enemy.hitPointsCurrent <= ((enemy.hitPoints / enemy.hitPointsBars) * (enemy.hitPointsBarsCurrent - 1))) { enemy.hitPointsBarsCurrent -= 1; if (enemy.hitPointsBarsCurrent >= 0) { let powerupTypes = ['pink_heart', 'blue_shield']; let chosenPowerup = Phaser.Utils.Array.GetRandom(powerupTypes); this.create_powerupObj(chosenPowerup, enemy.x, enemy.y); } if (enemy.hitPointsCurrent <= 0) { this.gameStage += 1; enemy.destroy(); this.gameStageController(this.gameStage); } } } bulletHitsAsteroid(bullet, asteroid) { bullet.destroy(); asteroid.hitPointsCurrent -= 1; if (asteroid.hitPointsCurrent <= 0) { switch(asteroid.name) { case 'big_asteroid': this.splitObj(asteroid, 'small_asteroid', this.asteroids, 3) break; case 'small_asteroid': if (Phaser.Math.Between(0, 100) > 50) { let powerupTypes = ['pink_heart', 'blue_shield', 'green_powerup']; let chosenPowerup = Phaser.Utils.Array.GetRandom(powerupTypes); this.create_powerupObj(chosenPowerup, asteroid.x,asteroid.y) } asteroid.destroy(); break; default: console.log('Unexpected value in bulletHitsAsteroid'); } } } bulletHitsPlayer(bullet, player) { bullet.destroy(); this.shakeCamera(); player.hitPointsCurrent -= 1; if (player.hitPointsCurrent <= 0) { player.destroy(); //this.physics.pause(); this.gameOver = true; this.gameOverFunc(); } } bulletHitsPlayerShield(bullet, shield) { bullet.destroy(); shield.hitPointsCurrent -= 1; shield.alpha = shield.hitPointsCurrent / shield.hitPoints; // Update alpha as a percentage of remaining hitpoints if (shield.hitPointsCurrent <= 0) { shield.destroy(); } else { this.time.delayedCall(100, () => { shield.alpha = shield.hitPointsCurrent / shield.hitPoints + 0.2; }); shield.alpha = 0.5; } } create_powerupObj(spr, x, y) { let powerup = this.physics.add.sprite(x, y, spr); powerup.name = spr; switch (powerup.name) { case "gold_coins": this.coins.add(powerup); break; case "small_asteroid": case "big_asteroid": this.asteroids.add(powerup); break; default: this.powerups.add(powerup); break; } powerup.setScale(this.gameScale); this.moveObjectRandomly(powerup, 100); return powerup; } collectPowerup(player, powerup) { let pupName = powerup.name; console.log(pupName); switch (pupName) { case "gold_coins": this.gameCoinScore += 100; this.displayFadeAwayText("+100", powerup.x, powerup.y); this.gameCoinScoreTxt.setText("Coins: " + this.gameCoinScore); break; case "blue_shield": this.createPlayerShield(player.x, player.y - 50); break; case "pink_heart": player.hitPointsCurrent = Math.min(player.hitPoints, player.hitPointsCurrent + 3); break; case "green_powerup": this.playerShip.gun.shootingCooldown = this.playerShip.gun.shootingCooldown * 0.8; break; default: console.error(`Powerup ${pupName} not recognized`); break; } powerup.destroy(); } shakeCamera(duration = 100, intensity = 0.01) { this.cameras.main.shake(duration, intensity); } displayFadeAwayText(text, x, y) { let displayText = this.add.text(x, y, text, { font: '14px Courier', fill: '#ffffff', align: 'center' }); displayText.setOrigin(0.5, 0.5); this.tweens.add({ targets: displayText, y: y - 20, alpha: 0, ease: 'linear', duration: 500, onComplete: () => displayText.destroy() }); } createPlayerSelectBtn() { this.gameStarted = false; let makeSelectionTxt = this.add.text(this.screenWidth/2, this.screenHeight*0.33, 'Select a ship to begin!', { font: '40px Courier', fill: '#ffffff', align: 'center' }); makeSelectionTxt.setOrigin(0.5, 0.5); for (let i = 0; i < 4; i++) { let playerSelectBtn = this.add.sprite(100 + (i * 200), this.screenHeight*0.7, 'playerShips120x120', (i*3+1)) .setScale(1) .setInteractive() .on('pointerdown', () => { this.playerSelected = (i*3) + 1; this.playerSelectBtns.forEach(btn => btn.destroy()); makeSelectionTxt.destroy(); this.playerSelectBtns = []; this.setCoinTimer(); this.setAsteroidTimer(); this.gameStageController(1); this.gameStarted = true; this.gameCoinScoreTxt = this.add.text(this.screenWidth*0.05, this.screenHeight*0.01, 'Coins: ', { font: '20px Courier', fill: '#ffffff', align: 'left' }); this.gameCoinScoreTxt.setOrigin(0.5, 0.5); }); this.playerSelectBtns.push(playerSelectBtn); } } gameStageController(gameStage) { switch (gameStage) { case 0: this.createPlayerSelectBtn(); break; case 3: let boss1 = this.spawnEnemy(this.enemyTypes[0], 150, 90); this.moveAlongBorder(boss1, 300, 90, true); break; case 1: let boss2 = this.spawnEnemy(this.enemyTypes[1], this.screenWidth/8, -this.screenHeight/6); this.tweens.add({ targets: boss2, y: this.screenHeight/6, // change this to the y position you want ease: 'Power1', duration: 2000, // change this to the duration you want onComplete: () => this.moveEnemyBoss(boss2, 'horizontal') }); break; case 2: let boss3 = this.spawnEnemy(this.enemyTypes[2], this.screenWidth/8, -this.screenHeight/6); this.tweens.add({ targets: boss3, y: this.screenHeight/6, // change this to the y position you want ease: 'Power1', duration: 2000, // change this to the duration you want onComplete: () => this.moveEnemyBoss(boss3, 'horizontal') }); break; default: this.gameOver = true; let gameEndTxt = this.add.text(this.screenWidth/2, this.screenHeight*0.33, 'Congratulations!!!', { font: '45px Courier', fill: '#ffffff', align: 'center' }); gameEndTxt.setOrigin(0.5, 0.5); break; } } gameOverFunc(){ this.coins.getChildren().forEach(coin => coin.destroy()); this.coins = []; } update() { this.graphics.clear(); //Enemy update section if (this.enemies) { this.enemies.getChildren().forEach(enemy => { if(enemy.hasGun && !this.gameOver) this.enemyShootAtTarget(enemy) this.drawEnemyHealthBars(enemy); }); } // Powerups update section this.asteroids.getChildren().forEach((asteroid) => { if (asteroid.wrap) { this.physics.world.wrap(asteroid, 100); } }); //Player update section if (this.playerShip && !this.gameOver ) { if (this.gameStarted) { this.movePlayerToPointer(0, 16); this.playerShip.gun.fire(); } this.drawHealthBar(this.playerShip, this.playerShip.hitPoints, this.playerShip.hitPointsCurrent, 0x00ff00, 0xff0000, 25); this.shields.getChildren().forEach(shield => { if (this.playerShip) { this.updatePlayerShieldPosition(this.playerShip, shield, -30) } else shield.destroy(); } ); } } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 0 }, debug: false } }, scene: Example }; window.phaserGame = new Phaser.Game(config);