diff --git a/assets/explodey.png b/assets/explodey.png new file mode 100644 index 0000000..4fbccf0 Binary files /dev/null and b/assets/explodey.png differ diff --git a/helpermethods.js b/helpermethods.js index a2298c8..d198e58 100644 --- a/helpermethods.js +++ b/helpermethods.js @@ -1,4 +1,4 @@ -import { TOP_BUFFER } from "./constants.js"; +import { TOP_BUFFER, initialValues } from "./constants.js"; // Helper Methods below: // sortedEnemies() returns an array of enemy sprites sorted by their x coordinate @@ -124,7 +124,7 @@ export function createStartingEnemies(gameState, value, firstRow, secondRow) { for (let col = 1; col < 9; col++) { for (let row = firstRow; row <= secondRow; row++) { const enemy = gameState.enemies - .create(50 * col, gameState.rowToYValue[row], value, 0) + .create(50 * col, initialValues.rowToYValue[row], value, 0) .setScale(gameState.scale) .setGravityY(-200) .setName(`Bug ${col}:${row}`); @@ -156,12 +156,12 @@ function makeBullets(velocities, name, randomBug, pellets) { } } -export function genPellet(gameState, pellets) { +export function genPellet(gameState, pellets, scene) { let randomBug = Phaser.Utils.Array.GetRandom(gameState.enemies.getChildren()); //most of the time we spawn a enemy projectile. //but x% of the time (let's say 1% for now) we spawn a powerup. 1% may be too generous. const isPowerup = rollAnNSidedDie(100) == 1; - if (isPowerup) { + if (isPowerup && parseInt(scene.healthBar.frame.name) >= 1) { const powerUp = gameState.powerUps.create( randomBug.x, randomBug.y, @@ -348,7 +348,7 @@ function generateBugInBottomRow(gameState, scene) { const row = getLowestYEnemy(gameState).row; spawnBug(xVal, 2, row, col, gameState, scene); } else { - generateBugInTopRow(gameState, 2, scene); + generateBugInTopRow(gameState, { texture: { key: 2 } }, scene); //this is a dirty hack } } diff --git a/mainGame.js b/mainGame.js index 845917a..7df9ef7 100644 --- a/mainGame.js +++ b/mainGame.js @@ -16,9 +16,14 @@ import { moveEnemiesDown, } from "./helpermethods.js"; -import { initialValues, LEFT_BUFFER, RIGHT_BUFFER } from "./constants.js"; +import { + initialValues, + LEFT_BUFFER, + RIGHT_BUFFER, + basicFontConfig, +} from "./constants.js"; -const gameState = { ...initialValues }; +let gameState = JSON.parse(JSON.stringify(initialValues)); const youWin = (scene) => { this.active = false; @@ -117,6 +122,10 @@ export default class mainGame extends Phaser.Scene { frameWidth: 12, frameHeight: 13, }); + this.load.spritesheet("playerHit", "assets/explodey.png", { + frameWidth: 8, + frameHeight: 8, + }); this.load.audio("shoot", "assets/audio/Shoot_1.wav"); this.load.audio("heal", "assets/audio/Power_Up_2.wav"); this.load.audio("hitSelf", "assets/audio/Hit_3.wav"); @@ -148,11 +157,16 @@ export default class mainGame extends Phaser.Scene { gameState.generateMegaMagnets.destroy(); scene.timedSpawn.destroy(); scene.physics.pause(); - scene.add.text(100, 250, "Game Over. Click to restart", { - fontSize: "15px", - fill: "#fff", - backgroundColor: "#000", - }); + scene.add.text( + 100, + 250, + `Game Over. Your final score was ${gameState.sumValueOfEnemies}. Click to restart`, + { + ...basicFontConfig, + backgroundColor: "#000", + wordWrap: { width: 300, useAdvancedWrap: true }, + } + ); } this.active = true; @@ -216,7 +230,10 @@ export default class mainGame extends Phaser.Scene { this.input.on("pointerup", () => { if (this.active === false) { this.scene.restart(); - this.gameState = initialValues; + gameState = { + ...initialValues, + rowToYValue: { ...initialValues["rowToYValue"] }, + }; } }); @@ -251,6 +268,8 @@ export default class mainGame extends Phaser.Scene { this.cursors = this.input.keyboard.createCursorKeys(); this.pauseButton = this.input.keyboard.addKey("P"); + this.leftKey = this.input.keyboard.addKey("A"); + this.rightKey = this.input.keyboard.addKey("D"); const pellets = this.physics.add.group(); @@ -265,7 +284,7 @@ export default class mainGame extends Phaser.Scene { gameState.pelletsLoop = this.time.addEvent({ delay: 1000, callback: genPellet, - args: [gameState, pellets], + args: [gameState, pellets, this], callbackScope: this, loop: true, }); @@ -318,12 +337,23 @@ export default class mainGame extends Phaser.Scene { this.physics.add.collider(pellets, this.player, (player, pellet) => { pellet.destroy(); - + const playerHitExplosion = this.add + .sprite(player.x, player.y, "playerHit", 0) + .setScale(2); + playerHitExplosion.play("playerHitAnim"); + this.tweens.add({ + targets: playerHitExplosion, + scale: 7, + duration: 100, + repeat: 0, + onComplete: () => playerHitExplosion.destroy(), + }); if (this.healthBar.frame.name < 3) { hitSelf.play(); this.healthBar.setFrame(this.healthBar.frame.name + 1); } else { this.healthBar.setFrame(4); + this.player.destroy(); explosion.play(); gameOver(this); } @@ -512,14 +542,23 @@ export default class mainGame extends Phaser.Scene { }), repeat: -1, }); + this.anims.create({ + key: "playerHitAnim", + frameRate: 4, + frames: this.anims.generateFrameNumbers("playerHit", { + start: 0, + end: 2, + }), + repeat: -1, + }); } update() { if (this.active) { // If the game is active, then players can control the ship - if (this.cursors.left.isDown) { + if (this.cursors.left.isDown || this.leftKey.isDown) { this.player.setVelocityX(-220); - } else if (this.cursors.right.isDown) { + } else if (this.cursors.right.isDown || this.rightKey.isDown) { this.player.setVelocityX(220); } else { this.player.setVelocityX(0); diff --git a/settings.js b/settings.js index 96fb679..2ef1edc 100644 --- a/settings.js +++ b/settings.js @@ -32,13 +32,15 @@ export default class Settings extends Phaser.Scene { let volume = 100; this.add.image(225, 225, "bg-box"); - this.add.text(50, 50, "Settings", basicFontConfig); - this.add.text(50, 175, "How to Play", basicFontConfig); - this.add.text(50, 200, instructions, { + this.add.text(50, 50, "Settings", { fontSize: "24px", fill: "#fff" }); + this.add.text(50, 125, "How to Play", { fontSize: "24px", fill: "#fff" }); + this.add.text(50, 150, instructions, { fontSize: "15px", fill: "#fff", wordWrap: { width: 380, useAdvancedWrap: true }, }); + this.add.text(50, 315, "Arrow keys or WASD: move", basicFontConfig); + this.add.text(50, 340, "Space bar: fire P: pause", basicFontConfig); this.add.image(55, 380, "heal").setScale(2); this.add.text(65, 375, "<-Heals you", basicFontConfig); this.add.image(200, 380, "magnet").setScale(0.25);