boom (#22)

* boom

* ooh one more bug AND allow wasd

* tell people they can pause

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

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

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