pages/secret/snake/game.js

'use strict';

// DOM Elements
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'); // Create grid dynamically
grid.id = 'grid';
document.querySelector('.game').appendChild(grid);

// Game Variables
let snake = [{ x: 5, y: 5 }];
let apple = { x: 8, y: 5 };
let direction = { x: 0, y: 0 };
let gameInterval = null;
let isGameRunning = false;
let gridSize = 10;

// Initialize Game
function initGame() {
    console.log('Game initialized!');
    grid.style.display = 'grid';
    grid.style.gridTemplateColumns = 'repeat(10, 1fr)';
    grid.style.gridTemplateRows = 'repeat(10, 1fr)';
    grid.style.width = '350px';
    grid.style.height = '350px';
    document.getElementById('title').style.display = 'none';
    document.getElementById('description').style.display = 'none';
    isGameRunning = true;
    snake = [{ x: 5, y: 5 }];
    apple = spawnApple();
    direction = { x: 0, y: 0 };
    clearInterval(gameInterval);
    gameInterval = setInterval(gameLoop, 200);
    render();
}

// Spawn an Apple
function spawnApple() {
    return {
        x: Math.floor(Math.random() * 10),
        y: Math.floor(Math.random() * 10),
    };
}

// Update Snake's Position
function updateSnake() {
    const newHead = {
        x: snake[0].x + direction.x,
        y: snake[0].y + direction.y,
    };

    // Wrap snake around edges
    if (newHead.x < 0) newHead.x = 9;
    if (newHead.y < 0) newHead.y = 9;
    if (newHead.x > 9) newHead.x = 0;
    if (newHead.y > 9) newHead.y = 0;

    // Check collision with itself
    if (snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) {
        gameOver();
        return;
    }

    snake.unshift(newHead);

    // Check collision with apple
    if (newHead.x === apple.x && newHead.y === apple.y) {
        apple = spawnApple();
    } else {
        snake.pop(); // Remove tail
    }
}

// Render Game State
function render() {

    const grid = document.getElementById("grid");
    grid.innerHTML = ""; // Clear the grid

    // Generate the grid
    for (let y = 0; y < gridSize; y++) {
        for (let x = 0; x < gridSize; x++) {
            const cell = document.createElement("div");
            cell.classList.add("cell");

            // Alternate colors for a chessboard pattern
            if ((x + y) % 2 === 0) {
                cell.classList.add("light-green");
            } else {
                cell.classList.add("dark-green");
            }

            // Check if the cell is part of the snake
            if (snake.some(segment => segment.x === x && segment.y === y)) {
                cell.classList.add("snake");
            }

            // Check if the cell is the apple
            if (apple.x === x && apple.y === y) {
                cell.classList.add("apple");
            }

            grid.appendChild(cell);
        }
    }
}

// Game Loop
function gameLoop() {
    if (!isGameRunning) return;
    updateSnake();
    render();
}

// Handle Game Over
function gameOver() {
    alert('Game Over!');
    clearInterval(gameInterval);
    isGameRunning = false;
}

// Event Listeners for Buttons
upButton.addEventListener('click', () => direction = { x: 0, y: -1 });
downButton.addEventListener('click', () => direction = { x: 0, y: 1 });
leftButton.addEventListener('click', () => direction = { x: -1, y: 0 });
rightButton.addEventListener('click', () => direction = { x: 1, y: 0 });
startButton.addEventListener('click', () => {
    if (!isGameRunning) initGame();
});