New logic added: score, herts and game over mechanics

DevTony101 · Nov 21, 2021 · 4268bc3 · 4268bc3
1 parent 9e0b643
commit 4268bc3
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -1,8 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script src="lib/p5.js"></script>
-    <script src="lib/p5.sound.min.js"></script>
+    <!-- p5 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
+    <!-- p5.touchgui -->
+    <script src="https://unpkg.com/p5.touchgui@0.5.2/lib/p5.touchgui.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css" />
     <meta charset="utf-8" />
   </head>

diff --git a/sketch.js b/sketch.js
@@ -1,22 +1,42 @@
 // begin parameters
 const numberOfStars = 200;
-const numberOfInitialAsteroids = 5;
-const asteroidsToAdd = 2;
+const numberOfInitialAsteroids = 2;
+const asteroidsToAdd = 1;
 const starsMovement = 8;
 const bulletMovement = 8;
-const soundsFolder = "sound_effects";
+const initialLives = 5;
+const scoreIncrement = 100;
+const assetsFolder = "./assets";
+const soundsFolder = `${assetsFolder}/sounds`;
+const imagesFolder = `${assetsFolder}/images`;
+const fontsFolder = `${assetsFolder}/fonts`;
 // end parameters
+
 let ship, stars, asteroids;
-let shootEffect, explodeEffect;
+let heartImage, gameOverImage;
+let shootEffect, explodeEffect, gameOverEffect;
+let psFont;
+
 function preload() {
+  // begin assets
+  // -- Images
+  heartImage = loadImage(`${imagesFolder}/heart.png`);
+  gameOverImage = loadImage(`${imagesFolder}/game_over.png`);
+  // -- Sounds
   shootEffect = loadSound(`${soundsFolder}/shoot_sound.mp3`);
   explodeEffect = loadSound(`${soundsFolder}/explosion_sound.mp3`);
+  gameOverEffect = loadSound(`${soundsFolder}/game_over_sound.mp3`);
+  // -- Fonts
+  psFont = loadFont(`${fontsFolder}/PressStart2P-Regular.ttf`);
+  // end assets
 }
 
 function setup() {
   createCanvas(windowWidth, windowHeight);
-  ship = new Ship(parseInt(width / 2), height - 20, bulletMovement);
+  ship = new Ship(parseInt(width / 2), height - 20, bulletMovement, initialLives);
   ship.setShootSoundEffect(shootEffect);
+  ship.setHeartImage(heartImage);
+  ship.setScoreFont(psFont);
   stars = new MovableObjects(0, starsMovement, numberOfStars);
   asteroids = Array(numberOfInitialAsteroids)
     .fill(0)
@@ -26,11 +46,13 @@ function setup() {
 }
 
 function mousePressed() {
-  ship.shoot();
+  if (ship.hasAnyHeartsLeft()) ship.shoot();
 }
 
 function keyPressed() {
-  if (keyCode === 32) ship.shoot();
+  if (ship.hasAnyHeartsLeft()) {
+    if (keyCode === 32) ship.shoot();
+  }
   return false;
 }
 
@@ -39,6 +61,12 @@ function draw() {
   drawStars();
   drawAsteroids();
   ship.draw(mouseX);
+  if (!ship.hasAnyHeartsLeft()) {
+    image(gameOverImage, (width / 2) - 155, (height / 2) - 85, 310, 170, 0, 0);
+    gameOverEffect.setVolume(0.05);
+    gameOverEffect.play();
+    noLoop();
+  }
 }
 
 function drawStars() {
@@ -61,12 +89,14 @@ function drawAsteroids() {
   for (let i = 0; i < asteroids.length; i++) {
     const asteroid = asteroids[i];
     const idxBullet = asteroid.isHitBy(ship.getBullets());
+    if (!asteroid.hasExploded() && asteroid.isOffsetY()) ship.decrementHearts();
     if (asteroid.isOffset()) {
       asteroids.splice(i, 1);
       continue;
     }
 
     if (!asteroid.hasExploded() && idxBullet >= 0) {
+      ship.incrementScore(scoreIncrement);
       asteroid.explode(explodeEffect);
       ship.deleteBullet(idxBullet);
     }

diff --git a/src/debri.js b/src/debri.js
@@ -20,7 +20,6 @@ class Debri {
   }
 
   move() {
-    this.angle += 0.01;
     this.x = this.x + this.movementX;
     this.y = this.y + this.movementY;
     for (let i = 0; i < this.verticies.length; i++) {

diff --git a/src/ship.js b/src/ship.js
@@ -1,15 +1,20 @@
 class Ship {
-  constructor(x, y, bulletMovement) {
+  constructor(x, y, bulletMovement, initialHearts) {
     this.x = x;
     this.y = y;
     this.bullets = new MovableObjects(0, -bulletMovement);
-    this.shootSoundEffect = null;
+    this.hearts = initialHearts;
+    this.score = 0;
   }
 
   getBullets() {
     return this.bullets.collection;
   }
 
+  getScore() {
+    return this.score;
+  }
+
   deleteBullet(index) {
     this.bullets.deleteByIndex(index);
   }
@@ -19,6 +24,14 @@ class Ship {
     this.shootSoundEffect = soundEffect;
   }
 
+  setHeartImage(image) {
+    this.heartImage = image;
+  }
+
+  setScoreFont(font) {
+    this.scoreFont = font;
+  }
+
   shoot() {
     if (this.bullets.size() < 5) {
       this.shootSoundEffect.play();
@@ -29,8 +42,22 @@ class Ship {
     }
   }
 
+  incrementScore(inc) {
+    this.score += inc;
+  }
+
+  decrementHearts() {
+    this.hearts--;
+  }
+
+  hasAnyHeartsLeft() {
+    return this.hearts > 0;
+  }
+
   draw(x) {
+    this.drawHearts();
     this.drawBullets();
+    this.drawScore();
     let translateX = mapXLimits(x);
     push();
     translate(translateX, this.y);
@@ -51,4 +78,21 @@ class Ship {
       rect(0, 0, 2, 10);
     });
   }
+
+  drawHearts() {
+    for (let i = 0; i < this.hearts; i++) {
+      const xPos = (20 * i) + 20;
+      const offset = 25 * i;
+      image(this.heartImage, xPos + offset, 25, 35, 35, 0, 0);
+    }
+  }
+
+  drawScore() {
+    push();
+    fill(255);
+    textFont(this.scoreFont);
+    textSize(15);
+    text(`Score: ${this.score}`, 20, 100);
+    pop();
+  }
 }