Spaces:

Davi111
/

games

Running

App Files Files Community

Davi111 commited on Apr 29, 2025

Commit

c193c4f

verified ·

1 Parent(s): c1c4e43

Add 2 files

Browse files

Files changed (2) hide show

index.html +596 -397
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Free Fire Lite - Battle Royale</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
@@ -13,458 +13,657 @@
             font-family: 'Poppins', sans-serif;
             background-color: #0f172a;
             color: white;
-            overflow-x: hidden;
         }
-        .hero-gradient {
-            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
         }
-        .btn-glow {
-            box-shadow: 0 0 15px rgba(234, 88, 12, 0.7);
-            transition: all 0.3s ease;
         }
-        .btn-glow:hover {
-            box-shadow: 0 0 25px rgba(234, 88, 12, 0.9);
-            transform: translateY(-2px);
         }
-        .character-card {
-            transition: all 0.3s ease;
-            transform-style: preserve-3d;
         }
-        .character-card:hover {
-            transform: translateY(-10px) scale(1.03);
         }
-        .game-mode-card {
-            background: rgba(30, 41, 59, 0.7);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            transition: all 0.3s ease;
         }
-        .game-mode-card:hover {
-            background: rgba(234, 88, 12, 0.2);
-            border-color: rgba(234, 88, 12, 0.5);
         }
-        .nav-link {
-            position: relative;
         }
-        .nav-link::after {
-            content: '';
             position: absolute;
-            width: 0;
-            height: 2px;
-            bottom: -2px;
             left: 0;
             background-color: #ea580c;
-            transition: width 0.3s ease;
         }
-        .nav-link:hover::after {
             width: 100%;
         }
-        .countdown-timer {
-            font-family: 'Poppins', sans-serif;
-            font-weight: 800;
-            text-shadow: 0 0 10px rgba(234, 88, 12, 0.7);
         }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
         }
-        .pulse-animation {
-            animation: pulse 2s infinite;
         }
     </style>
 </head>
 <body>
-    <!-- Navigation -->
-    <nav class="bg-gray-900/80 backdrop-blur-md fixed w-full z-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex items-center justify-between h-16">
-                <div class="flex items-center">
-                    <div class="flex-shrink-0">
-                        <img class="h-10" src="https://via.placeholder.com/150x60?text=Free+Fire+Lite" alt="Free Fire Lite">
-                    </div>
-                    <div class="hidden md:block">
-                        <div class="ml-10 flex items-baseline space-x-4">
-                            <a href="#" class="nav-link text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
-                            <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Characters</a>
-                            <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Modes</a>
-                            <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Events</a>
-                            <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Shop</a>
-                        </div>
-                    </div>
-                </div>
-                <div class="hidden md:block">
-                    <div class="ml-4 flex items-center md:ml-6">
-                        <button class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
-                            <i class="fas fa-download mr-2"></i> Download Now
-                        </button>
-                    </div>
                 </div>
-                <div class="-mr-2 flex md:hidden">
-                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
-                        <span class="sr-only">Open main menu</span>
-                        <i class="fas fa-bars"></i>
-                    </button>
                 </div>
             </div>
         </div>
