<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game - Rosy's Arcade</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Press Start 2P', monospace;
            background: #8b956d;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #0f380f;
            padding: 20px;
        }
        h1 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #0f380f;
            text-shadow: 2px 2px 0px #306230;
        }
        .game-container {
            background: #9bbc0f;
            border-radius: 8px;
            padding: 15px;
            box-shadow:
                inset 0 0 20px rgba(15, 56, 15, 0.3),
                8px 8px 0px #306230,
                -4px -4px 0px #8b956d;
            border: 4px solid #0f380f;
        }
        #gameCanvas {
            border: 4px solid #0f380f;
            border-radius: 0;
            display: block;
            image-rendering: pixelated;
        }
        .stats {
            display: flex;
            justify-content: space-between;
            margin-top: 12px;
            font-size: 0.6rem;
        }
        .score {
            color: #0f380f;
        }
        .high-score {
            color: #306230;
        }
        .controls {
            margin-top: 20px;
            text-align: center;
            color: #306230;
            font-size: 0.5rem;
            line-height: 2;
        }
        .controls p {
            margin: 8px 0;
        }
        kbd {
            background: #306230;
            color: #9bbc0f;
            padding: 4px 8px;
            border-radius: 2px;
            border: 2px solid #0f380f;
            font-family: 'Press Start 2P', monospace;
            font-size: 0.5rem;
        }
        .message {
            position: absolute;
            text-align: center;
            font-size: 0.8rem;
            color: #0f380f;
        }
        .back-link {
            margin-top: 20px;
            color: #306230;
            font-size: 0.5rem;
        }
        .back-link a {
            color: #0f380f;
            text-decoration: none;
        }
        .back-link a:hover {
            text-decoration: underline;
        }
        /* Mobile controls */
        .mobile-controls {
            display: none;
            margin-top: 20px;
            gap: 10px;
        }
        .mobile-row {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .mobile-btn {
            width: 60px;
            height: 60px;
            background: #9bbc0f;
            border: 3px solid #0f380f;
            border-radius: 4px;
            color: #0f380f;
            font-size: 1.2rem;
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Press Start 2P', monospace;
            box-shadow: 3px 3px 0px #306230;
        }
        .mobile-btn:active {
            background: #306230;
            color: #9bbc0f;
            box-shadow: 1px 1px 0px #0f380f;
            transform: translate(2px, 2px);
        }
        .mobile-btn.invisible {
            visibility: hidden;
        }
        @media (max-width: 600px) {
            .mobile-controls {
                display: flex;
                flex-direction: column;
            }
            .controls {
                display: none;
            }
        }
    </style>
</head>
<body>
    <h1>Snake</h1>

    <div class="game-container">
        <canvas id="gameCanvas" width="400" height="400"></canvas>
        <div class="stats">
            <span class="score">Score: <span id="score">0</span></span>
            <span class="high-score">Best: <span id="highScore">0</span></span>
        </div>
    </div>

    <div class="controls">
        <p>Use <kbd>↑</kbd> <kbd>↓</kbd> <kbd>←</kbd> <kbd>→</kbd> or <kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd> to move</p>
        <p>Press <kbd>Space</kbd> to pause | <kbd>R</kbd> to restart</p>
    </div>

    <div class="mobile-controls">
        <div class="mobile-row">
            <button class="mobile-btn invisible"></button>
            <button class="mobile-btn" id="upBtn">↑</button>
            <button class="mobile-btn invisible"></button>
        </div>
        <div class="mobile-row">
            <button class="mobile-btn" id="leftBtn">←</button>
            <button class="mobile-btn" id="downBtn">↓</button>
            <button class="mobile-btn" id="rightBtn">→</button>
        </div>
    </div>

    

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

        const gridSize = 20;
        const tileCount = canvas.width / gridSize;

        let snake = [{x: 10, y: 10}];
        let direction = {x: 0, y: 0};
        let nextDirection = {x: 0, y: 0};
        let food = {x: 15, y: 15};
        let score = 0;
        let highScore = localStorage.getItem('snakeHighScore') || 0;
        let gameRunning = false;
        let gamePaused = false;
        let gameOver = false;
        let gameSpeed = 100;
        let lastTime = 0;

        document.getElementById('highScore').textContent = highScore;

        function drawGame(timestamp) {
            if (!gameRunning) return;

            if (timestamp - lastTime >= gameSpeed) {
                lastTime = timestamp;
                if (!gamePaused && !gameOver) {
                    update();
                }
            }

            draw();
            requestAnimationFrame(drawGame);
        }

        function update() {
            direction = {...nextDirection};

            if (direction.x === 0 && direction.y === 0) return;

            const head = {
                x: snake[0].x + direction.x,
                y: snake[0].y + direction.y
            };

            // Wall collision
            if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
                endGame();
                return;
            }

            // Self collision
            for (let segment of snake) {
                if (head.x === segment.x && head.y === segment.y) {
                    endGame();
                    return;
                }
            }

            snake.unshift(head);

            // Food collision
            if (head.x === food.x && head.y === food.y) {
                score += 10;
                document.getElementById('score').textContent = score;
                placeFood();
                // Speed up slightly
                if (gameSpeed > 50) {
                    gameSpeed -= 2;
                }
            } else {
                snake.pop();
            }
        }

        // Game Boy color palette
        const GB_LIGHTEST = '#9bbc0f';  // lightest green
        const GB_LIGHT = '#8bac0f';     // light green
        const GB_DARK = '#306230';      // dark green
        const GB_DARKEST = '#0f380f';   // darkest green

        function draw() {
            // Clear canvas - Game Boy screen color
            ctx.fillStyle = GB_LIGHTEST;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw grid (subtle)
            ctx.strokeStyle = GB_LIGHT;
            ctx.lineWidth = 1;
            for (let i = 0; i <= tileCount; i++) {
                ctx.beginPath();
                ctx.moveTo(i * gridSize, 0);
                ctx.lineTo(i * gridSize, canvas.height);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(0, i * gridSize);
                ctx.lineTo(canvas.width, i * gridSize);
                ctx.stroke();
            }

            // Draw food - darkest color, square pixel style
            ctx.fillStyle = GB_DARKEST;
            ctx.fillRect(
                food.x * gridSize + 2,
                food.y * gridSize + 2,
                gridSize - 4,
                gridSize - 4
            );

            // Draw snake - pixel style
            snake.forEach((segment, index) => {
                // Head is darkest, body alternates
                ctx.fillStyle = index === 0 ? GB_DARKEST : (index % 2 === 0 ? GB_DARK : GB_DARKEST);

                ctx.fillRect(
                    segment.x * gridSize + 1,
                    segment.y * gridSize + 1,
                    gridSize - 2,
                    gridSize - 2
                );

                // Add pixel eyes to head
                if (index === 0) {
                    ctx.fillStyle = GB_LIGHTEST;
                    // Eyes based on direction
                    if (direction.x === 1) { // right
                        ctx.fillRect(segment.x * gridSize + 14, segment.y * gridSize + 5, 3, 3);
                        ctx.fillRect(segment.x * gridSize + 14, segment.y * gridSize + 12, 3, 3);
                    } else if (direction.x === -1) { // left
                        ctx.fillRect(segment.x * gridSize + 3, segment.y * gridSize + 5, 3, 3);
                        ctx.fillRect(segment.x * gridSize + 3, segment.y * gridSize + 12, 3, 3);
                    } else if (direction.y === -1) { // up
                        ctx.fillRect(segment.x * gridSize + 5, segment.y * gridSize + 3, 3, 3);
                        ctx.fillRect(segment.x * gridSize + 12, segment.y * gridSize + 3, 3, 3);
                    } else { // down or idle
                        ctx.fillRect(segment.x * gridSize + 5, segment.y * gridSize + 14, 3, 3);
                        ctx.fillRect(segment.x * gridSize + 12, segment.y * gridSize + 14, 3, 3);
                    }
                }
            });

            // Draw messages
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.font = '10px "Press Start 2P", monospace';

            if (!gameRunning || (direction.x === 0 && direction.y === 0 && !gameOver)) {
                ctx.fillStyle = GB_DARKEST;
                ctx.fillText('PRESS ARROW', canvas.width / 2, canvas.height / 2 - 10);
                ctx.fillText('TO START', canvas.width / 2, canvas.height / 2 + 10);
            }

            if (gamePaused && !gameOver) {
                ctx.fillStyle = GB_LIGHT;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = GB_DARKEST;
                ctx.font = '16px "Press Start 2P", monospace';
                ctx.fillText('PAUSED', canvas.width / 2, canvas.height / 2);
            }

            if (gameOver) {
                ctx.fillStyle = GB_LIGHT;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = GB_DARKEST;
                ctx.font = '14px "Press Start 2P", monospace';
                ctx.fillText('GAME OVER', canvas.width / 2, canvas.height / 2 - 25);
                ctx.font = '10px "Press Start 2P", monospace';
                ctx.fillStyle = GB_DARK;
                ctx.fillText(`SCORE: ${score}`, canvas.width / 2, canvas.height / 2 + 5);
                ctx.fillText('PRESS R', canvas.width / 2, canvas.height / 2 + 30);
            }
        }

        function placeFood() {
            do {
                food = {
                    x: Math.floor(Math.random() * tileCount),
                    y: Math.floor(Math.random() * tileCount)
                };
            } while (snake.some(s => s.x === food.x && s.y === food.y));
        }

        function endGame() {
            gameOver = true;
            if (score > highScore) {
                highScore = score;
                localStorage.setItem('snakeHighScore', highScore);
                document.getElementById('highScore').textContent = highScore;
            }
        }

        function resetGame() {
            snake = [{x: 10, y: 10}];
            direction = {x: 0, y: 0};
            nextDirection = {x: 0, y: 0};
            score = 0;
            gameSpeed = 100;
            gameOver = false;
            gamePaused = false;
            document.getElementById('score').textContent = 0;
            placeFood();
        }

        function setDirection(x, y) {
            // Prevent reversing direction
            if (direction.x !== 0 && x !== 0 && direction.x === -x) return;
            if (direction.y !== 0 && y !== 0 && direction.y === -y) return;

            nextDirection = {x, y};

            if (!gameRunning) {
                gameRunning = true;
                requestAnimationFrame(drawGame);
            }
        }

        document.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'ArrowUp':
                case 'w':
                case 'W':
                    e.preventDefault();
                    if (!gameOver) setDirection(0, -1);
                    break;
                case 'ArrowDown':
                case 's':
                case 'S':
                    e.preventDefault();
                    if (!gameOver) setDirection(0, 1);
                    break;
                case 'ArrowLeft':
                case 'a':
                case 'A':
                    e.preventDefault();
                    if (!gameOver) setDirection(-1, 0);
                    break;
                case 'ArrowRight':
                case 'd':
                case 'D':
                    e.preventDefault();
                    if (!gameOver) setDirection(1, 0);
                    break;
                case ' ':
                    e.preventDefault();
                    if (!gameOver && gameRunning) {
                        gamePaused = !gamePaused;
                    }
                    break;
                case 'r':
                case 'R':
                    resetGame();
                    break;
            }
        });

        // Mobile controls
        document.getElementById('upBtn').addEventListener('click', () => !gameOver && setDirection(0, -1));
        document.getElementById('downBtn').addEventListener('click', () => !gameOver && setDirection(0, 1));
        document.getElementById('leftBtn').addEventListener('click', () => !gameOver && setDirection(-1, 0));
        document.getElementById('rightBtn').addEventListener('click', () => !gameOver && setDirection(1, 0));

        // Initial draw
        draw();
    </script>
</body>
</html>
