From 8e2c29f4bfd434840cc0056107fe659e42bfe36f Mon Sep 17 00:00:00 2001 From: Ekow Yawson Date: Mon, 13 Nov 2023 13:48:36 -0500 Subject: [PATCH 1/3] Updated the file structure and and made minor edits to the javascript code. --- css/game.css | 52 +++++++++++++++++++++++++++++++++++++++++++++++ css/home.css | 0 css/score.css | 0 css/styles.css | 51 ---------------------------------------------- index.html | 8 ++++++++ js/app.js | 34 +++++++++++++++++++++++++------ js/scores.js | 0 pages/game.html | 28 +++++++++++++++++++++++++ pages/scores.html | 0 9 files changed, 116 insertions(+), 57 deletions(-) create mode 100644 css/game.css create mode 100644 css/home.css create mode 100644 css/score.css create mode 100644 js/scores.js create mode 100644 pages/game.html create mode 100644 pages/scores.html diff --git a/css/game.css b/css/game.css new file mode 100644 index 0000000..987d622 --- /dev/null +++ b/css/game.css @@ -0,0 +1,52 @@ +body { + display: flex; + flex-direction: column; + height: 100vh; + margin: 0; + background-color: #232323; + font-family: monospace; + } + + header { + width: 100%; + color: #353535; + background-color: #00ff00b5; + text-align: center; + box-shadow: + inset 0 -3em 3em rgba(0, 200, 0, 0.3), + 0 0 0 2px white, + 0.3em 0.3em 1em rgba(200, 0, 0, 0.6); + } + + main { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 90vh; + } + + button { + background-color: rgb(157, 255, 127); + height: 50px; + width: 100px; + border-radius: 10px; + padding: 10px; + margin: 10px; + box-shadow: 5px 5px 5px rgb(92, 91, 91); + cursor: pointer; + } + + footer { + background-color: #00ff00ae; + } + + canvas { + border: 1px solid #fff; + background-color: #000; + margin-top: 5vh; + } + + em.name-em { + color: rgb(120, 18, 156); + } \ No newline at end of file diff --git a/css/home.css b/css/home.css new file mode 100644 index 0000000..e69de29 diff --git a/css/score.css b/css/score.css new file mode 100644 index 0000000..e69de29 diff --git a/css/styles.css b/css/styles.css index 31adaf1..e69de29 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,51 +0,0 @@ -body { - display: flex; - flex-direction: column; - height: 100vh; - margin: 0; - background-color: #232323; - font-family: monospace; -} - -header { - width: 100%; - color: #353535; - background-color: #00ff00b5; - text-align: center; - box-shadow: - inset 0 -3em 3em rgba(0, 200, 0, 0.3), - 0 0 0 2px white, - 0.3em 0.3em 1em rgba(200, 0, 0, 0.6); -} - -main { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 80vh; -} - -button { - background-color: rgb(157, 255, 127); - height: 50px; - width: 100px; - border-radius: 10px; - padding: 10px; - margin: 10px; - box-shadow: 5px 5px 5px rgb(92, 91, 91); - cursor: pointer; -} - -footer { - background-color: #00ff00ae; -} - -canvas { - border: 1px solid #fff; - background-color: #000; -} - -em.name-em { - color: rgb(120, 18, 156); -} \ No newline at end of file diff --git a/index.html b/index.html index 6271c91..9a52e64 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,17 @@ Classic Snake Game +
+

Welcome To The EastCode's Classic Snake Game

diff --git a/js/app.js b/js/app.js index 0f5d8ce..6cd5b82 100644 --- a/js/app.js +++ b/js/app.js @@ -1,3 +1,5 @@ +/* GLOBAL VARS */ +const cl = (input) => {console.log(input)}; const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); @@ -12,7 +14,7 @@ let snake = [{ x: 10, y: 10 }]; let food = { x: 0, y: 0 }; let direction = "right"; - +/* FUNCTION TO DRAW FOOD AND SNAKE */ function draw() { // Clear the canvas ctx.clearRect(0, 0, canvasSize, canvasSize); @@ -20,12 +22,21 @@ function draw() { // Draw the snake ctx.fillStyle = "#00FF00"; for (let i = 0; i < snake.length; i++) { - ctx.fillRect(snake[i].x * boxSize, snake[i].y * boxSize, boxSize, boxSize); + const isHead = i === 0; + ctx.fillStyle = isHead ? "#00FF00" : "#008000"; //Head is green, body is dark green + ctx.beginPath(); + ctx.arc((snake[i].x + 0.5) * boxSize, (snake[i].y + 0.5) * boxSize, boxSize / 2, 0, 2 * Math.PI); + ctx.fill(); + ctx.closePath(); + //ctx.fillRect(snake[i].x * boxSize, snake[i].y * boxSize, boxSize, boxSize); } // Draw the food ctx.fillStyle = "#FF0000"; - ctx.fillRect(food.x * boxSize, food.y * boxSize, boxSize, boxSize); + ctx.beginPath(); + ctx.arc((food.x + 0.5) * boxSize, (food.y + 0.5) * boxSize, boxSize / 2, 0, 2 * Math.PI); + ctx.fill(); + ctx.closePath(); } function generateFood() { @@ -33,6 +44,7 @@ function generateFood() { food.y = Math.floor(Math.random() * (canvasSize / boxSize)); } +/* FUNCTION TO UPDATE SNAKE MOVEMENT AND UPDATE FOOD */ function update() { // Move the snake let newHead = { x: snake[0].x, y: snake[0].y }; @@ -85,6 +97,7 @@ function update() { draw(); } +/* PAUSE & RESET GAME */ function resetGame() { snake = [{ x: 10, y: 10 }]; generateFood(); @@ -93,7 +106,6 @@ function resetGame() { // Generate initial food and start the game loop generateFood(); -// setInterval(update, 100); function startGame() { if (!nIntervId) { @@ -109,7 +121,7 @@ function stopGame() { } -// Handle arrow key controls +// HANDLE ARROW KEY CONTROLS document.addEventListener("keydown", (e) => { switch (e.key) { case "ArrowUp": @@ -125,4 +137,14 @@ document.addEventListener("keydown", (e) => { direction = "right"; break; } -}); \ No newline at end of file +}); + +/* TEST METHODS/FUNCTIONS */ +// Add a click event listener to the canvas +//canvas.addEventListener("click", function (e) { + // Get the coordinates of the click relative to the canvas + //var x = e.clientX - canvas.getBoundingClientRect().left; + //var y = e.clientY - canvas.getBoundingClientRect().top; + // Log the coordinates to the console + //cl(`Clicked at coordinates: X=${x}, Y=${y}`); +//}); \ No newline at end of file diff --git a/js/scores.js b/js/scores.js new file mode 100644 index 0000000..e69de29 diff --git a/pages/game.html b/pages/game.html new file mode 100644 index 0000000..2302c20 --- /dev/null +++ b/pages/game.html @@ -0,0 +1,28 @@ + + + + + + Classic Snake Game + + + + +
+

Welcome To The EastCode's Classic Snake Game

+
+ +
+ +
+ + +
+
+ + + + + \ No newline at end of file diff --git a/pages/scores.html b/pages/scores.html new file mode 100644 index 0000000..e69de29 From 1c8ce6d0fc0c1b267da9cb05c5c991fb9046e11f Mon Sep 17 00:00:00 2001 From: "Felix A. Taveras" Date: Mon, 13 Nov 2023 23:48:36 -0500 Subject: [PATCH 2/3] added scores --- ClassicSnakeGame | 1 + index.html | 5 +++++ js/app.js | 46 ++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 50 insertions(+), 2 deletions(-) create mode 160000 ClassicSnakeGame diff --git a/ClassicSnakeGame b/ClassicSnakeGame new file mode 160000 index 0000000..e4a4417 --- /dev/null +++ b/ClassicSnakeGame @@ -0,0 +1 @@ +Subproject commit e4a44177bbe3204cc249714266e236277bceb0f9 diff --git a/index.html b/index.html index 9a52e64..7994edd 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,10 @@

Welcome To The EastCode's Clas
+
+
Score: 0
+
High Score: 0
+
@@ -30,6 +34,7 @@

Welcome To The EastCode's Clas
+ \ No newline at end of file diff --git a/js/app.js b/js/app.js index 6cd5b82..ab42d84 100644 --- a/js/app.js +++ b/js/app.js @@ -2,6 +2,8 @@ const cl = (input) => {console.log(input)}; const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); +let currentScore = 0; +let highScore = localStorage.getItem('highScore') || 0; const boxSize = 20; const canvasSize = 800; @@ -18,6 +20,7 @@ let direction = "right"; function draw() { // Clear the canvas ctx.clearRect(0, 0, canvasSize, canvasSize); + // Draw the snake ctx.fillStyle = "#00FF00"; @@ -42,6 +45,14 @@ function draw() { function generateFood() { food.x = Math.floor(Math.random() * (canvasSize / boxSize)); food.y = Math.floor(Math.random() * (canvasSize / boxSize)); + + + if (currentScore > highScore){ + highScore = currentScore; + localStorage.setItem('highScore', highScore); + updateHighScore(); + } + updateScore(); } /* FUNCTION TO UPDATE SNAKE MOVEMENT AND UPDATE FOOD */ @@ -67,6 +78,7 @@ function update() { if (newHead.x === food.x && newHead.y === food.y) { snake.unshift({ x: food.x, y: food.y }); generateFood(); + currentScore += 5; } else { // Remove the tail if no collision with food snake.pop(); @@ -75,7 +87,7 @@ function update() { // Check for collision with walls if (newHead.x < 0 || newHead.x * boxSize >= canvasSize || newHead.y < 0 || newHead.y * boxSize >= canvasSize) { // Game over - alert("Game Over!"); + alert(`Game Over! Your score ${currentScore}`); resetGame(); return; } @@ -84,7 +96,7 @@ function update() { for (let i = 1; i < snake.length; i++) { if (newHead.x === snake[i].x && newHead.y === snake[i].y) { // Game over - alert("Game Over!"); + alert(`Game Over! Your score ${currentScore}`); resetGame(); return; } @@ -102,8 +114,21 @@ function resetGame() { snake = [{ x: 10, y: 10 }]; generateFood(); direction = "right"; + currentScore = 0; + + updateScore(); + updateHighScore(); +} +function initHighScore() { + const storedHighScore = localStorage.getItem('highScore'); + if (storedHighScore) { + highScore = parseInt(storedHighScore); + updateHighScore(); + } } +// Generate initial food and start the game loop +initHighScore(); // Generate initial food and start the game loop generateFood(); @@ -111,6 +136,7 @@ function startGame() { if (!nIntervId) { nIntervId = setInterval(update, 100); } + } function stopGame() { @@ -139,6 +165,22 @@ document.addEventListener("keydown", (e) => { } }); + + + +// updates Scores and High Scores + +function updateHighScore(){ + document.getElementById('high-score').textContent = `High Score ${highScore}`; +} + +function updateScore(){ + document.getElementById('score').textContent = `Score: ${currentScore}`; +} + + + + /* TEST METHODS/FUNCTIONS */ // Add a click event listener to the canvas //canvas.addEventListener("click", function (e) { From 2cc1273b7e2d80296668dc517c8a7242aa7eb68d Mon Sep 17 00:00:00 2001 From: "Felix A. Taveras" Date: Tue, 14 Nov 2023 00:55:07 -0500 Subject: [PATCH 3/3] added score and high score --- index.html | 5 ----- 1 file changed, 5 deletions(-) diff --git a/index.html b/index.html index 7994edd..9a52e64 100644 --- a/index.html +++ b/index.html @@ -20,10 +20,6 @@

Welcome To The EastCode's Clas
-
-
Score: 0
-
High Score: 0
-
@@ -34,7 +30,6 @@

Welcome To The EastCode's Clas
- \ No newline at end of file