-    </nav>
-    <!-- Hero Section -->
-    <section class="hero-gradient pt-24 pb-16 md:pt-32 md:pb-24">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="md:flex md:items-center md:justify-between">
-                <div class="md:w-1/2 mb-10 md:mb-0">
-                    <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-4">
-                        <span class="text-orange-500">FREE FIRE</span> LITE
-                    </h1>
-                    <p class="text-lg md:text-xl text-gray-300 mb-8">
-                        The ultimate battle royale experience optimized for all devices. Join 50 players in a 10-minute survival match!
-                    </p>
-                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                        <button class="btn-glow bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-lg font-bold flex items-center justify-center">
-                            <i class="fas fa-play mr-2"></i> Play Now
-                        </button>
-                        <button class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-bold flex items-center justify-center">
-                            <i class="fas fa-info-circle mr-2"></i> Learn More
-                        </button>
-                    </div>
-                    <div class="mt-8 flex items-center space-x-4">
-                        <div class="flex -space-x-2">
-                            <img class="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
-                            <img class="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
-                            <img class="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/45.jpg" alt="">
-                        </div>
-                        <div>
-                            <p class="text-sm text-gray-300">Join <span class="font-bold text-white">10M+</span> players worldwide</p>
-                            <div class="flex items-center text-yellow-400 text-xs">
-                                <i class="fas fa-star"></i>
-                                <i class="fas fa-star"></i>
-                                <i class="fas fa-star"></i>
-                                <i class="fas fa-star"></i>
-                                <i class="fas fa-star-half-alt"></i>
-                                <span class="ml-1 text-gray-300">4.7 (2.3M reviews)</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="md:w-1/2 relative">
-                    <img src="https://via.placeholder.com/600x400?text=Game+Screenshot" alt="Free Fire Lite Gameplay" class="rounded-lg shadow-2xl border border-gray-700 w-full">
-                    <div class="absolute -bottom-6 -right-6 bg-orange-600 text-white px-4 py-2 rounded-lg font-bold flex items-center">
-                        <i class="fas fa-trophy mr-2"></i>
-                        <span>Season 12</span>
-                    </div>
-                </div>
             </div>
         </div>
