diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..e0979ba
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "files.autoSave": "afterDelay"
+}
\ No newline at end of file
diff --git a/1 b/1
new file mode 100644
index 0000000..e69de29
diff --git a/README.md b/README.md
index 09929fe..d830af9 100644
--- a/README.md
+++ b/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.
diff --git a/game.js b/game.js
index 20ab4b0..c441916 100644
--- a/game.js
+++ b/game.js
@@ -1,17 +1,8 @@
-/*
- 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;
let ctx;
+let timeStart;
+let timeEnd;
+let totalTime;
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
@@ -24,101 +15,118 @@ let bgImage, heroImage, monsterImage;
function loadImages() {
bgImage = new Image();
- bgImage.onload = function () {
+ bgImage.onload = function() {
// show the background image
bgReady = true;
};
bgImage.src = "images/background.png";
+
heroImage = new Image();
- heroImage.onload = function () {
+ heroImage.onload = function() {
// show the hero image
heroReady = true;
};
heroImage.src = "images/hero.png";
monsterImage = new Image();
- monsterImage.onload = function () {
+ monsterImage.onload = function() {
// show the monster image
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;
+generateLocation = canvas => {
+ let x = Math.random() * canvas.width + 1;
+ let y = Math.random() * canvas.height + 1;
+ return { x, y };
+};
+
let monsterX = 100;
let monsterY = 100;
+let countMonsterCaught = 0;
+
+// Keyboard Listeners
-/**
- * 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
+ );
}
-
-/**
- * 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.
+ // Check if player and monster collided
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;
+ if (countMonsterCaught >= 3) {
+ timeEnd = performance.now();
+ totalTime = timeEnd - timeStart;
+ console.log(`Total Time ${totalTime}`);
+ gameOver();
+ } else {
+ countMonsterCaught++;
+ let { x, y } = generateLocation(canvas); // destructuring
+ monsterX = x; //generate new location for Monster
+ monsterY = y;
+ }
+ if (totalTime) {
+ document.getElementById("timer").innerHTML = `${(totalTime/1000).toFixed(2)} seconds`;
+ }
+ document.getElementById("score").innerHTML = countMonsterCaught;
}
};
-/**
- * This function, render, runs as often as possible.
- */
-var render = function () {
+const gameOver = () => {
+ heroX = canvas.width / 2;
+ heroY = canvas.height / 2;
+ startGame();
+ document.getElementById("score").innerHTML = countMonsterCaught;
+ countMonsterCaught = 0;
+};
+
+const render = function() {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
@@ -131,24 +139,29 @@ var render = function () {
};
/**
- * 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);
+ 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();
\ No newline at end of file
+const startGame = () => {
+ loadImages();
+ setupKeyboardListeners();
+ main();
+};
+
+startGame();
diff --git a/index.html b/index.html
index f780ee0..7fa8429 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,13 @@
Best Game Ever!
+
+
+
-