Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Simulateur de Camion Réaliste - La Réunion (Mode Rapide)</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f172a; | |
| color: white; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .loading-screen { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s ease; | |
| } | |
| .game-container { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #0f172a; | |
| z-index: 2000; | |
| } | |
| .dashboard { | |
| position: absolute; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background-color: rgba(0,0,0,0.7); | |
| border-radius: 10px; | |
| padding: 15px; | |
| display: flex; | |
| gap: 20px; | |
| backdrop-filter: blur(5px); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .progress-bar { | |
| width: 100px; | |
| height: 10px; | |
| background-color: #334155; | |
| border-radius: 5px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #f59e0b, #f97316); | |
| } | |
| .game-map { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| width: 200px; | |
| height: 200px; | |
| background-color: rgba(0,0,0,0.7); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| backdrop-filter: blur(5px); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .player-marker { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #f59e0b; | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| border: 2px solid white; | |
| } | |
| #gameCanvas { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .mission-complete { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background-color: rgba(0,0,0,0.9); | |
| padding: 30px; | |
| border-radius: 10px; | |
| text-align: center; | |
| display: none; | |
| z-index: 100; | |
| backdrop-filter: blur(5px); | |
| border: 2px solid #f59e0b; | |
| } | |
| .start-screen { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); | |
| background-size: cover; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| } | |
| .start-btn { | |
| background: linear-gradient(135deg, #f59e0b, #f97316); | |
| color: white; | |
| border: none; | |
| padding: 15px 40px; | |
| font-size: 18px; | |
| font-weight: bold; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| margin-top: 30px; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.3); | |
| } | |
| .fast-load-btn { | |
| background: linear-gradient(135deg, #10b981, #059669); | |
| margin-top: 15px; | |
| } | |
| .pano-view { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| /* Animation de chargement rapide */ | |
| @keyframes quickFade { | |
| 0% { opacity: 1; } | |
| 100% { opacity: 0; } | |
| } | |
| .quick-load { | |
| animation: quickFade 0.5s forwards; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Start Screen avec option de chargement rapide --> | |
| <div class="start-screen"> | |
| <h1 class="text-5xl font-bold text-yellow-400 mb-6">SIMULATEUR DE CAMION RÉUNIONNAIS</h1> | |
| <p class="text-xl mb-8 max-w-2xl text-center">Conduisez un véritable camion à travers les paysages spectaculaires de La Réunion</p> | |
| <button id="startGameBtn" class="start-btn"> | |
| <i class="fas fa-truck mr-2"></i> DÉMARRER LA CONDUITE | |
| </button> | |
| <button id="fastLoadBtn" class="start-btn fast-load-btn"> | |
| <i class="fas fa-bolt mr-2"></i> MODE RAPIDE (NO LOADING) | |
| </button> | |
| </div> | |
| <!-- Loading Screen (masqué par défaut) --> | |
| <div class="loading-screen" id="loadingScreen"> | |
| <h1 class="text-4xl font-bold text-yellow-400 mb-4">Chargement des données GPS</h1> | |
| <p class="text-lg mb-8" id="loadingStatus">Initialisation du système de conduite...</p> | |
| <div class="mt-4 text-sm" id="loadingText">Connexion aux serveurs...</div> | |
| </div> | |
| <!-- Game Container --> | |
| <div id="gameContainer" class="game-container"> | |
| <!-- Panoramic View --> | |
| <div class="pano-view" id="panoView"></div> | |
| <!-- Game UI Elements --> | |
| <div class="dashboard"> | |
| <div class="dashboard-item"> | |
| <span class="text-sm mb-1">Vitesse</span> | |
| <span id="speedValue" class="text-xl font-bold">0 km/h</span> | |
| </div> | |
| <div class="dashboard-item"> | |
| <span class="text-sm mb-1">Carburant</span> | |
| <div class="progress-bar"> | |
| <div id="fuelBar" class="progress-fill" style="width: 100%"></div> | |
| </div> | |
| <span id="fuelValue" class="text-sm mt-1">100%</span> | |
| </div> | |
| <div class="dashboard-item"> | |
| <span class="text-sm mb-1">Distance</span> | |
| <span id="distanceValue" class="text-xl font-bold">0 km</span> | |
| </div> | |
| </div> | |
| <div class="game-map"> | |
| <div id="playerMarker" class="player-marker"></div> | |
| </div> | |
| <div id="missionComplete" class="mission-complete"> | |
| <!-- Will be filled dynamically --> | |
| </div> | |
| <button id="exitGameBtn" class="absolute top-4 left-4 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full transition-all"> | |
| <i class="fas fa-times mr-2"></i> Quitter | |
| </button> | |
| </div> | |
| <script> | |
| // Game variables | |
| let truckSpeed = 0; | |
| const maxSpeed = 90; | |
| const acceleration = 0.5; | |
| const deceleration = 0.3; | |
| const steeringSpeed = 0.02; | |
| let fuel = 100; | |
| const fuelConsumption = 0.05; | |
| let distance = 0; | |
| let gameTime = 6 * 60; | |
| // Locations with placeholder images | |
| const locations = [ | |
| { | |
| name: "Saint-Denis", | |
| img: "https://images.unsplash.com/photo-1584556818175-1a676b2657d3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" | |
| }, | |
| { | |
| name: "Saint-Pierre", | |
| img: "https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" | |
| } | |
| ]; | |
| let currentLocationIndex = 0; | |
| // UI elements | |
| const speedElement = document.getElementById('speedValue'); | |
| const fuelElement = document.getElementById('fuelValue'); | |
| const fuelBar = document.getElementById('fuelBar'); | |
| const distanceElement = document.getElementById('distanceValue'); | |
| const panoView = document.getElementById('panoView'); | |
| const playerMarker = document.getElementById('playerMarker'); | |
| const gameContainer = document.getElementById('gameContainer'); | |
| const loadingScreen = document.getElementById('loadingScreen'); | |
| const startScreen = document.querySelector('.start-screen'); | |
| const startGameBtn = document.getElementById('startGameBtn'); | |
| const fastLoadBtn = document.getElementById('fastLoadBtn'); | |
| // Mode de chargement rapide | |
| fastLoadBtn.addEventListener('click', function() { | |
| startScreen.classList.add('quick-load'); | |
| // Simuler un chargement ultra rapide | |
| setTimeout(() => { | |
| startScreen.style.display = 'none'; | |
| loadingScreen.style.display = 'flex'; | |
| // Afficher pendant très peu de temps | |
| setTimeout(() => { | |
| loadingScreen.style.display = 'none'; | |
| gameContainer.style.display = 'block'; | |
| // Charger la première localisation | |
| loadLocation(currentLocationIndex); | |
| // Démarrer la boucle de jeu | |
| gameLoop(); | |
| // Démarrer une mission | |
| startRandomMission(); | |
| }, 200); | |
| }, 300); | |
| }); | |
| // Mode normal | |
| startGameBtn.addEventListener('click', function() { | |
| startScreen.style.display = 'none'; | |
| loadingScreen.style.display = 'flex'; | |
| // Chargement accéléré | |
| setTimeout(() => { | |
| loadingScreen.style.display = 'none'; | |
| gameContainer.style.display = 'block'; | |
| loadLocation(currentLocationIndex); | |
| gameLoop(); | |
| startRandomMission(); | |
| }, 800); | |
| }); | |
| // Load location | |
| function loadLocation(index) { | |
| const location = locations[index]; | |
| panoView.style.backgroundImage = `url('${location.img}')`; | |
| updatePlayerMarker(); | |
| } | |
| // Update player marker | |
| function updatePlayerMarker() { | |
| const x = 100 + Math.random() * 50; | |
| const y = 100 + Math.random() * 50; | |
| playerMarker.style.left = `${x}px`; | |
| playerMarker.style.top = `${y}px`; | |
| } | |
| // Start random mission | |
| function startRandomMission() { | |
| // Mission simple pour le mode rapide | |
| const missionComplete = document.getElementById('missionComplete'); | |
| missionComplete.innerHTML = ` | |
| <h3 class="text-xl font-bold text-yellow-400 mb-4">Mission Rapide</h3> | |
| <p class="mb-4">Transportez des marchandises à travers l'île</p> | |
| <p class="text-sm">Utilisez les flèches directionnelles pour conduire</p> | |
| `; | |
| missionComplete.style.display = 'block'; | |
| setTimeout(() => { | |
| missionComplete.style.display = 'none'; | |
| }, 3000); | |
| } | |
| // Main game loop (simplifié pour le mode rapide) | |
| function gameLoop() { | |
| handleControls(); | |
| updateDashboard(); | |
| updateView(); | |
| requestAnimationFrame(gameLoop); | |
| } | |
| function updateView() { | |
| if (truckSpeed > 0 && Math.random() < truckSpeed / 5000) { | |
| currentLocationIndex = (currentLocationIndex + 1) % locations.length; | |
| loadLocation(currentLocationIndex); | |
| } | |
| } | |
| function updateDashboard() { | |
| speedElement.textContent = `${Math.abs(Math.round(truckSpeed))} km/h`; | |
| fuelElement.textContent = `${fuel.toFixed(1)}%`; | |
| fuelBar.style.width = `${fuel}%`; | |
| distanceElement.textContent = `${distance.toFixed(1)} km`; | |
| } | |
| // Handle keyboard controls | |
| const keys = {}; | |
| document.addEventListener('keydown', function(e) { | |
| keys[e.key.toLowerCase()] = true; | |
| // Touche E pour quitter | |
| if (e.key === 'e') { | |
| gameContainer.style.display = 'none'; | |
| startScreen.style.display = 'flex'; | |
| startScreen.classList.remove('quick-load'); | |
| } | |
| }); | |
| document.addEventListener('keyup', function(e) { | |
| keys[e.key.toLowerCase()] = false; | |
| }); | |
| function handleControls() { | |
| // Contrôles simplifiés | |
| if (keys['arrowup'] || keys['z']) { | |
| if (truckSpeed < maxSpeed) { | |
| truckSpeed += acceleration; | |
| } | |
| } else if (keys['arrowdown'] || keys['s']) { | |
| if (truckSpeed > 0) { | |
| truckSpeed = Math.max(0, truckSpeed - deceleration * 2); | |
| } | |
| } else { | |
| if (truckSpeed > 0) { | |
| truckSpeed = Math.max(0, truckSpeed - deceleration); | |
| } | |
| } | |
| if (keys['arrowleft'] || keys['q']) { | |
| currentLocationIndex = (currentLocationIndex - 0.1 + locations.length) % locations.length; | |
| } else if (keys['arrowright'] || keys['d']) { | |
| currentLocationIndex = (currentLocationIndex + 0.1) % locations.length; | |
| } | |
| if (truckSpeed > 0) { | |
| distance += truckSpeed / 3600; | |
| fuel = Math.max(0, fuel - fuelConsumption * truckSpeed / 500); | |
| } | |
| } | |
| // Exit game button | |
| document.getElementById('exitGameBtn').addEventListener('click', function() { | |
| gameContainer.style.display = 'none'; | |
| startScreen.style.display = 'flex'; | |
| startScreen.classList.remove('quick-load'); | |
| }); | |
| </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=docto41/routier-974" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |