Dreadhead Parkour - Action Jeu

Utilisez Three.js pour générer un **jeu mobile-first** ayant pour thème "Dreadhead Parkour". Veuillez d'abord lire les exigences détaillées de conception de jeu suivantes, puis générez le code en conséquence : ### 1. Ressources & Environnement * **Style Visuel** : Défilement latéral en 2.5D avec une esthétique de "Flat Design" pour correspondre à l'image de référence. Utilisez une **Caméra Orthographique** pour simuler un aspect 2D tout en utilisant des modèles 3D. * **Design du Personnage** : Un personnage stylisé, blanc, semblable à un mannequin, avec d'épaisses contours noirs (Cell Shading). La caractéristique déterminante est les "Dreadlocks" - celles-ci doivent être implémentées comme une chaîne de segments physiques (ou un maillage de ruban traînant) qui réagissent dynamiquement au mouvement (qui flottent en arrière lors de la course, tourbillonnent pendant les sauts périlleux). * **Environnement** : Un cadre de toit urbain. L'arrière-plan doit être un paysage urbain défilant en parallaxe dans des tons vibrants de Rose Vif, Magenta et Rouge (correspondant à la capture d'écran). * **Obstacles** : Pointes en argent métallique, barils explosifs rouges (bombes) et lames de scie rotatives. * **Optimisation Mobile** : Utilisez des maillages basse poly pour toute la géométrie. Utilisez de simples couleurs de sommet plutôt que des textures lourdes lorsque possible. Implémentez un système de mise en commun d'objets (object pooling) pour les pièces et les effets de particules afin de maintenir 60 FPS sur les navigateurs mobiles. ### 2. Exigences Audio * **BGM (Musique de Fond)** : Une piste Urban Funk ou Breakbeat énergique et rapide pour accentuer la vitesse et l'adrénaline. * **Effets Sonores (SFX)** : * **Saut/Saut Périlleux** : Un son tranchant de "Swoosh" coupant l'air. * **Glissade** : Un son de frottement comme du tissu sur du béton. * **Collecte de Pièce** : Un "Ding" d'arcade satisfaisant et aigu. * **Mort/Crash** : Un son "Crunch" ou "Splat" comique mais percutant (en référence au style *Short Life* du créateur), suivi d'une vocalisation générique "Ugh". * **Interface utilisateur** : des sons de clic nets pour les appuis sur bouton. ### 3. Boucle de jeu * **Mécaniques principales** : Le joueur contrôle le personnage qui court de gauche à droite. L'objectif est d'atteindre la "Ligne d'arrivée" (un drapeau à damier ou un portail) sans mourir. * **Physique de parkour** : * **Saut (W)** : Un appui simple effectue un saut normal. Un double-appui déclenche un "Salto avant" ou "Salto arrière" qui donne un peu plus de hauteur et de distance. * **Glissade (S)** : Maintenir la touche de glissade réduit la taille du hitbox du personnage pour passer sous les obstacles. * **Dangers** : Percuter un piquant, une bombe, ou tomber dans un trou déclenche immédiatement un état "Poupée de chiffon" (les membres deviennent mous selon la physique) et relance le niveau. * **Score** : Des pièces sont placées sur des trajectoires difficiles d'accès (nécessitant souvent un timing de saut spécifique). Le score est basé sur les pièces collectées + le temps restant. ### 4. Contrôles et interaction mobiles * **Orientation** : **Mode Paysage** (Verrouillé). * **Contrôles tactiles (Écran divisé)** : * **Zone gauche de l'écran** : Un curseur horizontal invisible ou semi-transparent / un joystick pour le mouvement (vitesse Gauche/Droite). * **Zone droite de l'écran** : Deux boutons distincts. Un grand bouton "Flèche vers le haut" pour Sauter/Faire un salto, et un bouton plus petit "Flèche vers le bas" pour Glisser. * **Mise en page de l'interface** : Score et nombre de pièces en haut à gauche (zone sûre). Bouton Pause en haut à droite. Les boutons doivent avoir une cible tactile minimale de 48x48px. * **Retour d'effet** : * **Haptique** : Déclencher une vibration de l'appareil (si pris en charge par Navigator.vibrate) lors d'une collision avec un obstacle ou de la collecte d'une pièce. * **Visuel** : Légère secousse de l'écran lors d'une explosion de bombe à proximité. Des stries de vitesse (trainées de flou cinétique) apparaissent sur les bords de l'écran à la vitesse de course maximale. Générez un jeu de type "jeu-questionnaire interactif" où le joueur voyage à travers différentes époques historiques. Le jeu doit inclure : - **Interface** : Une mise en page avec une carte chronologique interactive (`<div id="timeline-map"></div>`) et un panneau de questions. - **Mécanique** : 10 questions à choix multiples. Chaque bonne réponse débloque une nouvelle époque. - **Contenu** : Les questions doivent couvrir l'Antiquité, le Moyen Âge, la Renaissance et l'époque moderne. - **Éléments de jeu** : - Un compteur de score : `Score: <span id="score">0</span>/10` - Un indicateur de progression : `Progression: <progress id="progress" value="0" max="10"></progress>` - Un bouton de réinitialisation : `<button onclick="resetGame()">Recommencer le voyage</button>` - **Feedback** : Pour chaque réponse, afficher `Bonne réponse!` ou `Faux. La bonne réponse est: [réponse]` dans `<div id="feedback"></div>`. - **Récompenses** : Après chaque bonne réponse, afficher une médaille (`<img class="medal" src="medal.png">`) et un fait historique aléatoire dans `<div id="fact-box"></div>`. Utilisez du code JavaScript pour gérer la logique du jeu, y compris la vérification des réponses, la mise à jour du score et la progression sur la carte chronologique. Exemple de structure de question : ```json { "epoch": "Renaissance", "question": "Qui a peint le plafond de la Chapelle Sixtine ?", "options": ["Léonard de Vinci", "Michel-Ange", "Raphaël", "Donatello"], "correct": 1, "fact": "Michel-Ange a mis environ quatre ans (1508-1512) pour terminer les fresques du plafond." }