-    </section>
-    <!-- Characters Section -->
-    <section class="py-16 bg-gray-900">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-12">
-                <h2 class="text-3xl font-bold text-white mb-2">Choose Your Character</h2>
-                <p class="text-gray-400 max-w-2xl mx-auto">Each character has unique abilities to help you survive in the battlefield</p>
-            </div>
-            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                <!-- Character 1 -->
-                <div class="character-card bg-gray-800 rounded-lg overflow-hidden shadow-lg">
-                    <div class="relative">
-                        <img src="https://via.placeholder.com/300x400?text=Character+1" alt="Character" class="w-full h-64 object-cover">
-                        <div class="absolute top-2 right-2 bg-orange-600 text-white text-xs px-2 py-1 rounded">NEW</div>
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-xl font-bold text-white mb-1">Alok</h3>
-                        <p class="text-gray-400 text-sm mb-3">Drop the Beat</p>
-                        <div class="flex justify-between items-center">
-                            <span class="text-orange-500 font-bold">Active Skill</span>
-                            <button class="text-white bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">
-                                <i class="fas fa-info-circle"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <!-- Character 2 -->
-                <div class="character-card bg-gray-800 rounded-lg overflow-hidden shadow-lg">
-                    <div class="relative">
-                        <img src="https://via.placeholder.com/300x400?text=Character+2" alt="Character" class="w-full h-64 object-cover">
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-xl font-bold text-white mb-1">K</h3>
-                        <p class="text-gray-400 text-sm mb-3">Master of All</p>
-                        <div class="flex justify-between items-center">
-                            <span class="text-orange-500 font-bold">Active Skill</span>
-                            <button class="text-white bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">
-                                <i class="fas fa-info-circle"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <!-- Character 3 -->
-                <div class="character-card bg-gray-800 rounded-lg overflow-hidden shadow-lg">
-                    <div class="relative">
-                        <img src="https://via.placeholder.com/300x400?text=Character+3" alt="Character" class="w-full h-64 object-cover">
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-xl font-bold text-white mb-1">Chrono</h3>
-                        <p class="text-gray-400 text-sm mb-3">Time Turner</p>
-                        <div class="flex justify-between items-center">
-                            <span class="text-orange-500 font-bold">Active Skill</span>
-                            <button class="text-white bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">
-                                <i class="fas fa-info-circle"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <!-- Character 4 -->
-                <div class="character-card bg-gray-800 rounded-lg overflow-hidden shadow-lg">
-                    <div class="relative">
-                        <img src="https://via.placeholder.com/300x400?text=Character+4" alt="Character" class="w-full h-64 object-cover">
-                        <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs px-2 py-1 rounded">ELITE</div>
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-xl font-bold text-white mb-1">Skyler</h3>
-                        <p class="text-gray-400 text-sm mb-3">Riptide Rhythm</p>
-                        <div class="flex justify-between items-center">
-                            <span class="text-orange-500 font-bold">Active Skill</span>
-                            <button class="text-white bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">
-                                <i class="fas fa-info-circle"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="text-center mt-10">
-                <button class="border-2 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white px-6 py-2 rounded-lg font-bold">
-                    View All Characters
-                </button>
-            </div>
-        </div>
-    </section>
-    <!-- Game Modes Section -->
-    <section class="py-16 bg-gray-800">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-12">
-                <h2 class="text-3xl font-bold text-white mb-2">Game Modes</h2>
-                <p class="text-gray-400 max-w-2xl mx-auto">Different ways to experience the battle royale</p>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                <!-- Mode 1 -->
-                <div class="game-mode-card rounded-lg p-6">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-orange-600 p-3 rounded-lg mr-4">
-                            <i class="fas fa-skull text-white text-xl"></i>
-                        </div>
-                        <h3 class="text-xl font-bold text-white">Battle Royale</h3>
-                    </div>
-                    <p class="text-gray-300 mb-4">The classic 50-player survival match. Be the last one standing to claim victory!</p>
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm text-gray-400">10 min matches</span>
-                        <span class="text-sm font-bold text-orange-500">50 Players</span>
-                    </div>
-                </div>
-                <!-- Mode 2 -->
-                <div class="game-mode-card rounded-lg p-6">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-blue-600 p-3 rounded-lg mr-4">
-                            <i class="fas fa-users text-white text-xl"></i>
-                        </div>
-                        <h3 class="text-xl font-bold text-white">Clash Squad</h3>
-                    </div>
-                    <p class="text-gray-300 mb-4">Fast-paced 4v4 matches with economy rounds. First to win 7 rounds wins!</p>
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm text-gray-400">5 min matches</span>
-                        <span class="text-sm font-bold text-blue-500">4v4</span>
-                    </div>
-                </div>
-                <!-- Mode 3 -->
-                <div class="game-mode-card rounded-lg p-6">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-purple-600 p-3 rounded-lg mr-4">
-                            <i class="fas fa-ghost text-white text-xl"></i>
-                        </div>
-                        <h3 class="text-xl font-bold text-white">Lone Wolf</h3>
-                    </div>
-                    <p class="text-gray-300 mb-4">Solo survival against 49 other players. No teams, just pure survival skills.</p>
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm text-gray-400">10 min matches</span>
-                        <span class="text-sm font-bold text-purple-500">Solo</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Event Countdown -->
-    <section class="py-16 bg-gradient-to-r from-orange-900/50 to-orange-800/50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="bg-gray-900/70 rounded-xl p-8 backdrop-blur-md border border-gray-700">
-                <div class="md:flex items-center justify-between">
-                    <div class="md:w-1/2 mb-8 md:mb-0">
-                        <h2 class="text-2xl md:text-3xl font-bold text-white mb-2">Season 12: Cyber Revolution</h2>
-                        <p class="text-gray-300 mb-4">New characters, weapons, and a futuristic map await in the latest season!</p>
-                        <div class="flex items-center space-x-2">
-                            <span class="text-sm text-gray-400">Starts in:</span>
-                            <div id="countdown" class="countdown-timer text-xl font-bold text-orange-500"></div>
-                        </div>
-                    </div>
-                    <div class="md:w-1/2">
-                        <div class="bg-gray-800 rounded-lg overflow-hidden">
-                            <img src="https://via.placeholder.com/600x300?text=Season+12+Event" alt="Season 12 Event" class="w-full h-full object-cover">
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Download Section -->
-    <section class="py-16 bg-gray-900">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="bg-gradient-to-r from-orange-600 to-orange-800 rounded-2xl p-8 md:p-12 shadow-2xl">
-                <div class="md:flex items-center justify-between">
-                    <div class="md:w-2/3 mb-8 md:mb-0">
-                        <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Ready to Join the Battle?</h2>
-                        <p class="text-orange-100 mb-6">Download Free Fire Lite now and experience the optimized battle royale on any device!</p>
-                        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                            <button class="pulse-animation bg-white hover:bg-gray-100 text-orange-600 px-6 py-3 rounded-lg font-bold flex items-center justify-center">
-                                <i class="fab fa-google-play mr-2 text-xl"></i>
-                                <div class="text-left">
-                                    <div class="text-xs">GET IT ON</div>
-                                    <div class="text-lg">Google Play</div>
-                                </div>
-                            </button>
-                            <button class="pulse-animation bg-white hover:bg-gray-100 text-orange-600 px-6 py-3 rounded-lg font-bold flex items-center justify-center">
-                                <i class="fab fa-apple mr-2 text-xl"></i>
-                                <div class="text-left">
-                                    <div class="text-xs">Download on the</div>
-                                    <div class="text-lg">App Store</div>
-                                </div>
-                            </button>
-                        </div>
-                    </div>
-                    <div class="md:w-1/3 flex justify-center">
-                        <img src="https://via.placeholder.com/200x200?text=App+Icon" alt="Free Fire Lite" class="w-40 h-40 rounded-xl border-4 border-white shadow-lg">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Footer -->
-    <footer class="bg-gray-900 border-t border-gray-800">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                <div>
-                    <img src="https://via.placeholder.com/150x60?text=Free+Fire+Lite" alt="Free Fire Lite" class="h-10 mb-4">
-                    <p class="text-gray-400 text-sm">The ultimate battle royale experience optimized for all devices.</p>
-                    <div class="flex space-x-4 mt-4">
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
-                    </div>
-                </div>
-                <div>
-                    <h3 class="text-white font-bold mb-4">Game</h3>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Modes</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Characters</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Maps</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Weapons</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Rankings</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h3 class="text-white font-bold mb-4">Support</h3>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Help Center</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Community</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Feedback</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h3 class="text-white font-bold mb-4">Contact</h3>
-                    <ul class="space-y-2">
-                        <li class="text-gray-400 text-sm">Email: support@freefirelite.com</li>
-                        <li class="text-gray-400 text-sm">Phone: +1 (555) 123-4567</li>
-                        <li class="text-gray-400 text-sm">Address: 123 Game Street, CA</li>
-                    </ul>
-                </div>
-            </div>
-            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
-                <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Free Fire Lite. All rights reserved.</p>
-                <div class="flex space-x-6">
-                    <a href="#" class="text-gray-500 hover:text-white text-sm">Privacy</a>
-                    <a href="#" class="text-gray-500 hover:text-white text-sm">Terms</a>
-                    <a href="#" class="text-gray-500 hover:text-white text-sm">Cookies</a>
-                </div>
-            </div>
-        </div>
-    </footer>
-    <script>
-        // Countdown timer
-        function updateCountdown() {
-            const now = new Date();
-            const eventDate = new Date();
-            eventDate.setDate(now.getDate() + 3); // 3 days from now
-            eventDate.setHours(12, 0, 0, 0); // Set to noon
-            const diff = eventDate - now;
-            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
-            document.getElementById('countdown').innerHTML =
-                `${days}d ${hours}h ${minutes}m ${seconds}s`;
         }
