pages/secret/snake/game.js

'use strict';

// Get references to the buttons
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.getElementById("grid");

// Game variables
let snake;
let apple;
let gameInterval;
let isGameRunning = false;

// Initialize the game
function initGame() {
    document.getElementById('grid').style.display = 'grid';
    document.getElementById('title').style.display = 'none';
    document.getElementById('description').style.display = 'none';
    snake = [{ x: 10, y: 10 }];
    apple = spawnApple();
    isGameRunning = true;
    gameInterval = setInterval(gameLoop, 100);

    // Render grid only during initialization
    renderGrid();
    render();
}

// Game loop
function gameLoop() {
    updateSnake();
    checkCollisions();
    render();
}

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

// Update the snake's position
function updateSnake() {
    // Logic to move the snake based on direction
}

// Check for collisions with walls, itself, or apple
function checkCollisions() {
    // Logic to check for collisions
}

// Render the game state
function render() {
    // Logic to render the snake and apple on the screen
}

// Render the grid
function renderGrid() {
    const gridSize = 10;
    grid.innerHTML = ''; // Clear the grid first

    for (let y = 0; y < gridSize; y++) {
        let row = document.createElement('div');
        row.classList.add('row');
        for (let x = 0; x < gridSize; x++) {
            let cell = document.createElement('div');
            cell.classList.add('cell');
            row.appendChild(cell);
        }
        grid.appendChild(row);
    }
}

// Button event listeners
upButton.addEventListener("click", () => {
    // Logic to move the snake up
});

downButton.addEventListener("click", () => {
    // Logic to move the snake down
});

leftButton.addEventListener("click", () => {
    // Logic to move the snake left
});

rightButton.addEventListener("click", () => {
    // Logic to move the snake right
});

startButton.addEventListener("click", () => {
    if (!isGameRunning) {
        initGame();
    }
});