why is one working and the other isn't

secret/snake/game.js

@@ -1,156 +1,95 @@
-// testing from old tutorial
-
 "use strict";
 
 const cvs = document.getElementById("snake");
 const ctx = cvs.getContext("2d");
+const box = 20;
 
-// create the unit
+let snake = [{ x: 9 * box, y: 10 * box }];
-const box = 32;
-
-// load images
-
-const ground = new Image();
-ground.src = "img/ground.png";
-
-const foodImg = new Image();
-foodImg.src = "img/food.png";
-
-// load audio files
-
-let dead = new Audio();
-let eat = new Audio();
-let up = new Audio();
-let right = new Audio();
-let left = new Audio();
-let down = new Audio();
-
-dead.src = "audio/dead.mp3";
-eat.src = "audio/eat.mp3";
-up.src = "audio/up.mp3";
-right.src = "audio/right.mp3";
-left.src = "audio/left.mp3";
-down.src = "audio/down.mp3";
-
-// create the snake
-
-let snake = [];
-
-snake[0] = {
-  x: 9 * box,
-  y: 10 * box,
-};
-
-// create the food
-
 let food = {
-  x: Math.floor(Math.random() * 17 + 1) * box,
+  x: Math.floor(Math.random() * 19 + 1) * box,
-  y: Math.floor(Math.random() * 15 + 3) * box,
+  y: Math.floor(Math.random() * 19 + 1) * box,
 };
-
-// create the score var
-
 let score = 0;
-
-//control the snake
-
 let d;
+let game;
 
 document.addEventListener("keydown", direction);
-
 function direction(event) {
   let key = event.keyCode;
-  if (key == 37 && d != "RIGHT") {
+  if ((key == 37 || key == 65) && d != "RIGHT") d = "LEFT";
-    left.play();
+  else if ((key == 38 || key == 87) && d != "DOWN") d = "UP";
-    d = "LEFT";
+  else if ((key == 39 || key == 68) && d != "LEFT") d = "RIGHT";
-  } else if (key == 38 && d != "DOWN") {
+  else if ((key == 40 || key == 83) && d != "UP") d = "DOWN";
-    d = "UP";
-    up.play();
-  } else if (key == 39 && d != "LEFT") {
-    d = "RIGHT";
-    right.play();
-  } else if (key == 40 && d != "UP") {
-    d = "DOWN";
-    down.play();
-  }
 }
 
-// cheack collision function
 function collision(head, array) {
-  for (let i = 0; i < array.length; i++) {
+  return array.some((part) => head.x == part.x && head.y == part.y);
-    if (head.x == array[i].x && head.y == array[i].y) {
-      return true;
-    }
-  }
-  return false;
 }
 
-// draw everything to the canvas
-
 function draw() {
-  ctx.drawImage(ground, 0, 0);
+  ctx.fillStyle = "#0f380f";
+  ctx.fillRect(0, 0, cvs.width, cvs.height);
+
+  ctx.fillStyle = "red";
+  ctx.fillRect(food.x, food.y, box, box);
 
   for (let i = 0; i < snake.length; i++) {
-    ctx.fillStyle = i == 0 ? "green" : "white";
+    ctx.fillStyle = i == 0 ? "lime" : "white";
     ctx.fillRect(snake[i].x, snake[i].y, box, box);
-
+    ctx.strokeStyle = "black";
-    ctx.strokeStyle = "red";
     ctx.strokeRect(snake[i].x, snake[i].y, box, box);
   }
 
-  ctx.drawImage(foodImg, food.x, food.y);
-
-  // old head position
   let snakeX = snake[0].x;
   let snakeY = snake[0].y;
 
-  // which direction
   if (d == "LEFT") snakeX -= box;
   if (d == "UP") snakeY -= box;
   if (d == "RIGHT") snakeX += box;
   if (d == "DOWN") snakeY += box;
 
-  // if the snake eats the food
   if (snakeX == food.x && snakeY == food.y) {
     score++;
-    eat.play();
     food = {
-      x: Math.floor(Math.random() * 17 + 1) * box,
+      x: Math.floor(Math.random() * 19 + 1) * box,
-      y: Math.floor(Math.random() * 15 + 3) * box,
+      y: Math.floor(Math.random() * 19 + 1) * box,
     };
-    // we don't remove the tail
   } else {
-    // remove the tail
     snake.pop();
   }
 
-  // add new Head
+  let newHead = { x: snakeX, y: snakeY };
-
-  let newHead = {
-    x: snakeX,
-    y: snakeY,
-  };
-
-  // game over
 
   if (
-    snakeX < box ||
+    snakeX < 0 ||
-    snakeX > 17 * box ||
+    snakeX >= cvs.width ||
-    snakeY < 3 * box ||
+    snakeY < 0 ||
-    snakeY > 17 * box ||
+    snakeY >= cvs.height ||
     collision(newHead, snake)
   ) {
     clearInterval(game);
-    dead.play();
+    document.getElementById("restartBtn").style.display = "block";
+    return;
   }
 
   snake.unshift(newHead);
 
   ctx.fillStyle = "white";
-  ctx.font = "45px Changa one";
+  ctx.font = "20px Arial";
-  ctx.fillText(score, 2 * box, 1.6 * box);
+  ctx.fillText("Score: " + score, 10, 20);
 }
 
