From e8160a1d2d03fa700c2ee37b7c875335065fbbcc Mon Sep 17 00:00:00 2001 From: adrientremblay Date: Thu, 6 Jan 2022 21:18:48 -0500 Subject: [PATCH 1/5] Half meteorites are now red --- meteorite_fall.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/meteorite_fall.js b/meteorite_fall.js index 3b5d09e..d72f41f 100644 --- a/meteorite_fall.js +++ b/meteorite_fall.js @@ -5,10 +5,10 @@ const CANVAS_HEIGHT = canvas.height; const CANVAS_WIDTH = canvas.width; // PLAYER CONSTANTS const PLAYER_WIDTH = 10; -const PLAYER_HEIGHT = 10; -const PLAYER_SPEED = 10; +const PLAYER_HEIGHT = 10; const PLAYER_SPEED = 10; const PLAYER_COLOR = "rgb(89, 179, 0)"; -const METEORITE_COLOR = "rgb(0, 0, 0)"; +const METEORITE_COLOR_NORMAL = "rgb(0, 0, 0)"; +const METEORITE_COLOR_POINT = "rgb(255, 0, 0)"; const PLAYER_SPAWN_X = CANVAS_WIDTH / 2; const PLAYER_SPAWN_Y = CANVAS_HEIGHT - PLAYER_WIDTH; // METEORITE CONSTANTS @@ -54,7 +54,8 @@ function initializeMeteorites() { let numberOfMeteorites = parseInt(CANVAS_WIDTH / METEORITE_WIDTH); for (arrayIndex = 0, xPositionValue = 0; arrayIndex < numberOfMeteorites; arrayIndex++, xPositionValue += METEORITE_WIDTH) { - meteorites[arrayIndex] = new Meteorite(xPositionValue, METEORITE_SPAWN_Y, METEORITE_HEIGHT, METEORITE_WIDTH, METEORITE_COLOR, METEORITE_FALL_SPEED); + meteoriteColor = Math.random() > 0.5? METEORITE_COLOR_POINT : METEORITE_COLOR_NORMAL; + meteorites[arrayIndex] = new Meteorite(xPositionValue, METEORITE_SPAWN_Y, METEORITE_HEIGHT, METEORITE_WIDTH, meteoriteColor, METEORITE_FALL_SPEED); } } From a84b68f1438158c549424936c3d6863693dc9b63 Mon Sep 17 00:00:00 2001 From: adrientremblay Date: Thu, 6 Jan 2022 21:33:42 -0500 Subject: [PATCH 2/5] Update pause text color and add constants for pause menu --- meteorite_fall.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/meteorite_fall.js b/meteorite_fall.js index e783676..bfc5739 100644 --- a/meteorite_fall.js +++ b/meteorite_fall.js @@ -16,6 +16,11 @@ const METEORITE_FALL_SPEED = 5; const METEORITE_WIDTH = 10; const METEORITE_HEIGHT = 40; const METEORITE_SPAWN_Y = 0; +// PAUSE MENU CONSTANTS +const PAUSE_TEXT_COLOR = "rgb(0, 0, 255)" +const PAUSE_TEXT_FONT = "bold 36px sans-serif"; +const PAUSE_TEXT_ALIGN = "center"; +const PAUSE_TEXT = "Paused"; let meteorites = new Array(); let player = new Player(PLAYER_SPAWN_X, PLAYER_SPAWN_Y, PLAYER_HEIGHT, PLAYER_WIDTH, PLAYER_SPEED, PLAYER_COLOR); @@ -68,10 +73,10 @@ document.addEventListener('keydown', (e) => { if (e.key == " ") { paused = !paused; if (paused) { - context.fillStyle = "red"; - context.font = "bold 36px sans-serif"; - context.textAlign = "center"; - context.fillText("Paused", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2); + context.fillStyle = PAUSE_TEXT_COLOR; + context.font = PAUSE_TEXT_FONT; + context.textAlign = PAUSE_TEXT_ALIGN; + context.fillText(PAUSE_TEXT, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2); } } From a245fac450f6044907cd3f37c2e1a60bbe939f3d Mon Sep 17 00:00:00 2001 From: adrientremblay Date: Thu, 6 Jan 2022 21:47:47 -0500 Subject: [PATCH 3/5] colliding with red meteorites now increases score by 1 --- meteorite_fall.js | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/meteorite_fall.js b/meteorite_fall.js index 5b742b0..da0fb3e 100644 --- a/meteorite_fall.js +++ b/meteorite_fall.js @@ -21,12 +21,12 @@ const PAUSE_TEXT_COLOR = "rgb(0, 0, 255)" const PAUSE_TEXT_FONT = "bold 36px sans-serif"; const PAUSE_TEXT_ALIGN = "center"; const PAUSE_TEXT = "Paused"; - +// GAME VARIABLES let meteorites = new Array(); - let isGameOver = false; let player = new Player(PLAYER_SPAWN_X, PLAYER_SPAWN_Y, PLAYER_HEIGHT, PLAYER_WIDTH, PLAYER_SPEED, PLAYER_COLOR); let paused = false; +let score = 0; function main() { initializeMeteorites(); @@ -48,11 +48,16 @@ function loopGame() { for (i = 0; i < meteorites.length; i++) { if (checkCollision(meteorites[i], player)) { - isGameOver = true; - context.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT); - resetMeteorites(); - alert("Game Over!"); - break; + if (meteorites[i].color == METEORITE_COLOR_POINT) { + score++; + console.log(score); + } else { + isGameOver = true; + context.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT); + resetMeteorites(); + alert("Game Over!"); + break; + } } if (meteorites[i].isFalling == true) { meteorites[i].draw(context); @@ -110,4 +115,4 @@ document.addEventListener('keydown', (e) => { }); // starting game -main(); \ No newline at end of file +main(); From 57142a0a29b71f2a5b604281d71a2846fef244da Mon Sep 17 00:00:00 2001 From: adrientremblay Date: Thu, 6 Jan 2022 22:01:40 -0500 Subject: [PATCH 4/5] score label --- meteorite_fall.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/meteorite_fall.js b/meteorite_fall.js index da0fb3e..6dacc27 100644 --- a/meteorite_fall.js +++ b/meteorite_fall.js @@ -16,11 +16,6 @@ const METEORITE_FALL_SPEED = 5; const METEORITE_WIDTH = 10; const METEORITE_HEIGHT = 40; const METEORITE_SPAWN_Y = 0; -// PAUSE MENU CONSTANTS -const PAUSE_TEXT_COLOR = "rgb(0, 0, 255)" -const PAUSE_TEXT_FONT = "bold 36px sans-serif"; -const PAUSE_TEXT_ALIGN = "center"; -const PAUSE_TEXT = "Paused"; // GAME VARIABLES let meteorites = new Array(); let isGameOver = false; @@ -70,6 +65,12 @@ function loopGame() { } player.draw(context); + + context.fillStyle = "black"; + context.font = "12px sans-serif"; + context.textAlign = "start"; + context.textBaseline = "top"; + context.fillText("score: " + score, 10, 10); } // fill meteorites array with all possible meteorites in the canvas width @@ -101,10 +102,11 @@ document.addEventListener('keydown', (e) => { if (e.key == " ") { paused = !paused; if (paused) { - context.fillStyle = PAUSE_TEXT_COLOR; - context.font = PAUSE_TEXT_FONT; - context.textAlign = PAUSE_TEXT_ALIGN; - context.fillText(PAUSE_TEXT, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2); + context.fillStyle = "rgb(0, 0, 255)"; + context.font = "bold 36px sans-serif"; + context.textAlign = "center"; + context.textBaseline = "alphabetic"; + context.fillText("Paused", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2); } } From 6c11b2fd1962cbeb04dd4f0baabcec63abd1870f Mon Sep 17 00:00:00 2001 From: adrientremblay Date: Thu, 6 Jan 2022 22:13:30 -0500 Subject: [PATCH 5/5] some minor whitespace changes --- meteorite_fall.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/meteorite_fall.js b/meteorite_fall.js index 6dacc27..c8ebeba 100644 --- a/meteorite_fall.js +++ b/meteorite_fall.js @@ -5,7 +5,8 @@ const CANVAS_HEIGHT = canvas.height; const CANVAS_WIDTH = canvas.width; // PLAYER CONSTANTS const PLAYER_WIDTH = 10; -const PLAYER_HEIGHT = 10; const PLAYER_SPEED = 10; +const PLAYER_HEIGHT = 10; +const PLAYER_SPEED = 10; const PLAYER_COLOR = "rgb(89, 179, 0)"; const METEORITE_COLOR_NORMAL = "rgb(0, 0, 0)"; const METEORITE_COLOR_POINT = "rgb(255, 0, 0)"; @@ -45,7 +46,6 @@ function loopGame() { if (checkCollision(meteorites[i], player)) { if (meteorites[i].color == METEORITE_COLOR_POINT) { score++; - console.log(score); } else { isGameOver = true; context.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT); @@ -78,7 +78,7 @@ function initializeMeteorites() { let numberOfMeteorites = parseInt(CANVAS_WIDTH / METEORITE_WIDTH); for (arrayIndex = 0, xPositionValue = 0; arrayIndex < numberOfMeteorites; arrayIndex++, xPositionValue += METEORITE_WIDTH) { - meteoriteColor = Math.random() > 0.5? METEORITE_COLOR_POINT : METEORITE_COLOR_NORMAL; + meteoriteColor = Math.random() > 0.5 ? METEORITE_COLOR_POINT : METEORITE_COLOR_NORMAL; meteorites[arrayIndex] = new Meteorite(xPositionValue, METEORITE_SPAWN_Y, METEORITE_HEIGHT, METEORITE_WIDTH, meteoriteColor, METEORITE_FALL_SPEED); } }