Snake ChatGPT

<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        svg {
            background-color: #222;
        }

        .snake {
            fill: #39FF14;
            stroke: #000;
            stroke-width: 2;
        }

        .food {
            fill: #FF6347;
            stroke: #000;
            stroke-width: 2;
        }
    </style>
</head>
<body>
    <svg id="game" width="400" height="400"></svg>

    <script>
        const svg = document.getElementById('game');
        const cellSize = 20;
        const gridSize = 20;
        const snakeSpeed = 150;

        const snake = [{ x: 5, y: 5 }];
        let direction = 'right';
        let food = getRandomPosition();

        function getRandomPosition() {
            const x = Math.floor(Math.random() * gridSize);
            const y = Math.floor(Math.random() * gridSize);
            return { x, y };
        }

        function draw() {
            // Clear the SVG
            svg.innerHTML = '';

            // Draw food
            const foodElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            foodElement.setAttribute('class', 'food');
            foodElement.setAttribute('width', cellSize);
            foodElement.setAttribute('height', cellSize);
            foodElement.setAttribute('x', food.x * cellSize);
            foodElement.setAttribute('y', food.y * cellSize);
            svg.appendChild(foodElement);

            // Draw snake
            for (const segment of snake) {
                const snakeSegment = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                snakeSegment.setAttribute('class', 'snake');
                snakeSegment.setAttribute('width', cellSize);
                snakeSegment.setAttribute('height', cellSize);
                snakeSegment.setAttribute('x', segment.x * cellSize);
                snakeSegment.setAttribute('y', segment.y * cellSize);
                svg.appendChild(snakeSegment);
            }
        }

        function move() {
            // Move the snake
            const headX = snake[0].x;
            const headY = snake[0].y;

            switch (direction) {
                case 'up':
                    snake.unshift({ x: headX, y: headY - 1 });
                    break;
                case 'down':
                    snake.unshift({ x: headX, y: headY + 1 });
                    break;
                case 'left':
                    snake.unshift({ x: headX - 1, y: headY });
                    break;
                case 'right':
                    snake.unshift({ x: headX + 1, y: headY });
                    break;
            }

            // Check for collision with food
            if (snake[0].x === food.x && snake[0].y === food.y) {
                food = getRandomPosition();
            } else {
                // Remove the tail
                snake.pop();
            }
        }

        function gameOver() {
            clearInterval(gameInterval);
            alert('Game Over! Your score: ' + (snake.length - 1));
            document.location.reload();
        }

        function checkCollision() {
            // Check for collision with walls
            const headX = snake[0].x;
            const headY = snake[0].y;
            if (headX < 0 || headY < 0 || headX >= gridSize || headY >= gridSize) {
                gameOver();
                return;
            }

            // Check for collision with itself
            for (let i = 1; i < snake.length; i++) {
                if (snake[i].x === headX && snake[i].y === headY) {
                    gameOver();
                    return;
                }
            }
        }

        function gameLoop() {
            move();
            checkCollision();
            draw();
        }

        document.addEventListener('keydown', (event) => {
            switch (event.key) {
                case 'ArrowUp':
                    if (direction !== 'down') {
                        direction = 'up';
                    }
                    break;
                case 'ArrowDown':
                    if (direction !== 'up') {
                        direction = 'down';
                    }
                    break;
                case 'ArrowLeft':
                    if (direction !== 'right') {
                        direction = 'left';
                    }
                    break;
                case 'ArrowRight':
                    if (direction !== 'left') {
                        direction = 'right';
                    }
                    break;
            }
        });

        draw();
        const gameInterval = setInterval(gameLoop, snakeSpeed);
    </script>
</body>
</html>