-// call draw function every 100 ms
+function restartGame() {
+  snake = [{ x: 9 * box, y: 10 * box }];
+  food = {
+    x: Math.floor(Math.random() * 19 + 1) * box,
+    y: Math.floor(Math.random() * 19 + 1) * box,
+  };
+  score = 0;
+  d = "";
+  document.getElementById("restartBtn").style.display = "none";
+  game = setInterval(draw, 150);
+}
 
-let game = setInterval(draw, 100);
+document.getElementById("restartBtn").addEventListener("click", restartGame);
+game = setInterval(draw, 150);

secret/snake/test.html

@@ -3,106 +3,140 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Snake Game</title>
+    <title>Snake Game - GameBoy Style</title>
     <style>
+      /* Base Reset */
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        font-family: monospace;
+        background-color: #3a2d56;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+      }
+
+      /* GameBoy Layout */
+      .gameboy {
+        background-color: #5f4c82;
+        width: 441px;
+        height: 735px;
+        border-radius: 20px;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 10px;
+        position: relative;
+      }
+
+      @media (max-width: 768px) {
+        .gameboy {
+          width: 100vw;
+          height: 100vh;
+          border-radius: 0;
+        }
+      }
+
+      /* Screen */
+      .screen {
+        background-color: black;
+        border: 4px solid #0f380f;
+        width: 90%;
+        height: 55%;
+        margin-top: 20px;
+        border-radius: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
+        overflow: hidden;
+      }
+
       canvas {
         border: 1px solid black;
       }
+
+      /* Restart Button */
       #restartBtn {
         padding: 10px 20px;
         font-size: 16px;
         cursor: pointer;
         margin-top: 20px;
+        background-color: #0f380f;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        display: none;
+      }
+
+      #restartBtn:hover {
+        background-color: #9bbc0f;
+      }
+
+      /* Titles */
+      h1 {
+        font-size: 1.8rem;
+        margin-bottom: 10px;
+        text-transform: uppercase;
+        color: #9bbc0f;
       }
     </style>
   </head>
   <body>
-    <canvas id="snake" width="608" height="608"></canvas>
+    <div class="gameboy">
-    <button id="restartBtn" style="display: none">Restart</button>
+      <h1>Snake Game</h1>
+      <div class="screen">
+        <canvas id="snake" width="400" height="400"></canvas>
+      </div>
+      <button id="restartBtn">Restart</button>
+    </div>
 
     <script>
       "use strict";
 
       const cvs = document.getElementById("snake");
       const ctx = cvs.getContext("2d");
+      const box = 20;
 
-      const box = 32;
+      let snake = [{ x: 9 * box, y: 10 * box }];
-
-      const ground = new Image();
-      ground.src = "img/ground.png";
-
-      const foodImg = new Image();
-      foodImg.src = "img/food.png";
-
-      let dead = new Audio();
-      let eat = new Audio();
-      let up = new Audio();
-      let right = new Audio();
-      let left = new Audio();
-      let down = new Audio();
-
-      dead.src = "audio/dead.mp3";
-      eat.src = "audio/eat.mp3";
-      up.src = "audio/up.mp3";
-      right.src = "audio/right.mp3";
-      left.src = "audio/left.mp3";
-      down.src = "audio/down.mp3";
-
-      let snake = [];
-      snake[0] = { x: 9 * box, y: 10 * box };
-
       let food = {
-        x: Math.floor(Math.random() * 17 + 1) * box,
+        x: Math.floor(Math.random() * 19 + 1) * box,
-        y: Math.floor(Math.random() * 15 + 3) * box,
+        y: Math.floor(Math.random() * 19 + 1) * box,
       };
-
       let score = 0;
