Fix/fix render

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "files.autoSave": "afterDelay"
+}

README.md

@@ -17,11 +17,11 @@ Here's a walkthrough of implemented user stories.
 
 - [x] The user can move their character with the arrow keys. 
 - [x] The user can see a monster.
-- [ ] The monster is placed at a random location within the game boundaries.
+- [x] The monster is placed at a random location within the game boundaries.
 - [x] The user can catch a monster by moving their character to the same location as a monster.
-- [ ] When the user catches a monster, a new monster is placed randomly upon the screen.
-- [ ] The user can see the numbers of monsters she has caught. Every time she catches a monster, the number should increment by one. 
-- [ ] The game ends when the user has caught 20 monsters. The total time elapsed is displayed upon game completion, in seconds.
+- [x] When the user catches a monster, a new monster is placed randomly upon the screen.
+- [x] The user can see the numbers of monsters she has caught. Every time she catches a monster, the number should increment by one. 
+- [x] The game ends when the user has caught 20 monsters. The total time elapsed is displayed upon game completion, in seconds.
 - [ ] The user can access this game from the internet (e.g. using Netlify).
 - [ ] The code has been reviewed by at least one other person, using Pull Requests on GitHub.
 

game.js

@@ -1,124 +1,143 @@
-/*
-  Code modified from:
-  http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/
-  using graphics purchased from vectorstock.com
-*/
-
-/* Initialization.
-Here, we create and add our "canvas" to the page.
-We also load all of our images. 
-*/
-
+let canvas, ctx;
+let timeStart, timeEnd, totalTime;
+let timeAllow = 20;
+let isRestart = false;
+let bgReady, heroReady, monsterReady;
+let bgImage, heroImage, monsterImage;
 
-let canvas;
-let ctx;
+let monsterX = 100;
+let monsterY = 100;
+let countMonsterCaught = 0;
+let keysDown = {};
 
 canvas = document.createElement("canvas");
 ctx = canvas.getContext("2d");
-canvas.width = 512;
-canvas.height = 480;
+canvas.width = 500;
+canvas.height = 500;
 document.body.appendChild(canvas);
 
