Completed the Snake Game on web in html, css, js.

TheVinayakGore · Aug 5, 2024 · 7784f68 · 7784f68
1 parent 508599c
commit 7784f68
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 19 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/style.css b/css/style.css
@@ -4,7 +4,9 @@
 }
 
 .body {
+  position: fixed;
   min-height: 100vh;
+  width: 100%;
   background-size: 100vw 100vh;
   display: flex;
   flex-direction: column;
@@ -13,6 +15,22 @@
   background: url(../img/bg.jpg) no-repeat center;
 }
 
+#hiscoreBox {
+  position: absolute;
+  top: 3rem;
+  right: 5.5rem;
+  font-size: 2rem;
+  font-weight: 800;
+}
+
+#scoreBox {
+  position: absolute;
+  top: 5.5rem;
+  right: 10rem;
+  font-size: 2rem;
+  font-weight: 800;
+}
+
 #board {
   background: linear-gradient(rgb(187, 255, 187), rgb(255, 255, 134));
   width: 90vmin;
@@ -25,13 +43,19 @@
 }
 
 .head {
-  background-color: blue;
+  background: linear-gradient(to right, rgb(198, 145, 255), rgb(255, 0, 136));
+  border: .25vmin solid black;
+  border-radius: 10px;
 }
 
 .snake {
-  background-color: black;
+  background: linear-gradient(to right, green, rgb(0, 232, 0));
+  border: .25vmin solid black;
+  border-radius: 10px;
 }
 
 .food {
-  background-color: red;
+  background: linear-gradient(to right, orange, yellow);
+  border: .25vmin solid black;
+  border-radius: 2rem;
 }
diff --git a/img/.DS_Store b/img/.DS_Store
diff --git a/img/favicon.png b/img/favicon.png
diff --git a/index.html b/index.html
@@ -4,10 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Snake Mania - Online Snake Ground Game</title>
+    <link rel="icon" type="image/png" href="/img/favicon.png" />
     <link rel="stylesheet" href="css/style.css" />
   </head>
   <body>
     <div class="body">
+      <div id="scoreBox">Score: 0</div>
+      <div id="hiscoreBox">hiscore: 0</div>
       <div id="board"></div>
     </div>
   </body>

diff --git a/js/index.js b/js/index.js
@@ -1,10 +1,11 @@
 // Game Constants & Variables
-let direction = { x: 0, y: 0 };
+let inputDir = { x: 0, y: 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 = 2;
+let speed = 10;
+let score = 0;
 let lastPaintTime = 0;
 let snakeArr = [{ x: 13, y: 15 }];
 food = { x: 13, y: 10 };
@@ -20,27 +21,56 @@ function main(ctime) {
   gameEngine();
 }
 
-function isCollide(sarr){
-  return false;
+function isCollide(snake) {
+  // If you bumped into yourself
+  for (let i = 1; i < snakeArr.length; i++) {
+    if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
+      return true;
+    }
+  }
+  // If you bump into the wall
+  if (snake[0].x >= 18 || snake[0].x <= 0 || snake[0].y >= 18 || snake[0].y <= 0) {
+    return true;
+  }
 }
 
 function gameEngine() {
   // part 1 : Updating the snakearr & food
-  if(isCollide(snakeArr)){
+  musicSound.play();
+  if (isCollide(snakeArr)) {
     gameOverSound.play();
     musicSound.pause();
-    inputDir = { x: 0, y: 0};
+    inputDir = { x: 0, y: 0 };
     alert("Game Over. Press any key to play again!");
-    snakeArr = [{x:13 , y:15}];
+    snakeArr = [{ x: 13, y: 15 }];
     musicSound.play();
     score = 0;
   }
 
   // If you have eaten the food, increment the score and regenrate the food
   if (snakeArr[0].y === food.y && snakeArr[0].x === food.x) {
-    snakeArr.unshift({x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y});
+    foodSound.play();
+    score += 1;
+    if (score > hiscoreval) {
+      hiscoreval = score;
+      localStorage.setItem("hiscore", JSON.stringify(hiscoreval));
+      hiscoreBox.innerHTML = "hiscore: " + hiscoreval;
+    }
+    scoreBox.innerHTML = "Score: " + score
+    snakeArr.unshift({ x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y });
+    let a = 2;
+    let b = 16;
+    food = { x: Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }
+  }
+
+  // Moving the snake
+  for (let i = snakeArr.length - 2; i >= 0; i--) {
+    snakeArr[i + 1] = { ...snakeArr[i] };
   }
 
+  snakeArr[0].x += inputDir.x;
+  snakeArr[0].y += inputDir.y;
+
   // part 2 : Display the snake & food
   // Display the snake
   board.innerHTML = "";
@@ -65,30 +95,40 @@ function gameEngine() {
 }
 
 // Main logic starts from here
+let hiscore = localStorage.getItem("hiscore");
+if (hiscore === null) {
+  hiscoreval = 0;
+  localStorage.setItem("hiscore", JSON.stringify(hiscoreval));
+}
+else {
+  hiscoreval = JSON.parse(hiscore);
+  hiscoreBox.innerHTML = "hiscore: " + hiscore;
+}
+
 window.requestAnimationFrame(main);
 window.addEventListener("keydown", (e) => {
   inputDir = { x: 0, y: 1 }; // start the game
   moveSound.play();
   switch (e.key) {
     case "ArrowUp":
       console.log("ArrowUp");
-      input.x = 0;
-      input.y = 1;
+      inputDir.x = 0;
+      inputDir.y = -1;
       break;
     case "ArrowDown":
       console.log("ArrowDown");
-      input.x = 0;
-      input.y = -1;
+      inputDir.x = 0;
+      inputDir.y = 1;
       break;
     case "ArrowLeft":
       console.log("ArrowLeft");
-      input.x = -1;
-      input.y = 0;
+      inputDir.x = -1;
+      inputDir.y = 0;
       break;
     case "ArrowRight":
       console.log("ArrowRight");
-      input.x = 1;
-      input.y = 0;
+      inputDir.x = 1;
+      inputDir.y = 0;
       break;
 
     default: