app.js

const board = document.querySelector('.board');
const startButton = document.querySelector('.btn-start');
const modal = document.querySelector('.modal');

const scoreEl = document.getElementById("SCORE");
const highScoreEl = document.getElementById("HIGH-SCORE");
const timeEl = document.getElementById("TIME");

const blockSize = 50;
const cols = Math.floor(board.clientWidth / blockSize);
const rows = Math.floor(board.clientHeight / blockSize);

let intervalId = null;
let timeInterval = null;

let direction = "right";
let score = 0;
let time = 0;

let highScore = localStorage.getItem("snakeHighScore") || 0;
highScoreEl.innerText = highScore;

const blocks = [];
let snake = [{ x: 1, y: 3 }];
let food = { x: 0, y: 0 };

for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
        const block = document.createElement("div");
        block.classList.add("block");
        board.appendChild(block);
        blocks[`${row}-${col}`] = block;
    }
}

function generateFood() {
    do {
        food = {
            x: Math.floor(Math.random() * rows),
            y: Math.floor(Math.random() * cols)
        };
    } while (snake.some(seg => seg.x === food.x && seg.y === food.y));
}

function resetGame() {
    snake.forEach(seg => {
        blocks[`${seg.x}-${seg.y}`].classList.remove("fill");
    });

    blocks[`${food.x}-${food.y}`]?.classList.remove("food");

    snake = [{ x: 1, y: 3 }];
    direction = "right";
    score = 0;
    time = 0;

    scoreEl.innerText = score;
    timeEl.innerText = "00-00";

    generateFood();
}

function gameOver() {
    clearInterval(intervalId);
    clearInterval(timeInterval);
    intervalId = null;

    if (score > highScore) {
        highScore = score;
        localStorage.setItem("snakeHighScore", highScore);
        highScoreEl.innerText = highScore;
    }

    startButton.innerText = "RESTART GAME";
    modal.style.display = "flex";
}

function render() {
    let head = { ...snake[0] };

    if (direction === "left") head.y--;
    else if (direction === "right") head.y++;
    else if (direction === "up") head.x--;
    else if (direction === "down") head.x++;
    if (head.x < 0 || head.x >= rows || head.y < 0 || head.y >= cols) {
        gameOver();
        return;
    }

    for (let seg of snake) {
        if (seg.x === head.x && seg.y === head.y) {
            gameOver();
            return;
        }
    }

    if (head.x === food.x && head.y === food.y) {
        score++;
        scoreEl.innerText = score;

        blocks[`${food.x}-${food.y}`].classList.remove("food");

        generateFood(); 
    } else {
        const tail = snake.pop();
        blocks[`${tail.x}-${tail.y}`].classList.remove("fill");
    }

    snake.unshift(head);

    blocks[`${food.x}-${food.y}`].classList.add("food");
    blocks[`${head.x}-${head.y}`].classList.add("fill");
}


startButton.addEventListener("click", () => {
    modal.style.display = "none";
    startButton.innerText = "START GAME";

    resetGame();

    intervalId = setInterval(render, 300);
    timeInterval = setInterval(() => {
        time++;
        const min = String(Math.floor(time / 60)).padStart(2, "0");
        const sec = String(time % 60).padStart(2, "0");
        timeEl.innerText = `${min}-${sec}`;
    }, 3000);
});

addEventListener("keydown", (e) => {
    if (e.key === "ArrowUp" && direction !== "down") direction = "up";
    else if (e.key === "ArrowDown" && direction !== "up") direction = "down";
    else if (e.key === "ArrowLeft" && direction !== "right") direction = "left";
    else if (e.key === "ArrowRight" && direction !== "left") direction = "right";
});