Featured added Score and Max Score

index.js

@@ -1,80 +1,74 @@
-let board = document.getElementById('board')
-let scoreCont = document.getElementById('score')
+let board = document.getElementById('board');
+let scoreCont = document.getElementById('score');
 let maxScoreCont = document.getElementById('maxScoreCont');
 let HeadEle;
-// console.log(HeadEle);
 let inputDir = { x: 0, y: 0 };
+let score = 0;
+let highestScore = localStorage.getItem('highestScore') || 0;
 
 const foodSound = new Audio('music/food.mp3');
 const gameOverSound = new Audio('music/gameOver.mp3');
 const moveSound = new Audio('music/move.mp3');
 const musicSound = new Audio('music/music.mp3');
 let speed = 5;
 let lastPaintTime = 0;
-let snakeArr = [
-    { x: 13, y: 15 }
-]
-let food = {
-    x: 6, y: 7
+let snakeArr = [{ x: 13, y: 15 }];
+let food = { x: 6, y: 7 };
+
+const convertDate = (inputDate) => {
+    const date = new Date(inputDate);
+    const day = date.getUTCDate().toString().padStart(2, "0");
+    const month = (date.getUTCMonth() + 1).toString().padStart(2, "0");
+    const year = date.getUTCFullYear().toString();
+    return day + "/" + month + "/" + year;
 };
 
-// Game Functions
 function main(ctime) {
     window.requestAnimationFrame(main);
     if ((ctime - lastPaintTime) / 1000 < (1 / speed)) {
         return;
     }
-    // console.log(ctime);
     lastPaintTime = ctime;
     gameEngine();
-    // console.log(ctime);
 }
+
 function isCollide(snake) {
-    // return false;
-    //if you into yourself
-
     if (snake[0].x > 18 || snake[0].x < 0 || snake[0].y > 18 || snake[0].y < 0) {
         return true;
     }
 }
+
 function gameEngine() {
-    //part1: updating the snake array and food
     if (isCollide(snakeArr)) {
         gameOverSound.play();
         musicSound.pause();
         inputDir = { x: 0, y: 0 };
         alert("Game over. Press any key to play again");
         snakeArr = [{ x: 13, y: 15 }];
-        // musicSound.play();
+        score=0;
+        updateScoreDisplay();
     }
 
-    //IF you have eaten the food, increment the score and regenerate the food
     if (snakeArr[0].y === food.y && snakeArr[0].x === food.x) {
-        // console.log("food")
         foodSound.play();
-
         snakeArr.unshift({ x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y });
-        // console.log(snakeArr)
         let a = 2;
         let b = 16;
-        food = { x: 2 + Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }
+        food = { x: 2 + Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) };
+        score++;
+        if (score > highestScore) {
+            highestScore = score;
+            localStorage.setItem('highestScore', highestScore);
+        }
+        updateScoreDisplay();
     }
 
-    //Moving the snake
-    // console.log("-----")
-    // console.log(snakeArr.l)
     for (let i = snakeArr.length - 2; i >= 0; i--) {
-        // const element = array[i];
-        // console.log("hello");
         snakeArr[i + 1] = { ...snakeArr[i] };
-        // console.log(snakeArr[i + 1].x);
-
     }
     snakeArr[0].x += inputDir.x;
     snakeArr[0].y += inputDir.y;
 
-    //part2: display the snake and food
-    //display the snake
     board.innerHTML = "";
     snakeArr.forEach((e, index) => {
         snakeElement = document.createElement('div');
@@ -86,8 +80,6 @@ function gameEngine() {
             eyes2 = document.createElement('div');
             eyes2.classList.add('eyes');
             snakeElement.classList.add('head');
-            // HeadEle = document.querySelectorAll('.head');
-            // console.log(e.x, e.y, typeof e.x, typeof e.y)
             if (inputDir.x === 0 && inputDir.y === -1) {
                 snakeElement.style.setProperty('--top', '15%');
                 snakeElement.style.setProperty('--bottom', '75%');
@@ -126,45 +118,28 @@ function gameEngine() {
         }
     })
 
-    //part2: display the snake
-
     foodElement = document.createElement('div');
     foodElement.style.gridRowStart = food.y;
     foodElement.style.gridColumnStart = food.x;
     foodElement.classList.add('food');
     board.appendChild(foodElement);
-
 }
 
-
-
-
-
-
-
-
-
-
-//Main logic starts here
 window.requestAnimationFrame(main);
 window.addEventListener('keydown', e => {
-    // inputDir = { x: 0, y: 1 } //start the game
     moveSound.play();
     switch (e.key) {
         case "ArrowUp":
             inputDir.x = 0;
             inputDir.y = -1;
-
             break;
         case "ArrowDown":
             inputDir.x = 0;
             inputDir.y = 1;
-
             break;
         case "ArrowLeft":
             inputDir.x = -1;
             inputDir.y = 0;
-
             break;
         case "ArrowRight":
             inputDir.x = 1;
@@ -175,3 +150,7 @@ window.addEventListener('keydown', e => {
     }
 });
 
+const updateScoreDisplay = () => {
+    scoreCont.textContent = `Score: ${score}`;
+    maxScoreCont.textContent = `Highest Score: ${highestScore}`;
+};