Add JavaScript Snake Game

script copy.js

@@ -0,0 +1,203 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const board = document.getElementById('game-board');
+  const score = document.getElementById('score');
+  const instructionText = document.getElementById('instruction-text');
+  const logo = document.getElementById('logo');
+  const highScoreText = document.getElementById('highScore');
+  const gridSize = 20;
+  let snake = [{ x: 10, y: 10 }];
+  let highScore = 0;
+  let food = generateFood();
+  let direction = 'right';
+  let gameSpeedDelay = 200;
+  let gameStarted = false;
+
+  function startGame() {
+    gameStarted = true; // Set gameStarted to true when the game starts
+    instructionText.style.display = 'none'; // Hide the instruction text
+    logo.style.display = 'none'; // Hide the instruction text
+    gameInterval = setInterval(() => {
+      move();
+      checkCollision();
+      draw();
+    }, gameSpeedDelay);
+  }
+
+  function stopGame() {
+    clearInterval(gameInterval);
+    gameStarted = false;
+    instructionText.style.display = 'block';
+    logo.style.display = 'block';
+  }
+
+  function draw() {
+    board.innerHTML = ''; // Clear the board
+    drawSnake();
+    drawFood();
+    updateScore();
+  }
+
+  function drawSnake() {
+    snake.forEach((segment) => {
+      const snakeElement = createGameElement('div', 'snake');
+      setPosition(snakeElement, segment);
+      board.appendChild(snakeElement);
+    });
+  }
+
+  function drawFood() {
+    const foodElement = createGameElement('div', 'food');
+    setPosition(foodElement, food);
+    board.appendChild(foodElement);
+  }
+
+  function createGameElement(tag, className) {
+    const element = document.createElement(tag);
+    element.className = className;
+    return element;
+  }
+
+  function setPosition(element, position) {
+    element.style.gridColumn = position.x;
+    element.style.gridRow = position.y;
+  }
+
+  // Generate food without taking into account snake position
+  // function generateFood() {
+  //   const x = Math.floor(Math.random() * gridSize) + 1;
+  //   const y = Math.floor(Math.random() * gridSize) + 1;
+  //   return { x, y };
+  // }
+
+  function generateFood() {
+    let newFood;
+    do {
+      newFood = {
+        x: Math.floor(Math.random() * gridSize) + 1,
+        y: Math.floor(Math.random() * gridSize) + 1,
+      };
+    } while (isFoodOnSnake(newFood));
+
+    return newFood;
+  }
+
+  function isFoodOnSnake(food) {
+    return snake.some(
+      (segment) => segment.x === food.x && segment.y === food.y
+    );
+  }
+
+  function move() {
+    const head = { ...snake[0] };
+
+    switch (direction) {
+      case 'up':
+        head.y--;
+        break;
+      case 'down':
+        head.y++;
+        break;
+      case 'left':
+        head.x--;
+        break;
+      case 'right':
+        head.x++;
+        break;
+    }
+
+    snake.unshift(head);
+
+    // console.log('Head Position:', head);
+
+    if (head.x === food.x && head.y === food.y) {
+      food = generateFood();
+      increaseSpeed();
+      // console.log(gameSpeedDelay);
+      clearInterval(gameInterval);
+      gameInterval = setInterval(() => {
+        move();
+        checkCollision();
+        draw();
+      }, gameSpeedDelay);
+    } else {
+      snake.pop();
+    }
+  }
+
+  function increaseSpeed() {
+    if (gameSpeedDelay > 150) {
+      gameSpeedDelay -= 5;
+    } else if (gameSpeedDelay > 100) {
+      gameSpeedDelay -= 3;
+    } else if (gameSpeedDelay > 50) {
+      gameSpeedDelay -= 2;
+    } else if (gameSpeedDelay > 25) {
+      gameSpeedDelay -= 1;
+    }
+  }
+
+  function handleKeyPress(event) {
+    // console.log(event.key);
+    if (
+      (!gameStarted && event.code === 'Space') ||
+      (!gameStarted && event.key === ' ')
+    ) {
+      startGame(); // Start the game on Enter key press
+    } else {
+      switch (event.key) {
+        case 'ArrowUp':
+          direction = 'up';
+          break;
+        case 'ArrowDown':
+          direction = 'down';
+          break;
+        case 'ArrowLeft':
+          direction = 'left';
+          break;
+        case 'ArrowRight':
+          direction = 'right';
+          break;
+      }
+    }
+  }
+
+  document.addEventListener('keydown', handleKeyPress);
+
+  function checkCollision() {
+    const head = snake[0];
+
+    if (head.x < 1 || head.x > gridSize || head.y < 1 || head.y > gridSize) {
+      resetGame();
+    }
+
+    for (let i = 1; i < snake.length; i++) {
+      if (head.x === snake[i].x && head.y === snake[i].y) {
+        resetGame();
+      }
+    }
+  }
+
+  function updateScore() {
+    const currentScore = snake.length - 1;
+    score.textContent = currentScore.toString().padStart(3, '0');
+  }
+
+  function updateHighScore() {
+    const currentScore = snake.length - 1;
+    if (currentScore > highScore) {
+      highScore = currentScore;
+      highScoreText.textContent = highScore.toString().padStart(3, '0');
+    }
+    highScoreText.style.display = 'block';
+  }
+
+  function resetGame() {
+    updateHighScore();
+    stopGame();
+    snake = [{ x: 10, y: 10 }];
+    food = generateFood();
+    direction = 'right';
+    gameSpeedDelay = 200;
+    updateScore(); // Calling this last because we need to call it under the rest of snake variable
+  }
+});