-        setInterval(updateCountdown, 1000);
-        updateCountdown();
-        // Mobile menu toggle
-        const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]');
-        mobileMenuButton.addEventListener('click', function() {
-            // This would toggle a mobile menu in a real implementation
-            console.log('Mobile menu toggled');
-        });
-        // Character card hover effects
-        const characterCards = document.querySelectorAll('.character-card');
-        characterCards.forEach(card => {
-            card.addEventListener('mouseenter', function() {
-                this.style.transform = 'translateY(-10px) scale(1.03)';
-            });
-            card.addEventListener('mouseleave', function() {
-                this.style.transform = '';
-            });
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Davi111/games" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Free Fire 2D</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
             font-family: 'Poppins', sans-serif;
             background-color: #0f172a;
             color: white;
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
         }
+        #gameContainer {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+            overflow: hidden;
+            background-color: #1e293b;
+            background-image:
+                linear-gradient(#1e293b 1px, transparent 1px),
+                linear-gradient(90deg, #1e293b 1px, transparent 1px);
+            background-size: 40px 40px;
         }
+        #player {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background-color: #ea580c;
+            border-radius: 50%;
+            z-index: 10;
+            box-shadow: 0 0 10px rgba(234, 88, 12, 0.7);
         }
+        .enemy {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            background-color: #dc2626;
+            border-radius: 50%;
+            z-index: 5;
         }
+        .bullet {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background-color: #f59e0b;
+            border-radius: 50%;
+            z-index: 8;
         }
+        .weapon {
+            position: absolute;
+            width: 20px;
+            height: 10px;
+            background-color: #64748b;
+            border-radius: 3px;
         }
+        .health-pack {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background-color: #10b981;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 10px;
         }
+        #uiContainer {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 20;
         }
