解压小动物游戏-CSDN博客

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小动物点击游戏</title>
    <!-- 引入 Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Custom styles for the game to ensure animals drop from the top */
        body {
            font-family: 'Inter', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f4f8; /* Light blue background */
            overflow: hidden; /* Prevent scrollbars */
        }
        .game-container {
            position: relative;
            width: 100vw; /* Full viewport width */
            height: 100vh; /* Full viewport height */
            background-color: #e0f2f7; /* Light aqua blue */
            overflow: hidden; /* Hide animals that go out of bounds */
        }
        .animal {
            position: absolute;
            font-size: 3rem; /* Animal emoji size */
            cursor: pointer;
            user-select: none; /* Prevent text selection */
            transition: opacity 0.3s ease-out; /* Opacity transition on click */
            will-change: transform, top, opacity; /* Optimize animation performance */
            pointer-events: auto; /* Ensure clickable */
            line-height: 1; /* Ensure emoji is centered */
            text-align: center; /* Ensure emoji is centered */
            width: 60px; /* Fixed animal width */
            height: 60px; /* Fixed animal height */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .animal:active {
            transform: scale(0.9); /* Scale down on click for visual feedback */
        }

        /* Animated message box style */
        .message-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 20px 30px;
            border-radius: 15px;
            font-size: 1.8rem; /* Larger font size for messages */
            font-weight: bold;
            text-align: center;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            pointer-events: none; /* Do not block click events */
        }

        .message-box.show {
            opacity: 1;
        }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100 p-0">
    <div class="game-container relative">
        <!-- Game area where animals will appear -->
    </div>

    <div id="messageBox" class="message-box"></div>

    <script>
        // Get necessary DOM elements
        const gameContainer = document.querySelector('.game-container');
        const messageBox = document.getElementById('messageBox');

        // Define array of available animal emojis, the more the better
        const animals = [
            '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐒',
            '🐔', '🐧', '🐦', '🐥', '🦆', '🦅', '🦉', '🦇', '🐺', '🐗', '🐴', '🦄', '🐝', '🐛', '🦋',
            '🐌', '🐞', '🐜', '🕷️', '🦂', '🐢', '🐍', '🦎', '🦖', '🦕', '🐙', '🦑', '🦐', '🦞', '🦀',
            '🐡', '🐠', '🦈', '🐬', '🐳', '🐋', '🐊', '🐅', '🐆', '🦓', '🦍', '🦧', '🐘', '🦏', '🦛',
            '🦒', '🐪', '🐫', '🐃', '🐂', '🐄', '🐎', '🐖', '🐏', '🐑', '🐐', '🦌', '🐕', '🐩', '🐈',
            '🐓', '🦃', '🕊️', '🐇', '🐁', '🐀', '🐿️', '🦔', '🦨', '🦡', '🦦', '🦥', '🦦', '🦩', '🦜',
            '🦢', '🦚', '🪶', '🦬', '🦣', '🦫', '🦡', '🪰', '🪲', '🪳', '🐠', '🐡', '🦈', '🐬', '🐳',
            '🐋', '🐊', '🐅', '🐆', '🦓', '🦍', '🦧', '🐘', '🦏', '🦒', '🐪', '🐫', '🐃', '🐂', '🐄',
            '🐎', '🐖', '🐏', '🐑', '🐐', '🦌', '🐕', '🐩', '🐈', '🐓', '🦃', '🕊️', '🐇', '🐁', '🐀',
            '🐿️', '🦔', '🦨', '🦡', '🦦', '🦥', '🦜', '🦢', '🦚', '🪶', '🦬', '🦣', '🦫', '🦡', '🪰',
            '🪲', '🪳', '🐾', '🐻‍❄️', '🦔', '🦨', '🦡', '🦦', '🦥', '🦢', '🦚', '🪶', '🦬', '🦣', '🦫',
            '🪰', '🪲', '🪳', '🐜', '🕷️', '🦂', '🦗', '🦟', '🦠', '🦖', '🦕', '🐢', '🐍', '🦎', '🦀',
            '🦐', '🦑', '🐙', '🐡', '🐠', '🦈', '🐬', '🐳', '🐋', '🐟', '🐡', '🐙', '🐚', '🐌', '🦋',
            '🐛', '🐝', '🐞', '🦗', '🦟', '🕷️', '🦂', '🦖', '🦕', '🕊️', '🦅', '🦆', '🦢', '🦉', '🦩',
            '🦜', '🐓', '🦃', '🐧', '🦢', '🕊️', '🦅', '🦉', '🦩', '🦜', '🐾'
        ];

        // Relaxing messages to display on animal click
        const relaxingMessages = [
            '真棒！', '好心情！', '放松一下吧！', '继续加油！', '你真棒！', '享受这一刻！',
            '压力不见了！', '心情愉悦！', '棒极了！', '轻松自在！', '太可爱了！', '烦恼走开！',
            '生活真美好！', '一切顺利！', '加油呀！', '小动物爱你！', '开开心心！', '超级棒！',
            '充满活力！', '幸福感满满！', '点点点！', '继续点击！', '超棒哒！', '可可爱爱！'
        ];

        let lastSpawnTime = 0;
        // Increased spawnInterval for slower generation
        const spawnInterval = 1500; // Generate an animal every 1.5 seconds, even slower
        const initialAnimals = 8; // Number of animals at the start of the game, slightly fewer
        const maxAnimals = 80; // Maximum number of animals allowed on screen, further reduced

        const animalSize = 60; // Size of the animals (width and height in pixels)

        // Function to display messages
        function showMessage(msg, duration = 1500) {
            messageBox.textContent = msg;
            messageBox.classList.add('show');
            setTimeout(() => {
                messageBox.classList.remove('show');
            }, duration);
        }

        // Function to create an animal element
        function createAnimal() {
            // Get current number of animals on screen (excluding messageBox)
            const currentAnimalsOnScreen = gameContainer.querySelectorAll('.animal').length;
            if (currentAnimalsOnScreen >= maxAnimals) {
                return;
            }

            const animalDiv = document.createElement('div');
            animalDiv.classList.add('animal');
            animalDiv.textContent = animals[Math.floor(Math.random() * animals.length)];

            // Random initial horizontal position
            const randomLeft = Math.random() * (gameContainer.offsetWidth - animalSize);
            animalDiv.style.left = `${randomLeft}px`;
            // Start falling from a random position above the container
            animalDiv.style.top = `${-Math.random() * 200 - 50}px`;

            // Store vertical velocity in dataset for simple physics
            animalDiv.dataset.velocityY = (Math.random() * 0.5) + 0.5; // Speed between 0.5 and 1.0

            // Add click event listener to the animal
            animalDiv.addEventListener('click', () => animalClicked(animalDiv));

            gameContainer.appendChild(animalDiv);
        }

        // Handler when an animal is clicked
        function animalClicked(animalDiv) {
            // Apply a simple visual scale down on click
            animalDiv.style.transform = 'scale(0.9)';
            // Remove the animal after a short delay with fade-out
            animalDiv.style.opacity = '0';

            setTimeout(() => {
                if (gameContainer.contains(animalDiv)) {
                    gameContainer.removeChild(animalDiv);
                }
            }, 500); // Remove after 0.5 seconds

            // Display a random relaxing message
            const randomMessage = relaxingMessages[Math.floor(Math.random() * relaxingMessages.length)];
            showMessage(randomMessage, 1500); // Show message for 1.5 seconds

            // Generate 1 new animal on each click, for a very controlled pace
            createAnimal();
        }

        // Game loop for updating animal positions
        function gameLoop(currentTime) {
            // If enough time has passed since the last spawn, create a new animal
            if (currentTime - lastSpawnTime > spawnInterval) {
                createAnimal();
                lastSpawnTime = currentTime;
            }

            // Get all current animals on screen
            const currentAnimals = gameContainer.querySelectorAll('.animal');
            currentAnimals.forEach(animal => {
                let currentTop = parseFloat(animal.style.top);
                let velocityY = parseFloat(animal.dataset.velocityY);

                // Update animal's vertical position
                currentTop += velocityY;
                animal.style.top = `${currentTop}px`;

                // If the animal falls out of bounds, remove it
                if (currentTop > gameContainer.offsetHeight + 100) { // 100px below the container
                    if (gameContainer.contains(animal)) {
                        gameContainer.removeChild(animal);
                    }
                }
            });

            requestAnimationFrame(gameLoop); // Request next animation frame
        }

        // Start the game after the page loads
        window.onload = function() {
            // Initially generate some animals
            for (let i = 0; i < initialAnimals; i++) {
                createAnimal();
            }
            // Start the game loop
            requestAnimationFrame(gameLoop);
            showMessage('点击小动物，享受放松时刻！'); // Updated welcome message
        };

        // Responsive handling when game container size changes
        window.addEventListener('resize', () => {
            // Ensure animals don't go out of bounds on resize
            gameContainer.querySelectorAll('.animal').forEach(animal => {
                const currentLeft = parseFloat(animal.style.left);
                if (currentLeft + animal.offsetWidth > gameContainer.offsetWidth) {
                    animal.style.left = `${gameContainer.offsetWidth - animal.offsetWidth}px`;
                }
            });
        });
    </script>
</body>
</html>
源码