Spaces:

Etik94
/

trouble-bubble

Running

App Files Files Community

Etik94 commited on Sep 16, 2025

Commit

4c7f1e8

verified ·

1 Parent(s): 4f00d1d

creat a new htlm link that is working for Web, phone and tablet - Follow Up Deployment

Browse files

Files changed (3) hide show

game.html +252 -0
index.html +2 -2
prompts.txt +2 -1

game.html ADDED Viewed

	@@ -0,0 +1,252 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Bubble Trouble Game</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            touch-action: manipulation;
+            background: linear-gradient(to bottom right, #4a00e0, #8e2de2);
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            font-family: Arial, sans-serif;
+            color: white;
+        }
+        #gameContainer {
+            width: 100%;
+            height: 100%;
+            position: relative;
+        }
+        .smiley {
+            position: absolute;
+            font-size: 40px;
+            cursor: pointer;
+            user-select: none;
+            -webkit-user-select: none;
+            animation: float 2s infinite ease-in-out;
+            text-shadow: 0 0 10px rgba(255,255,255,0.5);
+            transition: transform 0.2s;
+        }
+        .smiley:hover {
+            transform: scale(1.2);
+        }
+        #scoreDisplay {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            font-size: 24px;
+            background: rgba(0,0,0,0.5);
+            padding: 10px 20px;
+            border-radius: 20px;
+            z-index: 100;
+        }
+        #timerDisplay {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            font-size: 24px;
+            background: rgba(0,0,0,0.5);
+            padding: 10px 20px;
+            border-radius: 20px;
+            z-index: 100;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-20px); }
+        }
+        #gameOver {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.8);
+            display: none;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 200;
+        }
+        #gameOver h1 {
+            font-size: 48px;
+            color: #ffcc00;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+        #finalScore {
+            font-size: 36px;
+            margin-bottom: 30px;
+        }
+        #restartButton {
+            padding: 15px 30px;
+            background: linear-gradient(to right, #ff416c, #ff4b2b);
+            border: none;
+            border-radius: 30px;
+            color: white;
+            font-size: 18px;
+            cursor: pointer;
+            transition: transform 0.3s;
+        }
+        #restartButton:hover {
+            transform: scale(1.1);
+        }
+    </style>
+</head>
+<body>
+    <div id="gameContainer">
+        <div id="scoreDisplay">Score: 0</div>
+        <div id="timerDisplay">Time: 30s</div>
+        <div id="gameOver">
+            <h1>🎉 Congratulations! 🎉</h1>
+            <div id="finalScore">Your score: 0</div>
+            <button id="restartButton">Play Again</button>
+        </div>
+    </div>
+    <script>
+        // Game variables
+        let score = 0;
+        let timeLeft = 30;
+        let gameActive = false;
+        let gameInterval;
+        let timerInterval;
+        const smileys = ['😀', '😊', '🤩', '😎', '🥳', '😍', '🤪', '😜', '😂', '😇'];
+        // DOM elements
+        const gameContainer = document.getElementById('gameContainer');
+        const scoreDisplay = document.getElementById('scoreDisplay');
+        const timerDisplay = document.getElementById('timerDisplay');
+        const gameOverScreen = document.getElementById('gameOver');
+        const finalScoreDisplay = document.getElementById('finalScore');
+        const restartButton = document.getElementById('restartButton');
+        // Start game
+        startGame();
+        function startGame() {
+            // Reset game state
+            score = 0;
+            timeLeft = 30;
+            gameActive = true;
+            // Clear any existing elements
+            gameContainer.querySelectorAll('.smiley').forEach(el => el.remove());
+            // Update displays
+            scoreDisplay.textContent = `Score: ${score}`;
+            timerDisplay.textContent = `Time: ${timeLeft}s`;
+            // Hide game over screen
+            gameOverScreen.style.display = 'none';
+            // Start game loop
+            gameInterval = setInterval(spawnSmiley, 500);
+            // Start timer
+            timerInterval = setInterval(updateTimer, 1000);
+        }
+        function spawnSmiley() {
+            if (!gameActive) return;
+            const smiley = document.createElement('div');
+            smiley.className = 'smiley';
+            smiley.textContent = smileys[Math.floor(Math.random() * smileys.length)];
+            // Random position (with margins)
+            const x = Math.random() * (window.innerWidth - 100) + 50;
+            const y = Math.random() * (window.innerHeight - 100) + 50;
+            smiley.style.left = `${x}px`;
+            smiley.style.top = `${y}px`;
+            // Random size
+            const size = Math.random() * 30 + 30;
+            smiley.style.fontSize = `${size}px`;
+            // Click handler
+            smiley.addEventListener('click', () => {
+                if (!gameActive) return;
+                score++;
+                scoreDisplay.textContent = `Score: ${score}`;
+                // Animation when clicked
+                smiley.style.transform = 'scale(1.5)';
+                smiley.style.opacity = '0';
+                setTimeout(() => smiley.remove(), 200);
+            });
+            // Auto-remove after 2 seconds if not clicked
+            setTimeout(() => {
+                if (smiley.parentNode) smiley.remove();
+            }, 2000);
+            gameContainer.appendChild(smiley);
+        }
+        function updateTimer() {
+            timeLeft--;
+            timerDisplay.textContent = `Time: ${timeLeft}s`;
+            if (timeLeft <= 0) {
+                endGame();
+            }
+        }
+        function endGame() {
+            gameActive = false;
+            clearInterval(gameInterval);
+            clearInterval(timerInterval);
+            // Show game over screen
+            finalScoreDisplay.textContent = `Your score: ${score}`;
+            gameOverScreen.style.display = 'flex';
+        }
+        // Restart button handler
+        restartButton.addEventListener('click', startGame);
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            if (gameActive) {
+                // Reposition all smileys to stay visible
+                document.querySelectorAll('.smiley').forEach(smiley => {
+                    const x = Math.random() * (window.innerWidth - 100) + 50;
+                    const y = Math.random() * (window.innerHeight - 100) + 50;
+                    smiley.style.left = `${x}px`;
+                    smiley.style.top = `${y}px`;
+                });
+            }
+        });
+        // Prevent default touch behavior
+        document.addEventListener('touchstart', (e) => {
+            if (e.target === gameContainer) e.preventDefault();
+        }, { passive: false });
+        document.addEventListener('touchend', (e) => {
+            if (e.target === gameContainer) e.preventDefault();
+        }, { passive: false });
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -74,8 +74,8 @@
                 <a href="#play" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105 shadow-lg">
                     Play Now
                 </a>
-                <a href="#features" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-900 font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105">
-                    Learn More
                 </a>
             </div>
         </div>

                 <a href="#play" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105 shadow-lg">
                     Play Now
                 </a>
+                <a href="game.html" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-900 font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105">
+                    Full Screen Game
                 </a>
             </div>
         </div>

prompts.txt CHANGED Viewed

@@ -14,4 +14,5 @@ Delite it
 delite it
 make the Congratulations Window more colorful
 it is not working in the Webside. Change it that it works
-delete it

 delite it
 make the Congratulations Window more colorful
 it is not working in the Webside. Change it that it works
+delete it
+creat a new htlm link that is working for Web, phone and tablet