<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #333;
        }
        canvas {
            background-color: #000;
            border: 1px solid #fff;
            margin-bottom: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #00FF00;
            color: white;
            border: none;
            border-radius: 5px;
        }
        button:hover {
            background-color: #00cc00;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <button id="restartBtn">Restart Game</button>

    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

        const box = 20; // Snake square size
        const canvasSize = 400; // Canvas size

        let snake, food, direction, score, game;

        // Initial setup
        function initializeGame() {
            snake = [{x: 8 * box, y: 8 * box}]; // Initial snake position
            food = {
                x: Math.floor(Math.random() * (canvasSize / box)) * box,
                y: Math.floor(Math.random() * (canvasSize / box)) * box
            };
            direction = "RIGHT";
            score = 0;

            clearInterval(game); // Stop previous game loop
            game = setInterval(drawGame, 200); // Set a slower game speed (200ms)
        }

        // Control the snake using arrow keys
        document.addEventListener("keydown", changeDirection);

        function changeDirection(event) {
            if (event.key === "ArrowLeft" && direction !== "RIGHT") {
                direction = "LEFT";
            } else if (event.key === "ArrowUp" && direction !== "DOWN") {
                direction = "UP";
            } else if (event.key === "ArrowRight" && direction !== "LEFT") {
                direction = "RIGHT";
            } else if (event.key === "ArrowDown" && direction !== "UP") {
                direction = "DOWN";
            }
        }

        // Check for collision with walls or itself
        function collision(newHead, array) {
            for (let i = 0; i < array.length; i++) {
                if (newHead.x === array[i].x && newHead.y === array[i].y) {
                    return true;
                }
            }
            return (
                newHead.x < 0 || newHead.x >= canvasSize ||
                newHead.y < 0 || newHead.y >= canvasSize
            );
        }

        // Draw the snake and food
        function drawGame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Draw the snake
            for (let i = 0; i < snake.length; i++) {
                ctx.fillStyle = (i === 0) ? "#00FF00" : "#FFFFFF"; // Head green, body white
                ctx.fillRect(snake[i].x, snake[i].y, box, box);
                ctx.strokeStyle = "#000";
                ctx.strokeRect(snake[i].x, snake[i].y, box, box);
            }

            // Draw the food
            ctx.fillStyle = "#FF0000"; // Red color for the food
            ctx.fillRect(food.x, food.y, box, box);

            // Move the snake
            let snakeX = snake[0].x;
            let snakeY = snake[0].y;

            if (direction === "LEFT") snakeX -= box;
            if (direction === "UP") snakeY -= box;
            if (direction === "RIGHT") snakeX += box;
            if (direction === "DOWN") snakeY += box;

            // Check if the snake eats the food
            if (snakeX === food.x && snakeY === food.y) {
                score++;
                // Generate new food location
                food = {
                    x: Math.floor(Math.random() * (canvasSize / box)) * box,
                    y: Math.floor(Math.random() * (canvasSize / box)) * box
                };
            } else {
                snake.pop(); // Remove the last part of the snake if not eating
            }

            // New head of the snake
            let newHead = {x: snakeX, y: snakeY};

            // Game over if collision happens
            if (collision(newHead, snake)) {
                clearInterval(game);
                alert("Game Over! Your score: " + score);
            }

            // Add the new head to the snake
            snake.unshift(newHead);
        }

        // Restart button functionality
        document.getElementById("restartBtn").addEventListener("click", function() {
            initializeGame();
        });

        // Start the game for the first time
        initializeGame();
    </script>
</body>
</html>