+        #healthBar {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            width: 200px;
+            height: 20px;
+            background-color: #334155;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        #healthFill {
+            height: 100%;
+            width: 100%;
+            background-color: #10b981;
+            transition: width 0.3s;
+        }
+        #ammoCount {
+            position: absolute;
+            top: 50px;
+            left: 20px;
+            font-size: 16px;
+            color: white;
         }
+        #scoreDisplay {
             position: absolute;
+            top: 20px;
+            right: 20px;
+            font-size: 24px;
+            color: white;
+        }
+        #gameOverScreen {
+            position: absolute;
+            top: 0;
             left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+            display: none;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 30;
+        }
+        #startScreen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(15, 23, 42, 0.9);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 40;
+        }
+        .btn {
             background-color: #ea580c;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            font-size: 18px;
+            border-radius: 8px;
+            cursor: pointer;
+            margin-top: 20px;
+            font-weight: bold;
+            box-shadow: 0 0 15px rgba(234, 88, 12, 0.5);
+            transition: all 0.3s;
+        }
+        .btn:hover {
+            background-color: #c2410c;
+            transform: translateY(-2px);
+            box-shadow: 0 0 20px rgba(234, 88, 12, 0.8);
         }
+        .controls {
+            position: absolute;
+            bottom: 20px;
             width: 100%;
+            display: flex;
+            justify-content: space-between;
+            padding: 0 20px;
+            box-sizing: border-box;
         }
+        .control-btn {
+            width: 60px;
+            height: 60px;
+            background-color: rgba(30, 41, 59, 0.7);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 24px;
+            cursor: pointer;
+            pointer-events: auto;
+            user-select: none;
+            touch-action: manipulation;
         }
+        #joystick {
+            position: relative;
+            width: 80px;
+            height: 80px;
+            background-color: rgba(30, 41, 59, 0.5);
+            border-radius: 50%;
         }
+        #joystickKnob {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background-color: rgba(234, 88, 12, 0.7);
+            border-radius: 50%;
+            top: 20px;
+            left: 20px;
+        }
+        #shootBtn {
+            background-color: rgba(220, 38, 38, 0.7);
         }
     </style>
 </head>
 <body>
+    <div id="gameContainer">
+        <div id="player"></div>
+        <!-- Enemies, bullets, and items will be added dynamically -->
+        <div id="uiContainer">
+            <div id="healthBar">
+                <div id="healthFill"></div>
+            </div>
+            <div id="ammoCount">Ammo: 30/30</div>
+            <div id="scoreDisplay">Score: 0</div>
+            <div class="controls">
+                <div id="joystick">
+                    <div id="joystickKnob"></div>
                 </div>
+                <div id="shootBtn" class="control-btn">
+                    <i class="fas fa-fire"></i>
                 </div>
             </div>
         </div>
+        <div id="gameOverScreen">
+            <h1 class="text-4xl font-bold text-red-500 mb-4">GAME OVER</h1>
+            <p class="text-xl text-white mb-8">Your score: <span id="finalScore">0</span></p>
+            <button id="restartBtn" class="btn">Play Again</button>
+        </div>
+        <div id="startScreen">
+            <h1 class="text-5xl font-bold text-orange-500 mb-4">FREE FIRE 2D</h1>
+            <p class="text-xl text-gray-300 mb-8">Survive as long as you can!</p>
+            <button id="startBtn" class="btn">Start Game</button>
+            <div class="mt-8 text-gray-400 text-center">
+                <p class="mb-2">Controls:</p>
+                <p>Move: Drag the joystick</p>
+                <p>Shoot: Tap the fire button</p>
             </div>
         </div>
