inland-empire-software-development · spfrood · Aug 4, 2019 · Aug 31, 2019 · Aug 31, 2019 · Sep 1, 2019
diff --git a/index.html b/index.html
@@ -6,6 +6,14 @@
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
+    <div>
+        <h2>Select Character</h2>
+        <img src="/images/char-boy.png" id="char-boy" class="sprite"></img>
+        <img src="/images/char-cat-girl.png" id="char-cat-girl" class="sprite"></img>
+        <img src="/images/char-horn-girl.png" id="char-horn-girl" class="sprite"></img>
+        <img src="/images/char-pink-girl.png" id="char-pink-girl" class="sprite"></img>
+        <img src="/images/char-princess-girl.png" id="char-princess-girl" class="sprite"></img>
+    </div>
     <script src="js/resources.js"></script>
     <script src="js/app.js"></script>
     <script src="js/engine.js"></script>

diff --git a/js/app.js b/js/app.js
@@ -19,53 +19,108 @@ class Populate {
   }
 }
 
+//Lives class
+class Lives extends Populate {
+  constructor () {
+    this.x = 0;
+    this.y = 
+    this.sprite = "images/Heart.png";
+  }
+}
+
 //Player class
 class Player extends Populate {
   constructor () {
     super();
+    this.numLives = 0;
+    this.score = 0;
     this.x = 0;
     this.y = 415;
     this.sprite = "images/char-boy.png";
   }
 
 //key input for Player
-  handleInput (input) {
-    switch (input) {
-      case "left":
-        if (this.x >= this.sideways) {
-          this.x -= this.sideways;
-        }
-        break;
-      case "right":
-        if (this.x <= this.sideways * 3) {
-          this.x += this.sideways;
-        }
-        break;
-      case "up":
-        if (this.y >= 83) {
-          this.y -= this.upDown;
-        }
-        break;
-      case "down":
-        if (this.y <= this.upDown * 4) {
-          this.y += this.upDown;
-        }
-        break;
-    }
+handleInput(input) {
+  console.log(input);
+  switch (input) {
+    case "left":
+      if (this.x >= this.sideways) {
+        this.x -= this.sideways;
+      }
+      break;
+    case "a":
+      if (this.x >= this.sideways) {
+        this.x -= this.sideways;
+      }
+      break;
+    case "d":
+      if (this.x <= this.sideways * 3) {
+        this.x += this.sideways;
+      }
+      break;
+    case "right":
+      if (this.x <= this.sideways * 3) {
+        this.x += this.sideways;
+      }
+      break;
+    case "up":
+      if (this.y >= 83) {
+        this.y -= this.upDown;
+      }
+      break;
+    case "w":
+      if (this.y >= 83) {
+        this.y -= this.upDown;
+      }
+      break;
+    case "down":
+      if (this.y <= this.upDown * 4) {
+        this.y += this.upDown;
+      }
+      break;
+    case "s":
+      if (this.y <= this.upDown * 4) {
+        this.y += this.upDown;
+      }
+      break;
   }
+}
 
   //updates player and sets condition for collision & win
   update () {
     for (let enemy of allEnemies) {
       if (this.y === enemy.y && (enemy.x + enemy.sideways / 2 > this.x && enemy.x < this.x + this.sideways / 2)) {
+        this.numLives--;
         this.reset();
       }
     }
+    if (this.numLives <= 0) {
+      this.numLives = 3;
+      this.score = 0;
+      this.reset();
+    }
+    if (this.y <= 1) {
+      this.score++;
+    }
   }
 }
 
 const player = new Player();
 
+sprite = document.getElementsByClassName("sprite");
+
+console.log(sprite);
+
+spriteArr = Array.from(sprite);
+
+spriteArr.forEach(element => {
+  element.addEventListener("click", function() {
+    let id = element.getAttribute("id");
+    player.sprite = `images/${id}.png`;
+    player.reset();
+  });
+});
+
 //Array to hold Enemy objects
 const allEnemies = [];
 
@@ -100,6 +155,10 @@ allEnemies.push(enemy1, enemy2, enemy3, enemy4);
 // Player.handleInput() method. You don't need to modify this.
 document.addEventListener("keyup", function (e) {
   var allowedKeys = {
+    87: "w",
+    65: "a",
+    83: "s",
+    68: "d",
     37: "left",
     38: "up",
     39: "right",

diff --git a/js/engine.js b/js/engine.js
@@ -6,21 +6,21 @@
  * writing app.js a little simpler to work with.
  */
 
-var Engine = (function (global) {
+var Engine = (function(global) {
   var doc = global.document,
     win = global.window,
     canvas = doc.createElement("canvas"),
     ctx = canvas.getContext("2d"),
     lastTime;
 
   canvas.width = 505;
-  canvas.height = 606;
+  canvas.height = 642;
   doc.body.appendChild(canvas);
 
   /* This function serves as the kickoff point for the game loop itself
    * and handles properly calling the update and render methods.
    */
-  function main () {
+  function main() {
     /* Get our time delta information which is required if your game
      * requires smooth animation.
      */
@@ -43,34 +43,32 @@ var Engine = (function (global) {
     if (player.winAStar === true) {
       modal.style.display = "block";
       win.cancelAnimationFrame;
-
     } else {
       win.requestAnimationFrame(main);
-
     }
   }
 
   /* This function does some initial setup that should only occur once,
    * particularly setting the lastTime variable that is required for the
    * game loop.
    */
-  function init () {
+  function init() {
     lastTime = Date.now();
     main();
   }
 
   /* This function is called by main (our game loop) and itself calls all
    * of the functions which may need to update entity's data. */
 
-  function update (dt) {
+  function update(dt) {
     updateEntities(dt);
   }
 
   /* This is called by the update function and loops through all of the
    * objects within your allEnemies array as defined in app.js
    */
-  function updateEntities (dt) {
-    allEnemies.forEach(function (enemy) {
+  function updateEntities(dt) {
+    allEnemies.forEach(function(enemy) {
       enemy.update(dt);
     });
     player.update();
@@ -79,25 +77,30 @@ var Engine = (function (global) {
   /* This function initially draws the "game level", it will then call
    * the renderEntities function.
    */
-  function render () {
+  function render() {
     /* This array holds the relative URL to the image used
      * for that particular row of the game level.
      */
     var rowImages = [
-        "images/water-block.png",   // Top row is water
-        "images/stone-block.png",   // Row 1 of 3 of stone
-        "images/stone-block.png",   // Row 2 of 3 of stone
-        "images/stone-block.png",   // Row 3 of 3 of stone
-        "images/grass-block.png",   // Row 1 of 2 of grass
-        "images/grass-block.png"    // Row 2 of 2 of grass
+        "images/water-block.png", // Top row is water
+        "images/stone-block.png", // Row 1 of 3 of stone
+        "images/stone-block.png", // Row 2 of 3 of stone
+        "images/stone-block.png", // Row 3 of 3 of stone
+        "images/grass-block.png", // Row 1 of 2 of grass
+        "images/grass-block.png" // Row 2 of 2 of grass
       ],
       numRows = 6,
       numCols = 5,
-      row, col;
+      row,
+      col;
 
     // Before drawing, clear existing canvas
     ctx.clearRect(0, 0, canvas.width, canvas.height);
 
+    // Draw the scoreboard and life counter at bottom of page.
+    ctx.fillStyle = "#F77";
+    ctx.fillRect(0, 595, canvas.width, 38);
+
     /* Loop through the number of rows and columns we've defined above
      * and, using the rowImages array, draw the correct image for that
      * portion of the "grid"
@@ -114,6 +117,9 @@ var Engine = (function (global) {
         ctx.drawImage(Resources.get(rowImages[row]), col * 101, row * 83);
       }
     }
+    //for (let cntr = 0; cntr <= player.numLives; cntr++) {
+      ctx.drawImage(Resources.get(, 0, 600, 34, 34);
+    //}
 
     renderEntities();
   }
@@ -122,8 +128,8 @@ var Engine = (function (global) {
    * tick. Its purpose is to then call the render functions you have defined
    * on your enemy and player entities within app.js
    */
-  function renderEntities () {
-    allEnemies.forEach(function (enemy) {
+  function renderEntities() {
+    allEnemies.forEach(function(enemy) {
       enemy.render();
     });
 
@@ -137,7 +143,16 @@ var Engine = (function (global) {
     "images/grass-block.png",
     "images/enemy-bug.png",
     "images/char-boy.png",
+<<<<<<< HEAD
+    "images/Star.png",
+    "images/Heart.png"
+=======
+    "images/char-cat-girl.png",
+    "images/char-horn-girl.png",
+    "images/char-pink-girl.png",
+    "images/char-princess-girl.png",
     "images/Star.png"
+>>>>>>> 5ff837b91581b0cec59d3fd7a07f880cb6a69e53
   ]);
   Resources.onReady(init);