-let bgReady, heroReady, monsterReady;
-let bgImage, heroImage, monsterImage;
+let heroX = canvas.width / 2;
+let heroY = canvas.height / 2;
 
 function loadImages() {
   bgImage = new Image();
-  bgImage.onload = function () {
-    // show the background image
+  bgImage.onload = function() {
     bgReady = true;
   };
   bgImage.src = "images/background.png";
+
   heroImage = new Image();
-  heroImage.onload = function () {
-    // show the hero image
+  heroImage.onload = function() {
     heroReady = true;
   };
   heroImage.src = "images/hero.png";
 
   monsterImage = new Image();
-  monsterImage.onload = function () {
-    // show the monster image
+  monsterImage.onload = function() {
     monsterReady = true;
   };
   monsterImage.src = "images/monster.png";
 }
 
-/** 
- * Setting up our characters.
- * 
- * Note that heroX represents the X position of our hero.
- * heroY represents the Y position.
- * We'll need these values to know where to "draw" the hero.
- * 
- * The same applies to the monster.
- */
-
-let heroX = canvas.width / 2;
-let heroY = canvas.height / 2;
-
-let monsterX = 100;
-let monsterY = 100;
-
-/** 
- * Keyboard Listeners
- * You can safely ignore this part, for now. 
- * 
- * This is just to let JavaScript know when the user has pressed a key.
-*/
-let keysDown = {};
 function setupKeyboardListeners() {
-  // Check for keys pressed where key represents the keycode captured
-  // For now, do not worry too much about what's happening here. 
-  addEventListener("keydown", function (key) {
-    keysDown[key.keyCode] = true;
-  }, false);
-
-  addEventListener("keyup", function (key) {
-    delete keysDown[key.keyCode];
-  }, false);
+  addEventListener(
+    "keydown",
+    function(key) {
+      if (!timeStart) {
+        timeStart = performance.now();
+        console.log(timeStart);
+      }
+      keysDown[key.keyCode] = true;
+    },
+    false
+  );
+
+  addEventListener(
+    "keyup",
+    function(key) {
+      delete keysDown[key.keyCode];
+    },
+    false
+  );
 }
 
+const generateLocation = canvas => {
+  let x = Math.random() * canvas.width + 1;
+  let y = Math.random() * canvas.height + 1;
+  return { x, y };
+};
 
-/**
- *  Update game objects - change player position based on key pressed
- *  and check to see if the monster has been caught!
- *  
- *  If you change the value of 5, the player will move at a different rate.
- */
-let update = function () {
-  if (38 in keysDown) { // Player is holding up key
-    heroY -= 5;
+const update = () => {
+  if (38 in keysDown) {
+    //UP
+    heroY -= 2;
   }
-  if (40 in keysDown) { // Player is holding down key
-    heroY += 5;
+  if (40 in keysDown) {
+    //DOWN
+    heroY += 2;
   }
-  if (37 in keysDown) { // Player is holding left key
-    heroX -= 5;
+  if (37 in keysDown) {
+    //LEFT
+    heroX -= 2;
   }
-  if (39 in keysDown) { // Player is holding right key
-    heroX += 5;
+  if (39 in keysDown) {
+    //RIGHT
+    heroX += 2;
   }
 
-  // Check if player and monster collided. Our images
-  // are about 32 pixels big.
+  let { characterX, characterY } = notExceedCanvasBoundary(heroX, heroY);
+  heroX = characterX;
+  heroY = characterY;
+
   if (
-    heroX <= (monsterX + 32)
-    && monsterX <= (heroX + 32)
-    && heroY <= (monsterY + 32)
-    && monsterY <= (heroY + 32)
+    heroX <= monsterX + 32 &&
+    monsterX <= heroX + 32 &&
+    heroY <= monsterY + 32 &&
+    monsterY <= heroY + 32
   ) {
-    // Pick a new location for the monster.
-    // Note: Change this to place the monster at a new, random location.
-    monsterX = monsterX + 50;
-    monsterY = monsterY + 70;
+    countMonsterCaught++;
+    let { x, y } = generateLocation(canvas); // destructuring
+    monsterX = x; //generate new location for Monster
+    monsterY = y;
+  }
+
+  if (countMonsterCaught > 3) {
+    gameOver();
+  }
+};
+
+const notExceedCanvasBoundary = (characterX, characterY) => {
+  characterX = Math.min(characterX, canvas.width - 40);
+  characterX = Math.max(characterX, 0);
+  characterY = Math.min(characterY, canvas.height - 40);
+  characterY = Math.max(characterY, 0);
+  return { characterX, characterY };
+};
+
+const resetGlobalVariable = () => {
+  heroX = canvas.width / 2;
+  heroY = canvas.height / 2;
+  let { x, y } = generateLocation(canvas); // destructuring
+  monsterX = x; //generate new location for Monster
+  monsterY = y;
+};
+
+const gameOver = () => {
+  //Reset Location of Hero
+  resetGlobalVariable();
+  ctx.textAlign = "center";
+  ctx.fillText(
+    `You Win. Congratulations. Restart (Y/N)`,
+    canvas.width / 2,
+    canvas.height / 2
+  );
+  if (32 in keysDown) {
+    console.log("Push Y");
   }
+  countMonsterCaught = 0;
 };
 
-/**
- * This function, render, runs as often as possible.
- */
-var render = function () {
+const render = function() {
   if (bgReady) {
     ctx.drawImage(bgImage, 0, 0);
   }
@@ -128,27 +147,44 @@ var render = function () {
   if (monsterReady) {
     ctx.drawImage(monsterImage, monsterX, monsterY);
   }
+
+  ctx.font = "15px Arial";
+  ctx.fillText(`heroX: ${heroX} - heroY: ${heroY}`, 50, 100);
+  ctx.fillText(`monsterX: ${monsterX} - monsterY: ${monsterY}`, 100, 200);
+
+  //Display Count of Monster Caught
+  ctx.font = "30px Arial";
+  ctx.fillStyle = "red";
+  ctx.fillText(`Score: ${countMonsterCaught}`, 20, 40);
+
+  //Display Timer
+  ctx.fillText(`Timer: ${timeAllow}`, 360, 40);
 };
 
-/**
- * The main game loop. Most every game will have two distinct parts:
- * update (updates the state of the game, in this case our hero and monster)
- * render (based on the state of our game, draw the right things)
- */
-var main = function () {
-  update(); 
+//The main game loop.
+//update + render
+let main = function() {
+  update();
   render();
-  // Request to do this again ASAP. This is a special method
-  // for web browsers. 
-  requestAnimationFrame(main);
+  if (countMonsterCaught > 2) {
+    gameOver();
+  } else {
+    requestAnimationFrame(main); // Request to do this again ASAP.
+  }
 };
 
-// Cross-browser support for requestAnimationFrame.
-// Safely ignore this line. It's mostly here for people with old web browsers.
 var w = window;
-requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
+requestAnimationFrame =
+  w.requestAnimationFrame ||
+  w.webkitRequestAnimationFrame ||
+  w.msRequestAnimationFrame ||
+  w.mozRequestAnimationFrame;
 
 // Let's play this game!
-loadImages();
-setupKeyboardListeners();
-main();
+gameStart = () => {
+  loadImages();
+  setupKeyboardListeners();
+  main();
+};
+
+gameStart();

index.html

@@ -5,6 +5,13 @@
     <title>Best Game Ever!</title>
   </head>
   <body>
+    <div>
+      <!-- <p>Score: </p><span id='score'></span>
+      <p>Timer: </p><span id='timer'></span> -->
+
+    </div>
+
+
     <script src="game.js"></script>
   </body>
-</html>
+</html>