+    </div>
+    <script>
+        // Game variables
+        const player = document.getElementById('player');
+        const gameContainer = document.getElementById('gameContainer');
+        const healthFill = document.getElementById('healthFill');
+        const ammoCount = document.getElementById('ammoCount');
+        const scoreDisplay = document.getElementById('scoreDisplay');
+        const gameOverScreen = document.getElementById('gameOverScreen');
+        const finalScore = document.getElementById('finalScore');
+        const startScreen = document.getElementById('startScreen');
+        const startBtn = document.getElementById('startBtn');
+        const restartBtn = document.getElementById('restartBtn');
+        const joystick = document.getElementById('joystick');
+        const joystickKnob = document.getElementById('joystickKnob');
+        const shootBtn = document.getElementById('shootBtn');
+        let gameWidth = gameContainer.clientWidth;
+        let gameHeight = gameContainer.clientHeight;
+        let playerX = gameWidth / 2;
+        let playerY = gameHeight / 2;
+        let playerSpeed = 5;
+        let health = 100;
+        let ammo = 30;
+        let maxAmmo = 30;
+        let score = 0;
+        let gameRunning = false;
+        let enemies = [];
+        let bullets = [];
+        let weapons = [];
+        let healthPacks = [];
+        let lastShotTime = 0;
+        let shootCooldown = 300; // ms
+        let enemySpawnRate = 2000; // ms
+        let lastEnemySpawn = 0;
+        let joystickActive = false;
+        let joystickAngle = 0;
+        let joystickDistance = 0;
+        // Initialize player position
+        player.style.left = playerX + 'px';
+        player.style.top = playerY + 'px';
+        // Start screen
+        startBtn.addEventListener('click', startGame);
+        // Restart game
+        restartBtn.addEventListener('click', startGame);
+        // Touch controls for mobile
+        joystick.addEventListener('touchstart', handleJoystickStart);
+        joystick.addEventListener('touchmove', handleJoystickMove);
+        joystick.addEventListener('touchend', handleJoystickEnd);
+        // Mouse controls for desktop
+        joystick.addEventListener('mousedown', handleJoystickStart);
+        document.addEventListener('mousemove', handleJoystickMove);
+        document.addEventListener('mouseup', handleJoystickEnd);
+        // Shoot button
+        shootBtn.addEventListener('touchstart', shoot);
+        shootBtn.addEventListener('mousedown', shoot);
+        function startGame() {
+            // Reset game state
+            health = 100;
+            ammo = maxAmmo;
+            score = 0;
+            enemies = [];
+            bullets = [];
+            weapons = [];
+            healthPacks = [];
+            // Update UI
+            updateHealth();
+            updateAmmo();
+            updateScore();
+            // Clear all existing game elements
+            document.querySelectorAll('.enemy, .bullet, .weapon, .health-pack').forEach(el => el.remove());
+            // Hide screens
+            gameOverScreen.style.display = 'none';
+            startScreen.style.display = 'none';
+            // Reset player position
+            playerX = gameWidth / 2;
+            playerY = gameHeight / 2;
+            player.style.left = playerX + 'px';
+            player.style.top = playerY + 'px';
+            // Start game loop
+            gameRunning = true;
+            lastEnemySpawn = Date.now();
+            requestAnimationFrame(gameLoop);
+        }
+        function gameLoop() {
+            if (!gameRunning) return;
+            const now = Date.now();
+            // Spawn enemies
+            if (now - lastEnemySpawn > enemySpawnRate) {
+                spawnEnemy();
+                lastEnemySpawn = now;
+                // Increase difficulty
+                if (score > 0 && score % 5 === 0) {
+                    enemySpawnRate = Math.max(500, enemySpawnRate - 100);
+                }
+            }
+            // Move player if joystick is active
+            if (joystickActive) {
+                const moveX = Math.cos(joystickAngle) * playerSpeed * (joystickDistance / 40);
+                const moveY = Math.sin(joystickAngle) * playerSpeed * (joystickDistance / 40);
+                playerX = Math.max(20, Math.min(gameWidth - 20, playerX + moveX));
+                playerY = Math.max(20, Math.min(gameHeight - 20, playerY + moveY));
+                player.style.left = playerX + 'px';
+                player.style.top = playerY + 'px';
+            }
+            // Move enemies
+            enemies.forEach(enemy => {
+                const enemyX = parseFloat(enemy.style.left) + enemy.dataset.speedX;
+                const enemyY = parseFloat(enemy.style.top) + enemy.dataset.speedY;
+                // Keep enemy in bounds
+                if (enemyX < 15 || enemyX > gameWidth - 15) {
+                    enemy.dataset.speedX *= -1;
+                }
+                if (enemyY < 15 || enemyY > gameHeight - 15) {
+                    enemy.dataset.speedY *= -1;
+                }
+                enemy.style.left = enemyX + 'px';
+                enemy.style.top = enemyY + 'px';
+                // Check collision with player
+                if (checkCollision(player, enemy)) {
+                    takeDamage(10);
+                }
+            });
+            // Move bullets
+            bullets.forEach((bullet, index) => {
+                const bulletX = parseFloat(bullet.style.left) + bullet.dataset.speedX;
+                const bulletY = parseFloat(bullet.style.top) + bullet.dataset.speedY;
+                bullet.style.left = bulletX + 'px';
+                bullet.style.top = bulletY + 'px';
+                // Remove bullet if out of bounds
+                if (bulletX < 0 || bulletX > gameWidth || bulletY < 0 || bulletY > gameHeight) {
+                    bullet.remove();
+                    bullets.splice(index, 1);
+                    return;
+                }
+                // Check bullet collision with enemies
+                enemies.forEach((enemy, enemyIndex) => {
+                    if (checkCollision(bullet, enemy)) {
+                        // Remove both bullet and enemy
+                        bullet.remove();
+                        bullets.splice(index, 1);
+                        enemy.remove();
+                        enemies.splice(enemyIndex, 1);
+                        // Increase score
+                        score += 1;
+                        updateScore();
+                        // Random chance to drop weapon or health pack
+                        if (Math.random() < 0.2) {
+                            if (Math.random() < 0.5) {
+                                spawnWeapon(parseFloat(enemy.style.left), parseFloat(enemy.style.top));
+                            } else {
+                                spawnHealthPack(parseFloat(enemy.style.left), parseFloat(enemy.style.top));
+                            }
+                        }
+                    }
+                });
+            });
+            // Check weapon pickups
+            weapons.forEach((weapon, index) => {
+                if (checkCollision(player, weapon)) {
+                    // Increase ammo
+                    ammo = maxAmmo;
+                    updateAmmo();
+                    weapon.remove();
+                    weapons.splice(index, 1);
+                }
+            });
+            // Check health pack pickups
+            healthPacks.forEach((healthPack, index) => {
+                if (checkCollision(player, healthPack)) {
+                    // Increase health
+                    health = Math.min(100, health + 25);
+                    updateHealth();
+                    healthPack.remove();
+                    healthPacks.splice(index, 1);
+                }
+            });
+            // Continue game loop
+            requestAnimationFrame(gameLoop);
         }
