cool i borked it even further

secret/snake/game.js

@@ -1,150 +1,138 @@
 "use strict";
 
-const upButton = document.getElementById("up");
-const downButton = document.getElementById("down");
-const leftButton = document.getElementById("left");
-const rightButton = document.getElementById("right");
-const startButton = document.getElementById("start");
-const grid = document.createElement("div");
-grid.id = "grid";
-document.querySelector(".game").appendChild(grid);
+document.addEventListener("DOMContentLoaded", () => {
+  class SnakeGame {
+    constructor() {
+      this.cvs = document.getElementById("game");
+      this.ctx = this.cvs.getContext("2d");
+      this.startBtn = document.getElementById("start");
+      this.description = document.getElementById("description");
+      this.box = 32;
 
-let snake = [{ x: 5, y: 5 }];
-let apple = { x: 8, y: 5 };
-let direction = { x: 0, y: 0 };
-let gameInterval = null;
-let isGameRunning = false;
-const gridSize = 10;
+      this.ground = new Image();
+      this.ground.src = "img/ground.png";
 
-function initGame() {
-  grid.style.display = "grid";
-  grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
-  grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
-  grid.style.width = "350px";
-  grid.style.height = "350px";
-  document.getElementById("title").style.display = "none";
-  document.getElementById("description").style.display = "none";
+      this.foodImg = new Image();
+      this.foodImg.src = "img/food.png";
 
-  isGameRunning = true;
-  snake = [{ x: 5, y: 5 }];
-  apple = spawnApple();
-  direction = { x: 0, y: 0 };
-
-  clearInterval(gameInterval);
-  gameInterval = setInterval(gameLoop, 200);
-  render();
-}
-
-function spawnApple() {
-  let newApple;
-  do {
-    newApple = {
-      x: Math.floor(Math.random() * gridSize),
-      y: Math.floor(Math.random() * gridSize),
+      this.sounds = {
+        dead: new Audio("audio/dead.mp3"),
+        eat: new Audio("audio/eat.mp3"),
+        up: new Audio("audio/up.mp3"),
+        right: new Audio("audio/right.mp3"),
+        left: new Audio("audio/left.mp3"),
+        down: new Audio("audio/down.mp3"),
       };
-  } while (
-    snake.some(
-      (segment) => segment.x === newApple.x && segment.y === newApple.y
-    )
+
+      this.snake = [{ x: 9 * this.box, y: 10 * this.box }];
+      this.food = this.getRandomFoodPosition();
+      this.score = 0;
+      this.direction = null;
+      this.game = null;
+
+      document.addEventListener("keydown", (event) =>
+        this.handleKeyPress(event)
       );
-  return newApple;
-}
+      this.initControls();
+      this.startBtn.addEventListener("click", () => this.startGame());
+    }
 
-function updateSnake() {
-  const newHead = {
-    x: snake[0].x + direction.x,
-    y: snake[0].y + direction.y,
+    getRandomFoodPosition() {
+      return {
+        x: Math.floor(Math.random() * 17 + 1) * this.box,
+        y: Math.floor(Math.random() * 15 + 3) * this.box,
       };
+    }
 
-  if (newHead.x < 0) newHead.x = gridSize - 1;
-  if (newHead.y < 0) newHead.y = gridSize - 1;
-  if (newHead.x >= gridSize) newHead.x = 0;
-  if (newHead.y >= gridSize) newHead.y = 0;
+    handleKeyPress(event) {
+      const key = event.key.toLowerCase();
+      if ((key === "arrowleft" || key === "a") && this.direction !== "RIGHT")
+        this.changeDirection("LEFT");
+      if ((key === "arrowup" || key === "w") && this.direction !== "DOWN")
+        this.changeDirection("UP");
+      if ((key === "arrowright" || key === "d") && this.direction !== "LEFT")
+        this.changeDirection("RIGHT");
+      if ((key === "arrowdown" || key === "s") && this.direction !== "UP")
+        this.changeDirection("DOWN");
+    }
 
+    initControls() {
+      document
+        .getElementById("up")
+        .addEventListener("click", () => this.changeDirection("UP"));
+      document
+        .getElementById("down")
+        .addEventListener("click", () => this.changeDirection("DOWN"));
+      document
+        .getElementById("left")
+        .addEventListener("click", () => this.changeDirection("LEFT"));
+      document
+        .getElementById("right")
+        .addEventListener("click", () => this.changeDirection("RIGHT"));
+    }
+
+    changeDirection(newDirection) {
+      this.direction = newDirection;
+      this.sounds[newDirection.toLowerCase()].play();
+    }
+
+    collision(head, array) {
+      return array.some(
+        (segment) => segment.x === head.x && segment.y === head.y
+      );
+    }
+
+    draw() {
+      this.ctx.drawImage(this.ground, 0, 0);
+
+      this.snake.forEach((segment, index) => {
+        this.ctx.fillStyle = index === 0 ? "green" : "white";
+        this.ctx.fillRect(segment.x, segment.y, this.box, this.box);
+        this.ctx.strokeStyle = "red";
+        this.ctx.strokeRect(segment.x, segment.y, this.box, this.box);
+      });
+
+      this.ctx.drawImage(this.foodImg, this.food.x, this.food.y);
+
+      let snakeX = this.snake[0].x;
+      let snakeY = this.snake[0].y;
+
+      if (this.direction === "LEFT") snakeX -= this.box;
+      if (this.direction === "UP") snakeY -= this.box;
+      if (this.direction === "RIGHT") snakeX += this.box;
+      if (this.direction === "DOWN") snakeY += this.box;
+
+      if (snakeX === this.food.x && snakeY === this.food.y) {
+        this.score++;
+        this.sounds.eat.play();
+        this.food = this.getRandomFoodPosition();
+      } else {
+        this.snake.pop();
+      }
+
+      let newHead = { x: snakeX, y: snakeY };
       if (
-    snake.some((segment) => segment.x === newHead.x && segment.y === newHead.y)
+        snakeX < this.box ||
+        snakeX > 17 * this.box ||
+        snakeY < 3 * this.box ||
+        snakeY > 17 * this.box ||
+        this.collision(newHead, this.snake)
       ) {
-    gameOver();
-    return;
+        clearInterval(this.game);
+        this.sounds.dead.play();
       }
 
-  snake.unshift(newHead);
-
-  if (newHead.x === apple.x && newHead.y === apple.y) {
-    apple = spawnApple();
-  } else {
-    snake.pop();
-  }
-}
-
-function render() {
-  grid.innerHTML = "";
-
-  for (let y = 0; y < gridSize; y++) {
-    for (let x = 0; x < gridSize; x++) {
-      const cell = document.createElement("div");
-      cell.classList.add("cell");
-
-      if ((x + y) % 2 === 0) {
-        cell.classList.add("light-green");
-      } else {
-        cell.classList.add("dark-green");
+      this.snake.unshift(newHead);
+      this.ctx.fillStyle = "white";
+      this.ctx.font = "45px Changa one";
+      this.ctx.fillText(this.score, 2 * this.box, 1.6 * this.box);
     }
 
-      if (snake.some((segment) => segment.x === x && segment.y === y)) {
-        cell.classList.add("snake");
-      }
-
-      if (apple.x === x && apple.y === y) {
-        cell.classList.add("apple");
-      }
-
-      grid.appendChild(cell);
+    startGame() {
+      this.description.style.display = "none";
+      this.game = setInterval(() => this.draw(), 100);
     }
   }
-}
 
-function gameLoop() {
-  if (!isGameRunning) return;
-  updateSnake();
-  render();
-}
-
-function gameOver() {
-  alert("Game Over!");
-  clearInterval(gameInterval);
-  isGameRunning = false;
-}
-
-function handleDirectionInput(key) {
-  switch (key) {
-    case "ArrowUp":
-    case "w":
-      if (direction.y === 0) direction = { x: 0, y: -1 };
-      break;
-    case "ArrowDown":
-    case "s":
-      if (direction.y === 0) direction = { x: 0, y: 1 };
-      break;
-    case "ArrowLeft":
-    case "a":
-      if (direction.x === 0) direction = { x: -1, y: 0 };
-      break;
-    case "ArrowRight":
-    case "d":
-      if (direction.x === 0) direction = { x: 1, y: 0 };
-      break;
-  }
-}
-
-upButton.addEventListener("click", () => handleDirectionInput("ArrowUp"));
-downButton.addEventListener("click", () => handleDirectionInput("ArrowDown"));
-leftButton.addEventListener("click", () => handleDirectionInput("ArrowLeft"));
-rightButton.addEventListener("click", () => handleDirectionInput("ArrowRight"));
-startButton.addEventListener("click", () => {
-  if (!isGameRunning) initGame();
-});
-
-document.addEventListener("keydown", (event) => {
-  handleDirectionInput(event.key);
+  new SnakeGame();
 });