A classic Snake game with gradual speed increase, improved mobile controls, and on-page game over message

<!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>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        #gameCanvas {
            border: 1px solid #000;
            touch-action: none;
        }
        #mobileControls {
            display: none;
        }
        @media (max-width: 768px) {
            #mobileControls {
                display: grid;
            }
        }
    </style>
</head>
<body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen p-4">
    <h1 class="text-4xl font-bold mb-4">Snake Game</h1>
    <canvas id="gameCanvas" width="300" height="300" class="bg-white"></canvas>
    <p id="score" class="text-xl mt-4">Score: 0</p>
    <button id="startButton" class="mt-4 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">Start Game</button>
    <div id="gameOverMessage" class="mt-4 text-2xl font-bold text-red-600 hidden"></div>

    <div id="mobileControls" class="grid grid-cols-3 gap-2 mt-4 w-48">
        <div></div>
        <button id="upButton" class="bg-blue-500 text-white p-2 rounded">↑</button>
        <div></div>
        <button id="leftButton" class="bg-blue-500 text-white p-2 rounded">←</button>
        <button id="downButton" class="bg-blue-500 text-white p-2 rounded">↓</button>
        <button id="rightButton" class="bg-blue-500 text-white p-2 rounded">→</button>
    </div>

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

        const gridSize = 15;
        const tileCount = canvas.width / gridSize;
        let snake = [{x: 10, y: 10}];
        let food = {x: 5, y: 5};
        let dx = 0;
        let dy = 0;
        let score = 0;
        let gameLoop;
        let gameSpeed = 200; // Starting speed (milliseconds)

        function drawGame() {
            clearCanvas();
            moveSnake();
            drawSnake();
            drawFood();
            checkCollision();
            updateScore();
        }

        function clearCanvas() {
            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        function drawSnake() {
            ctx.fillStyle = 'green';
            snake.forEach(segment => {
                ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
            });
        }

        function drawFood() {
            ctx.fillStyle = 'red';
            ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
        }

        function moveSnake() {
            const head = {x: snake[0].x + dx, y: snake[0].y + dy};
            snake.unshift(head);
            if (head.x === food.x && head.y === food.y) {
                score++;
                generateFood();
                increaseSpeed();
            } else {
                snake.pop();
            }
        }

        function generateFood() {
            food.x = Math.floor(Math.random() * tileCount);
            food.y = Math.floor(Math.random() * tileCount);
        }

        function checkCollision() {
            const head = snake[0];
            if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
                gameOver();
            }
            for (let i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    gameOver();
                }
            }
        }

        function gameOver() {
            clearInterval(gameLoop);
            gameOverMessage.textContent = `Game Over! Your score: ${score}`;
            gameOverMessage.classList.remove('hidden');
            startButton.style.display = 'block';
        }

        function updateScore() {
            scoreElement.textContent = `Score: ${score}`;
        }

        function increaseSpeed() {
            if (gameSpeed > 50) {
                gameSpeed -= 5;
                clearInterval(gameLoop);
                gameLoop = setInterval(drawGame, gameSpeed);
            }
        }

        function changeDirection(newDx, newDy) {
            if ((newDx === 1 && dx === -1) || (newDx === -1 && dx === 1) ||
                (newDy === 1 && dy === -1) || (newDy === -1 && dy === 1)) {
                return; // Prevent 180-degree turns
            }
            dx = newDx;
            dy = newDy;
        }

        function handleKeyDown(e) {
            const LEFT_KEY = 37;
            const RIGHT_KEY = 39;
            const UP_KEY = 38;
            const DOWN_KEY = 40;

            switch (e.keyCode) {
                case LEFT_KEY:
                    changeDirection(-1, 0);
                    break;
                case UP_KEY:
                    changeDirection(0, -1);
                    break;
                case RIGHT_KEY:
                    changeDirection(1, 0);
                    break;
                case DOWN_KEY:
                    changeDirection(0, 1);
                    break;
            }
        }

        function startGame() {
            snake = [{x: 10, y: 10}];
            food = {x: 5, y: 5};
            dx = 0;
            dy = 0;
            score = 0;
            gameSpeed = 200;
            startButton.style.display = 'none';
            gameOverMessage.classList.add('hidden');
            gameLoop = setInterval(drawGame, gameSpeed);
        }

        document.addEventListener('keydown', handleKeyDown);
        startButton.addEventListener('click', startGame);

        // Mobile controls
        document.getElementById('upButton').addEventListener('click', () => changeDirection(0, -1));
        document.getElementById('leftButton').addEventListener('click', () => changeDirection(-1, 0));
        document.getElementById('downButton').addEventListener('click', () => changeDirection(0, 1));
        document.getElementById('rightButton').addEventListener('click', () => changeDirection(1, 0));

        // Swipe controls
        let touchStartX = 0;
        let touchStartY = 0;

        canvas.addEventListener('touchstart', function(e) {
            touchStartX = e.changedTouches[0].screenX;
            touchStartY = e.changedTouches[0].screenY;
        }, false);

        canvas.addEventListener('touchend', function(e) {
            let touchEndX = e.changedTouches[0].screenX;
            let touchEndY = e.changedTouches[0].screenY;
            handleSwipe(touchStartX, touchStartY, touchEndX, touchEndY);
        }, false);

        function handleSwipe(startX, startY, endX, endY) {
            const dx = endX - startX;
            const dy = endY - startY;
            if (Math.abs(dx) > Math.abs(dy)) {
                changeDirection(dx > 0 ? 1 : -1, 0);
            } else {
                changeDirection(0, dy > 0 ? 1 : -1);
            }
        }
    </script>
</body>
</html>

SPARKS

Improved Mobile-Friendly Snake Game