+        function spawnEnemy() {
+            const enemy = document.createElement('div');
+            enemy.className = 'enemy';
+            // Random position at edges
+            let x, y;
+            if (Math.random() < 0.5) {
+                x = Math.random() < 0.5 ? 0 : gameWidth;
+                y = Math.random() * gameHeight;
+            } else {
+                x = Math.random() * gameWidth;
+                y = Math.random() < 0.5 ? 0 : gameHeight;
+            }
+            enemy.style.left = x + 'px';
+            enemy.style.top = y + 'px';
+            // Random speed (toward player)
+            const angle = Math.atan2(playerY - y, playerX - x);
+            const speed = 1 + Math.random() * 2;
+            enemy.dataset.speedX = Math.cos(angle) * speed;
+            enemy.dataset.speedY = Math.sin(angle) * speed;
+            gameContainer.appendChild(enemy);
+            enemies.push(enemy);
+        }
+        function spawnWeapon(x, y) {
+            const weapon = document.createElement('div');
+            weapon.className = 'weapon';
+            weapon.style.left = x + 'px';
+            weapon.style.top = y + 'px';
+            gameContainer.appendChild(weapon);
+            weapons.push(weapon);
+        }
+        function spawnHealthPack(x, y) {
+            const healthPack = document.createElement('div');
+            healthPack.className = 'health-pack';
+            healthPack.style.left = x + 'px';
+            healthPack.style.top = y + 'px';
+            healthPack.innerHTML = '<i class="fas fa-heart"></i>';
+            gameContainer.appendChild(healthPack);
+            healthPacks.push(healthPack);
+        }
+        function shoot() {
+            const now = Date.now();
+            if (now - lastShotTime < shootCooldown || ammo <= 0) return;
+            lastShotTime = now;
+            ammo--;
+            updateAmmo();
+            const bullet = document.createElement('div');
+            bullet.className = 'bullet';
+            // Start bullet at player position
+            bullet.style.left = playerX + 'px';
+            bullet.style.top = playerY + 'px';
+            // Shoot toward mouse/touch position
+            const angle = joystickActive ? joystickAngle : Math.random() * Math.PI * 2;
+            const speed = 10;
+            bullet.dataset.speedX = Math.cos(angle) * speed;
+            bullet.dataset.speedY = Math.sin(angle) * speed;
+            gameContainer.appendChild(bullet);
+            bullets.push(bullet);
+            // Reload if out of ammo
+            if (ammo <= 0) {
+                setTimeout(() => {
+                    ammo = maxAmmo;
+                    updateAmmo();
+                }, 1000);
+            }
+        }
+        function takeDamage(amount) {
+            health -= amount;
+            updateHealth();
+            // Flash player when hit
+            player.style.backgroundColor = 'white';
+            setTimeout(() => {
+                player.style.backgroundColor = '#ea580c';
+            }, 100);
+            // Check if player died
+            if (health <= 0) {
+                health = 0;
+                updateHealth();
+                gameOver();
+            }
+        }
+        function updateHealth() {
+            healthFill.style.width = health + '%';
+            // Change color based on health
+            if (health > 50) {
+                healthFill.style.backgroundColor = '#10b981';
+            } else if (health > 20) {
+                healthFill.style.backgroundColor = '#f59e0b';
+            } else {
+                healthFill.style.backgroundColor = '#dc2626';
+            }
+        }
+        function updateAmmo() {
+            ammoCount.textContent = `Ammo: ${ammo}/${maxAmmo}`;
+        }
+        function updateScore() {
+            scoreDisplay.textContent = `Score: ${score}`;
+        }
+        function gameOver() {
+            gameRunning = false;
+            finalScore.textContent = score;
+            gameOverScreen.style.display = 'flex';
+        }
+        function checkCollision(element1, element2) {
+            const rect1 = element1.getBoundingClientRect();
+            const rect2 = element2.getBoundingClientRect();
+            return !(
+                rect1.right < rect2.left ||
+                rect1.left > rect2.right ||
+                rect1.bottom < rect2.top ||
+                rect1.top > rect2.bottom
+            );
+        }
+        function handleJoystickStart(e) {
+            e.preventDefault();
+            joystickActive = true;
+            handleJoystickMove(e);
+        }
+        function handleJoystickMove(e) {
+            if (!joystickActive) return;
+            e.preventDefault();
+            // Get joystick position
+            const joystickRect = joystick.getBoundingClientRect();
+            const joystickCenterX = joystickRect.left + joystickRect.width / 2;
+            const joystickCenterY = joystickRect.top + joystickRect.height / 2;
+            // Get touch/mouse position
+            let clientX, clientY;
+            if (e.touches) {
+                clientX = e.touches[0].clientX;
+                clientY = e.touches[0].clientY;
+            } else {
+                clientX = e.clientX;
+                clientY = e.clientY;
+            }
+            // Calculate angle and distance
+            const dx = clientX - joystickCenterX;
+            const dy = clientY - joystickCenterY;
+            joystickAngle = Math.atan2(dy, dx);
+            joystickDistance = Math.min(40, Math.sqrt(dx * dx + dy * dy));
+            // Move joystick knob
+            const knobX = Math.cos(joystickAngle) * joystickDistance;
+            const knobY = Math.sin(joystickAngle) * joystickDistance;
+            joystickKnob.style.transform = `translate(${knobX}px, ${knobY}px)`;
+        }
+        function handleJoystickEnd(e) {
+            e.preventDefault();
+            joystickActive = false;
+            joystickKnob.style.transform = 'translate(0, 0)';
+        }
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            gameWidth = gameContainer.clientWidth;
+            gameHeight = gameContainer.clientHeight;
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Davi111/games" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- Criar o free fire lite


1	+ Criar o free fire lite
2	+ Crie free fire 2d