pages/secret/snake/game.js

'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);

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;

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';

    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)
        };
    } while (snake.some(segment => segment.x === newApple.x && segment.y === newApple.y));
    return newApple;
}

function updateSnake() {
    const newHead = {
        x: snake[0].x + direction.x,
        y: snake[0].y + direction.y
    };

    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;

    if (snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) {
        gameOver();
        return;
    }

    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");
            }

            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);
        }
    }
}

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);
});