From df117776cbf3c9e23ae37dec3e31b6ff55e96b9c Mon Sep 17 00:00:00 2001 From: phanatuan Date: Thu, 7 Mar 2019 15:18:39 +0700 Subject: [PATCH 1/6] Write function to generate random location x and y, and run function to set x and y to Monster location (#1) --- .vscode/settings.json | 3 +++ game.js | 47 +++++++++++++++---------------------------- index.html | 2 +- 3 files changed, 20 insertions(+), 32 deletions(-) create mode 100644 .vscode/settings.json 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/game.js b/game.js index 20ab4b0..acec5b3 100644 --- a/game.js +++ b/game.js @@ -1,9 +1,3 @@ -/* - 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. @@ -57,19 +51,17 @@ function loadImages() { 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; -/** - * 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); @@ -79,25 +71,18 @@ function setupKeyboardListeners() { }, 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 () { +const update = () => { if (38 in keysDown) { // Player is holding up key - heroY -= 5; + heroY -= 2; } if (40 in keysDown) { // Player is holding down key - heroY += 5; + heroY += 2; } if (37 in keysDown) { // Player is holding left key - heroX -= 5; + heroX -= 2; } if (39 in keysDown) { // Player is holding right key - heroX += 5; + heroX += 2; } // Check if player and monster collided. Our images @@ -110,8 +95,9 @@ let update = function () { ) { // 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; + let { x, y } = generateLocation(canvas); // destructuring + monsterX = x; + monsterY = y; } }; @@ -138,9 +124,8 @@ var render = function () { var 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. diff --git a/index.html b/index.html index f780ee0..2923081 100644 --- a/index.html +++ b/index.html @@ -7,4 +7,4 @@ - \ No newline at end of file + From 5ffedbb5d0f0b6e69f52b45c82dd974b5ca13b70 Mon Sep 17 00:00:00 2001 From: Phan Anh Tuan Date: Thu, 7 Mar 2019 15:26:31 +0700 Subject: [PATCH 2/6] Add Scoring when monster is caught --- game.js | 42 +++++++----------------------------------- index.html | 6 ++++++ 2 files changed, 13 insertions(+), 35 deletions(-) diff --git a/game.js b/game.js index 20ab4b0..41e83ad 100644 --- a/game.js +++ b/game.js @@ -1,15 +1,3 @@ -/* - 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; @@ -44,28 +32,17 @@ function loadImages() { 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; +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 @@ -79,13 +56,6 @@ function setupKeyboardListeners() { }, 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; @@ -110,6 +80,8 @@ let update = function () { ) { // Pick a new location for the monster. // Note: Change this to place the monster at a new, random location. + countMonsterCaught++; + document.getElementById('score').innerHTML = countMonsterCaught; monsterX = monsterX + 50; monsterY = monsterY + 70; } diff --git a/index.html b/index.html index f780ee0..3b867b4 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,12 @@ Best Game Ever! +
+

Score:

+ +
+ + \ No newline at end of file From 3e19e72e485c07d45d27f92799cfe2841184d7f7 Mon Sep 17 00:00:00 2001 From: phanatuan Date: Thu, 7 Mar 2019 16:04:49 +0700 Subject: [PATCH 3/6] Write a gameOver function to re-start the game once the monster caught number is up to 20 (#2) --- game.js | 119 ++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 73 insertions(+), 46 deletions(-) diff --git a/game.js b/game.js index 8d206e5..234db4f 100644 --- a/game.js +++ b/game.js @@ -3,7 +3,6 @@ Here, we create and add our "canvas" to the page. We also load all of our images. */ - let canvas; let ctx; @@ -18,20 +17,21 @@ 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; }; @@ -41,67 +41,86 @@ function loadImages() { 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} -} +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 let keysDown = {}; function setupKeyboardListeners() { - addEventListener("keydown", function (key) { - keysDown[key.keyCode] = true; - }, false); - - addEventListener("keyup", function (key) { - delete keysDown[key.keyCode]; - }, false); + addEventListener( + "keydown", + function(key) { + keysDown[key.keyCode] = true; + }, + false + ); + + addEventListener( + "keyup", + function(key) { + delete keysDown[key.keyCode]; + }, + false + ); } const update = () => { - if (38 in keysDown) { // Player is holding up key + if (38 in keysDown) { + //UP heroY -= 2; } - if (40 in keysDown) { // Player is holding down key + if (40 in keysDown) { + //DOWN heroY += 2; } - if (37 in keysDown) { // Player is holding left key + if (37 in keysDown) { + //LEFT heroX -= 2; } - if (39 in keysDown) { // Player is holding right key + 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. -countMonsterCaught++; - document.getElementById('score').innerHTML = countMonsterCaught; - let { x, y } = generateLocation(canvas); // destructuring - monsterX = x; - monsterY = y; + if (countMonsterCaught >= 5) { + gameOver(); + } else { + countMonsterCaught++; + let { x, y } = generateLocation(canvas); // destructuring + monsterX = x; //generate new location for Monster + monsterY = y; + } + + 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); } @@ -114,23 +133,31 @@ var render = function () { }; /** - * The main game loop. Most every game will have two distinct parts: + * The main game loop. * 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(); - render(); - requestAnimationFrame(main); // Request to do this again ASAP. +var main = function() { + update(); + render(); + 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(); From dcc1da7c1b2f651603e1c08030021a656738d4ac Mon Sep 17 00:00:00 2001 From: Phan Anh Tuan Date: Thu, 7 Mar 2019 16:08:43 +0700 Subject: [PATCH 4/6] Pulling latest change to the master --- 1 | 0 game.js | 3 --- 2 files changed, 3 deletions(-) create mode 100644 1 diff --git a/1 b/1 new file mode 100644 index 0000000..e69de29 diff --git a/game.js b/game.js index 8d206e5..6e68f02 100644 --- a/game.js +++ b/game.js @@ -98,9 +98,6 @@ countMonsterCaught++; } }; -/** - * This function, render, runs as often as possible. - */ var render = function () { if (bgReady) { ctx.drawImage(bgImage, 0, 0); From 426c25e65de840c00b3c7b9d50fa643c0fd89151 Mon Sep 17 00:00:00 2001 From: Phan Anh Tuan Date: Thu, 7 Mar 2019 16:41:38 +0700 Subject: [PATCH 5/6] Adding the timer and display it to the HTML --- game.js | 28 ++++++++++++++++------------ index.html | 5 +++-- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/game.js b/game.js index 234db4f..c441916 100644 --- a/game.js +++ b/game.js @@ -1,10 +1,8 @@ -/* 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"); @@ -58,6 +56,10 @@ function setupKeyboardListeners() { addEventListener( "keydown", function(key) { + if (!timeStart) { + timeStart = performance.now(); + console.log(timeStart); + } keysDown[key.keyCode] = true; }, false @@ -98,8 +100,10 @@ const update = () => { monsterY <= heroY + 32 ) { // Pick a new location for the monster. - // Note: Change this to place the monster at a new, random location. - if (countMonsterCaught >= 5) { + if (countMonsterCaught >= 3) { + timeEnd = performance.now(); + totalTime = timeEnd - timeStart; + console.log(`Total Time ${totalTime}`); gameOver(); } else { countMonsterCaught++; @@ -107,7 +111,9 @@ const update = () => { 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; } }; @@ -134,11 +140,9 @@ const render = function() { /** * The main game loop. - * 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) - */ + * update + render */ -var main = function() { +let main = function() { update(); render(); requestAnimationFrame(main); // Request to do this again ASAP. diff --git a/index.html b/index.html index 4728e6f..7fa8429 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,9 @@
-

Score:

- +

Score:

+

Timer:

+
From ccc6bafb54c2d3552f993f4731d91de571676c58 Mon Sep 17 00:00:00 2001 From: Phan Anh Tuan Date: Thu, 7 Mar 2019 16:42:24 +0700 Subject: [PATCH 6/6] Update Readme to reflect my progress on the game --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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.