-
       let d;
       let game;
 
       document.addEventListener("keydown", direction);
-
       function direction(event) {
         let key = event.keyCode;
-
+        if ((key == 37 || key == 65) && d != "RIGHT") d = "LEFT";
-        if ((key == 37 || key == 65) && d != "RIGHT") {
+        else if ((key == 38 || key == 87) && d != "DOWN") d = "UP";
-          left.play();
+        else if ((key == 39 || key == 68) && d != "LEFT") d = "RIGHT";
-          d = "LEFT";
+        else if ((key == 40 || key == 83) && d != "UP") d = "DOWN";
-        } else if ((key == 38 || key == 87) && d != "DOWN") {
-          d = "UP";
-          up.play();
-        } else if ((key == 39 || key == 68) && d != "LEFT") {
-          d = "RIGHT";
-          right.play();
-        } else if ((key == 40 || key == 83) && d != "UP") {
-          d = "DOWN";
-          down.play();
-        }
       }
 
       function collision(head, array) {
-        for (let i = 0; i < array.length; i++) {
+        return array.some((part) => head.x == part.x && head.y == part.y);
-          if (head.x == array[i].x && head.y == array[i].y) {
-            return true;
-          }
-        }
-        return false;
       }
 
       function draw() {
-        ctx.drawImage(ground, 0, 0);
+        ctx.fillStyle = "#0f380f";
+        ctx.fillRect(0, 0, cvs.width, cvs.height);
+
+        ctx.fillStyle = "red";
+        ctx.fillRect(food.x, food.y, box, box);
 
         for (let i = 0; i < snake.length; i++) {
-          ctx.fillStyle = i == 0 ? "green" : "white";
+          ctx.fillStyle = i == 0 ? "lime" : "white";
           ctx.fillRect(snake[i].x, snake[i].y, box, box);
-
+          ctx.strokeStyle = "black";
-          ctx.strokeStyle = "red";
           ctx.strokeRect(snake[i].x, snake[i].y, box, box);
         }
 
-        ctx.drawImage(foodImg, food.x, food.y);
-
         let snakeX = snake[0].x;
         let snakeY = snake[0].y;
 
@@ -113,10 +147,9 @@
 
         if (snakeX == food.x && snakeY == food.y) {
           score++;
-          eat.play();
           food = {
-            x: Math.floor(Math.random() * 17 + 1) * box,
+            x: Math.floor(Math.random() * 19 + 1) * box,
-            y: Math.floor(Math.random() * 15 + 3) * box,
+            y: Math.floor(Math.random() * 19 + 1) * box,
           };
         } else {
           snake.pop();
@@ -125,47 +158,40 @@
         let newHead = { x: snakeX, y: snakeY };
 
         if (
-          snakeX < box ||
+          snakeX < 0 ||
-          snakeX > 17 * box ||
+          snakeX >= cvs.width ||
-          snakeY < 3 * box ||
+          snakeY < 0 ||
-          snakeY > 17 * box ||
+          snakeY >= cvs.height ||
           collision(newHead, snake)
         ) {
           clearInterval(game);
-          dead.play();
+          document.getElementById("restartBtn").style.display = "block";
-
-          // Delay Game Over message
-          setTimeout(() => {
-            alert("Game Over!");
-            document.getElementById("restartBtn").style.display = "block";
-          }, 500); // Wait 0.5 seconds before showing the message
           return;
         }
 
         snake.unshift(newHead);
 
         ctx.fillStyle = "white";
-        ctx.font = "45px Changa one";
+        ctx.font = "20px Arial";
-        ctx.fillText(score, 2 * box, 1.6 * box);
+        ctx.fillText("Score: " + score, 10, 20);
       }
 
       function restartGame() {
         snake = [{ x: 9 * box, y: 10 * box }];
         food = {
-          x: Math.floor(Math.random() * 17 + 1) * box,
+          x: Math.floor(Math.random() * 19 + 1) * box,
-          y: Math.floor(Math.random() * 15 + 3) * box,
+          y: Math.floor(Math.random() * 19 + 1) * box,
         };
         score = 0;
         d = "";
         document.getElementById("restartBtn").style.display = "none";
-        game = setInterval(draw, 150); // Reduced speed (increased interval time to 150ms)
+        game = setInterval(draw, 150);
       }
 
       document
         .getElementById("restartBtn")
         .addEventListener("click", restartGame);
-
+      game = setInterval(draw, 150);
-      game = setInterval(draw, 150); // Start the game with reduced speed
     </script>
   </body>
 </html>