Earth Taken - Jeu de survie contre l'invasion extraterrestre - Action Jeu

Veuillez utiliser Three.js pour générer un **jeu mobile-first** avec le thème "Earth Taken: Toxic Survival". Veuillez d'abord lire les exigences de conception de jeu détaillées suivantes, puis générez le code en conséquence : ### 1. Ressources & Environnement * **Style Visuel** : Adopter une perspective **2.5D Défilement Latéral** en utilisant des ressources 3D. Adopter une esthétique **Stylisée Low-Poly** avec un matériau "Cel-Shaded" ou "Toon" pour imiter l'aspect dessiné main de bande dessinée du jeu original. * **Palette de Couleurs** : Tons terreux désaturés (bruns, gris, rouille) contrastés avec des **verts néon toxiques** (brume radioactive) et des violets extraterrestres. L'atmosphère doit sembler oppressante et sombre. * **Ressources Clés** : * **Joueur** : Un modèle de personnage survivant équipé d'un **Masque à Gaz** volumineux (élément visuel essentiel) et d'un sac à dos robuste. * **Ennemis** : Des créatures extraterrestres en forme de silhouettes épineuses (à la fois des "Chiens" de mêlée rapides et des tireurs humanoïdes). * **Environnement** : Arrière-plans de ville ruinée (couches de défilement en parallaxe), voitures détruites, tas de gravats, et matière organique extraterrestre recouvrant le béton. * **Atmosphère** : Implémenter un **Brouillard Vert Épais** (Three.FogExp2) pour simuler l'air irrespirable et masquer la distance de rendu limitée pour les performances mobiles. * **Optimisation Mobile** : Utiliser le rendu de maillage instancié pour les débris d'arrière-plan. Limiter les lumières dynamiques ; utiliser l'occlusion ambiante précalculée quand c'est possible. Garder le nombre de polygones bas (<2000 tris par personnage). ### 2. Exigences Audio * **BGM** : Une piste sombre, atmosphérique, drone synthétique industriel. Elle doit donner une sensation de solitude et de suspense, pas de techno énergique. * **Effets Sonores (SFX)** : * **Noyau** : Boucle de son de respiration lourde et étouffée (simulant le masque à gaz). * **Combat** : Tirs de balle percutants, cris d'extraterrestres à la mort, sons métalliques de rechargement. * **UI/Environnement** : Compteur Geiger qui cliquette près des radiations élevées, hurlement du vent et alarme de signalement « faible niveau d’oxygène » qui sonne de façon répétée. ### 3. Boucle de jeu * **Mécanismes principaux** : Un jeu de tir/survie linéaire en défilement horizontal. Le joueur se déplace de gauche à droite pour trouver un abri sûr. * **Mécanisme de survie unique - Filtres à air** : Le joueur dispose d'une barre secondaire pour l'« Intégrité de l'Oxygène/du Filtre » qui diminue progressivement. Si elle atteint zéro, les Points de Vie baissent rapidement. Les joueurs doivent collecter des **Filtres de Masque à Gaz** laissés par les ennemis ou trouvés dans les caisses pour reconstituer ce délai. * **Système de combat** : Tir en temps réel. Le joueur peut viser horizontalement (et en diagonale vers le haut/bas si possible). Les ennemis apparaissent sur les bords de l'écran. * **Condition de victoire** : Atteindre la « Porte du Bunker » à la fin du niveau. * **Condition d'échec** : Les Points de Vie atteignent 0 (à cause des dégâts ou de l'asphyxie). ### 4. Contrôles mobiles & Interaction * **Orientation** : **Mode Paysage** (Verrouillage forcé). * **Configuration des contrôles** : * **Pouce gauche** : Joystick Virtuel Flottant (mouvement : Gauche/Droite). * **Pouce droit** : Trois boutons d'action distincts (Rayon ~50px) : 1. **Tirer** (Appuyer pour tirer, Maintenir pour le tir automatique). 2. **Sauter** (Appuyer pour sauter, Double appui pour le double saut). 3. **Interagir/Recharger** (Ouvrir les caisses, changer les filtres). * **Retour d'information** : * **Secousse de la caméra** : Légère secousse de la caméra Three.js lors du tir et de la prise de dégâts. * **Retour visuel** : Quand le joueur est touché, faire clignoter les bords de l'écran en rouge. Quand l'oxygène est bas, estomper les bords de l'écran (effet de vignettage) pour simuler des vertiges. * **Disposition de l'IU** : En haut à gauche pour la barre de Vie (Rouge) et la barre d'Oxygène (Bleue/Verte). En haut à droite pour le compteur de Munitions. Garder toute l'interface utilisateur éloignée des coins inférieurs pour éviter les touches accidentelles. Créez un jeu d'énigme en JavaScript où le joueur doit déchiffrer un code secret. **Exigences :** 1. Un écran d'accueil avec un titre et un bouton "Commencer". 2. Un écran de jeu contenant : * Un affichage de `"Code : ? ? ? ?"`. * Quatre boutons numérotés de `1` à `4`. * Un message d'instruction : `"Cliquez sur les boutons dans le bon ordre pour découvrir le code."`. * Un bouton `"Vérifier"`. 3. Logique du jeu : * Générez un code secret aléatoire de 4 chiffres, utilisant uniquement les nombres `1` à `4` (ex : `[3, 1, 4, 2]`). * Lorsque le joueur clique sur les boutons numériques, enregistrez l'ordre de ses clics dans un tableau `tentativeJoueur`. * Lorsque `tentativeJoueur` atteint 4 chiffres, désactivez les boutons numériques. * Cliquer sur `"Vérifier"` compare `tentativeJoueur` au `codeSecret`. * Si la séquence est exacte, affichez `"Félicitations ! Code décrypté : [code]"`. * Sinon, affichez `"Essai incorrect. Réessayez !"`, réinitialisez `tentativeJoueur` et réactivez les boutons. 4. Style de base en CSS pour que les boutons et le texte soient clairement visibles. **Contraintes techniques :** - Utilisez `let` ou `const` pour les variables. - Utilisez `addEventListener` pour les interactions. - Le code doit être entièrement contenu dans un seul fichier `index.html`. - Structure HTML de base fournie ci-dessous : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Jeu de Déchiffrement de Code</title> <style> /* Votre CSS ici */ </style> </head> <body> <!-- Votre HTML ici --> <script> // Votre JavaScript ici </script> </body> </html> ``` **Soumettez** le contenu complet du fichier `index.html`.