WHY IS THIS BULLSHIT WORKING

secret/snake/game.js

@@ -1,104 +1,138 @@
+// testing from old tutorial
+
 "use strict";
 
-document.addEventListener("DOMContentLoaded", () => {
+const cvs = document.getElementById("snake");
-  const cvs = document.getElementById("game");
+const ctx = cvs.getContext("2d");
-  const ctx = cvs.getContext("2d");
-  const startBtn = document.getElementById("start");
-  const description = document.getElementById("description");
-  const box = 32;
 
-  const ground = new Image();
+// create the unit
-  ground.src = "img/ground.png";
+const box = 32;
 
-  const foodImg = new Image();
+// load images
-  foodImg.src = "img/food.png";
 
-  let dead = new Audio("audio/dead.mp3");
+const ground = new Image();
-  let eat = new Audio("audio/eat.mp3");
+ground.src = "img/ground.png";
-  let up = new Audio("audio/up.mp3");
-  let right = new Audio("audio/right.mp3");
-  let left = new Audio("audio/left.mp3");
-  let down = new Audio("audio/down.mp3");
 
-  let snake = [{ x: 9 * box, y: 10 * box }];
+const foodImg = new Image();
-  let food = {
+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,
   y: Math.floor(Math.random() * 15 + 3) * box,
-  };
+};
-  let score = 0;
-  let d;
-  let game;
 
-  document.addEventListener("keydown", direction);
+// create the score var
-  document
-    .getElementById("up")
-    .addEventListener("click", () => changeDirection("UP"));
-  document
-    .getElementById("down")
-    .addEventListener("click", () => changeDirection("DOWN"));
-  document
-    .getElementById("left")
-    .addEventListener("click", () => changeDirection("LEFT"));
-  document
-    .getElementById("right")
-    .addEventListener("click", () => changeDirection("RIGHT"));
-  startBtn.addEventListener("click", startGame);
 
-  function direction(event) {
+let score = 0;
-    const key = event.key.toLowerCase();
+
-    if ((key === "arrowleft" || key === "a") && d !== "RIGHT")
+//control the snake
-      changeDirection("LEFT");
+
-    if ((key === "arrowup" || key === "w") && d !== "DOWN")
+let d;
-      changeDirection("UP");
+
-    if ((key === "arrowright" || key === "d") && d !== "LEFT")
+document.addEventListener("keydown", direction);
-      changeDirection("RIGHT");
+
-    if ((key === "arrowdown" || key === "s") && d !== "UP")
+function direction(event) {
-      changeDirection("DOWN");
+  let key = event.keyCode;
+  if (key == 37 && d != "RIGHT") {
+    left.play();
+    d = "LEFT";
+  } else if (key == 38 && 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();
   }
+}
 
-  function changeDirection(newDirection) {
+// cheack collision function
-    d = newDirection;
+function collision(head, array) {
-    if (newDirection === "LEFT") left.play();
+  for (let i = 0; i < array.length; i++) {
-    if (newDirection === "UP") up.play();
+    if (head.x == array[i].x && head.y == array[i].y) {
-    if (newDirection === "RIGHT") right.play();
+      return true;
-    if (newDirection === "DOWN") down.play();
     }
-
-  function collision(head, array) {
-    return array.some(
-      (segment) => segment.x === head.x && segment.y === head.y
-    );
   }
+  return false;
+}
 
-  function draw() {
+// draw everything to the canvas
+
+function draw() {
   ctx.drawImage(ground, 0, 0);
-    snake.forEach((segment, index) => {
+
-      ctx.fillStyle = index === 0 ? "green" : "white";
+  for (let i = 0; i < snake.length; i++) {
-      ctx.fillRect(segment.x, segment.y, box, box);
+    ctx.fillStyle = i == 0 ? "green" : "white";
+    ctx.fillRect(snake[i].x, snake[i].y, box, box);
+
     ctx.strokeStyle = "red";
-      ctx.strokeRect(segment.x, segment.y, box, box);
+    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;
-    if (d === "LEFT") snakeX -= box;
-    if (d === "UP") snakeY -= box;
-    if (d === "RIGHT") snakeX += box;
-    if (d === "DOWN") snakeY += box;
 
-    if (snakeX === food.x && snakeY === food.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,
       y: Math.floor(Math.random() * 15 + 3) * box,
     };
+    // we don't remove the tail
   } else {
+    // remove the tail
     snake.pop();
   }
 
-    let newHead = { x: snakeX, y: snakeY };
+  // add new Head
+
+  let newHead = {
+    x: snakeX,
+    y: snakeY,
+  };
+
+  // game over
+
   if (
     snakeX < box ||
     snakeX > 17 * box ||
@@ -111,13 +145,12 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   snake.unshift(newHead);
+
   ctx.fillStyle = "white";
   ctx.font = "45px Changa one";
   ctx.fillText(score, 2 * box, 1.6 * box);
-  }
+}
 
-  function startGame() {
+// call draw function every 100 ms
-    description.style.display = "none";
+
-    game = setInterval(draw, 100);
+let game = setInterval(draw, 100);
-  }
-});

secret/snake/index.html

@@ -38,7 +38,7 @@
             <p>▲ or W or arrow up = move up</p>
             <p>▼ or S or arrow down = move down</p>
           </div>
-          <canvas id="game"></canvas>
+          <canvas id="snake" width="400" height="400"></canvas>
         </article>
       </div>
 

secret/snake/test.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Snake Game</title>
+    <style>
+      canvas {
+        border: 1px solid black;
+      }
+      #restartBtn {
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+        margin-top: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="snake" width="608" height="608"></canvas>
+    <button id="restartBtn" style="display: none">Restart</button>
+
+    <script>
+      "use strict";
+
+      const cvs = document.getElementById("snake");
+      const ctx = cvs.getContext("2d");
+
+      const box = 32;
+
+      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,
+        y: Math.floor(Math.random() * 15 + 3) * 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") {
+          left.play();
+          d = "LEFT";
+        } 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++) {
+          if (head.x == array[i].x && head.y == array[i].y) {
+            return true;
+          }
+        }
+        return false;
+      }
+
+      function draw() {
+        ctx.drawImage(ground, 0, 0);
+
+        for (let i = 0; i < snake.length; i++) {
+          ctx.fillStyle = i == 0 ? "green" : "white";
+          ctx.fillRect(snake[i].x, snake[i].y, box, box);
+
+          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;
+
+        if (d == "LEFT") snakeX -= box;
+        if (d == "UP") snakeY -= box;
+        if (d == "RIGHT") snakeX += box;
+        if (d == "DOWN") snakeY += box;
+
+        if (snakeX == food.x && snakeY == food.y) {
+          score++;
+          eat.play();
+          food = {
+            x: Math.floor(Math.random() * 17 + 1) * box,
+            y: Math.floor(Math.random() * 15 + 3) * box,
+          };
+        } else {
+          snake.pop();
+        }
+
+        let newHead = { x: snakeX, y: snakeY };
+
+        if (
+          snakeX < box ||
+          snakeX > 17 * box ||
+          snakeY < 3 * box ||
+          snakeY > 17 * box ||
+          collision(newHead, snake)
+        ) {
+          clearInterval(game);
+          dead.play();
+
+          // 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.fillText(score, 2 * box, 1.6 * box);
+      }
+
+      function restartGame() {
+        snake = [{ x: 9 * box, y: 10 * box }];
+        food = {
+          x: Math.floor(Math.random() * 17 + 1) * box,
+          y: Math.floor(Math.random() * 15 + 3) * box,
+        };
+        score = 0;
+        d = "";
+        document.getElementById("restartBtn").style.display = "none";
+        game = setInterval(draw, 150); // Reduced speed (increased interval time to 150ms)
+      }
+
+      document
+        .getElementById("restartBtn")
+        .addEventListener("click", restartGame);
+
+      game = setInterval(draw, 150); // Start the game with reduced speed
+    </script>
+  </body>
+</html>