TheEastCode · f-taveras · Nov 13, 2023 · Nov 14, 2023 · Nov 14, 2023
diff --git a/ClassicSnakeGame b/ClassicSnakeGame
diff --git a/css/game.css 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);
+  }
diff --git a/css/home.css b/css/home.css
diff --git a/css/score.css b/css/score.css
diff --git 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);
-}

diff --git a/index.html b/index.html
@@ -5,9 +5,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Classic Snake Game</title>
     <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="css/game.css">
 </head>
 <body>
     <header>
+      <nav>
+        <ul class="nav-ul">
+          <li class="nav-link"><a href="index.html"></a> Home</li>
+          <li class="nav-link">Game</li>
+          <li class="nav-link">Scores</li>
+        </ul>
+      </nav>
       <h1 class="main-heading">Welcome To <em class="name-em">The EastCode</em>'s Classic Snake Game</h1>
     </header>
 

diff --git a/js/app.js b/js/app.js
@@ -1,5 +1,9 @@
+/* GLOBAL VARS */
+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;
@@ -12,27 +16,46 @@ 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);
+
 
     // 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() {
     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 */
 function update() {
     // Move the snake
     let newHead = { x: snake[0].x, y: snake[0].y };
@@ -55,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();
@@ -63,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;
     }
@@ -72,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;
         }
@@ -85,20 +109,34 @@ function update() {
     draw();
 }
 
+/* PAUSE & RESET GAME */
 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();
-// setInterval(update, 100);
 
 function startGame() {
   if (!nIntervId) {
     nIntervId = setInterval(update, 100);
   }
+
 }
 
 function stopGame() {
@@ -109,7 +147,7 @@ function stopGame() {
 }
 
 
-// Handle arrow key controls
+// HANDLE ARROW KEY CONTROLS
 document.addEventListener("keydown", (e) => {
     switch (e.key) {
         case "ArrowUp":
@@ -125,4 +163,30 @@ document.addEventListener("keydown", (e) => {
             direction = "right";
             break;
     }
-});
+});
+
+
+
+
+// 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) {
+    // 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}`);
+//});
diff --git a/js/scores.js b/js/scores.js
diff --git a/pages/game.html b/pages/game.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Classic Snake Game</title>
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="css/game.css">
+</head>
+<body>
+    <header>
+      <h1 class="main-heading">Welcome To <em class="name-em">The EastCode</em>'s Classic Snake Game</h1>
+    </header>
+
+    <main>
+      <canvas id="gameCanvas" width="800" height="800"></canvas>
+      <div class="controls">
+        <button class="start" id="start">START</button>
+        <button class="stop" id="reset">STOP</button>
+      </div>
+    </main>
+
+    <footer>
+
+    </footer>
+    <script src="js/app.js"></script>
+</body>
+</html>
diff --git a/pages/scores.html b/pages/scores.html