Snow Rider 3D - Course Jeu

Veuillez utiliser Three.js pour générer un **jeu mobile-first** sur le thème "**Snow Rider 3D**". Veuillez d'abord lire les exigences détaillées de conception de jeu ci-dessous, puis générer le code en conséquence : ### 1. Ressources & Environnement * **Style Visuel :** Style artistique 3D low-poly avec une esthétique hivernale festive et vibrante. * **Modèle du Joueur :** Une vue à la première personne d'un traîneau en bois (géométrie de base : planches de bois incurvées avec des rivets métalliques). La caméra doit être positionnée légèrement derrière et au-dessus du traîneau pour donner une sensation de vitesse. * **Génération de l'Environnement :** Une pente enneigée procédurale sans fin. Le sol doit être d'un blanc éclatant avec de subtiles ombres bleues. * **Obstacles :** Des sapins en low-poly (cônes verts avec des chapeaux de neige), des souches d'arbres brunes, de gros rochers gris et des bonhommes de neige. Ceux-ci doivent apparaître de manière aléatoire mais de plus en plus dense au fur et à mesure que le jeu progresse. * **Collectibles :** Des boîtes-cadeaux (cubes avec des textures d'emballage rouge/or) flottant légèrement au-dessus du sol. * **Atmosphère :** Un skybox (brouillard) à dégradé bleu doux qui se fond avec le sol à l'horizon pour masquer la génération des segments. Implémentez un système simple de particules de neige tombante attaché à la caméra. * **Optimisation Mobile :** Utilisez des géométries simples (BoxGeometry, CylinderGeometry, ConeGeometry) sans chargement de ressources externes. Limitez la distance de rendu en utilisant le brouillard et un système de regroupement d'objets (object pooling) pour les obstacles afin de maintenir 60 FPS sur les navigateurs mobiles. ### 2. Exigences Audio * **BGM :** Une piste instrumentale festive au rythme rapide, comportant des cloches de traîneau et une percussion entraînante (style par exemple, version rock de "Jingle Bells"). * **SFX :** * **Mouvement :** Un son continu de vent "sifflement" dont la hauteur/le volume augmente avec la vitesse. Une boucle de "craquement de la neige" lorsque le traîneau est au sol. * **Action :** Un son de "carillon" ou de "ting" satisfaisant lors de la collecte des cadeaux. * **Saut :** Un son de « swoosh » pour le saut. * **Crash :** Un lourd « craquement » ou bruit sourd de bois suivi du silence lors du game over. ### 3. Boucle de jeu * **Mécanique principale :** Le traîneau avance automatiquement, accélérant constamment jusqu'à une vitesse maximale. Le joueur doit diriger à gauche/droite et sauter pour éviter les collisions. * **Score :** Le score s'accumule en fonction de la distance parcourue. Bonus de +10 points pour chaque Cadeau collecté. Le meilleur score doit être enregistré dans le `localStorage`. * **Difficulté :** La vitesse augmente progressivement au fil du temps. Les motifs d'obstacles deviennent plus serrés, nécessitant une direction précise. * **Game Over :** Heurter un arbre, un rocher, une souche ou un bonhomme de neige entraîne immédiatement un état de crash (secousse de la caméra, arrêt du mouvement) et un overlay UI « Game Over » avec un bouton Redémarrer. ### 4. Contrôles et interaction mobile * **Orientation :** Forcer une préférence en **Mode Paysage** (ou adapter le champ de vision de la caméra si Portrait). * **Contrôles tactiles :** * **Direction :** Zones tactiles d'écran partagé invisibles. Maintenir la **moitié gauche** de l'écran dirige à gauche ; maintenir la **moitié droite** dirige à droite. (Alternativement, un joystick virtuel en bas à gauche). * **Saut :** Un bouton distinct, large et transparent en bas à droite (ou un balayage vers le haut n'importe où sur l'écran) pour déclencher un saut. * **Mise en page de l'interface utilisateur :** * **HUD :** Le score est affiché en haut au centre (police grande et lisible). * **Menus :** Les écrans « Appuyez pour commencer » et « Game Over » doivent être centrés avec de grands boutons adaptés aux pouces (zone cible minimale de 44x44px). * **Feedback :** Effet de secousse d'écran (vibration subtile de la caméra) à l'atterrissage d'un saut. ### 5. Langage d'implémentation * Veuillez générer le code en **anglais**. Générez un jeu de type « escape room » en HTML, CSS et JavaScript. Le thème est « laboratoire de cybernétique abandonné ». Le joueur doit résoudre trois énigmes pour « réinitialiser le système central et s'échapper ». **Spécifications :** 1. **Structure HTML :** * Une page unique avec un conteneur principal. * Trois sections distinctes (`.puzzle`) pour chaque énigme, masquées initialement sauf la première. * Une zone d'affichage des messages (`#message`) pour les indices et la progression. * Un chronomètre (`#timer`) affichant le temps restant (10 minutes). * Un bouton de réinitialisation (`#reset`). 2. **Énigmes :** * **Énigme 1 (Circuit logique) :** Présenter une interface avec 4 interrupteurs (`input type="checkbox"`) étiquetés A, B, C, D. L'énigme affiche une équation booléenne : `(A ET B) OU (C ET NON D) = VRAI`. Le joueur doit activer/désactiver les interrupteurs pour satisfaire l'équation et déverrouiller un bouton "Valider". * **Énigme 2 (Séquence de chiffres) :** Afficher une clavier numérique (boutons 0-9) et un champ d'affichage. Le joueur doit entrer la séquence correcte `7-2-4-9-1` basée sur un indice affiché dans `#message` : « Regardez les étiquettes des flacons sur l'étagère : 7, 2, 4, 9, 1. » * **Énigme 3 (Puzzle de câblage) :** Une zone `div` avec 6 câbles colorés (`div` avec `background-color`) disposés verticalement. Le joueur doit les cliquer-déposer pour les réorganiser afin qu'ils suivent l'ordre indiqué par un schéma (affiché comme une image `wiring_diagram.png` dans l'énigme) : Rouge, Bleu, Vert, Jaune, Violet, Cyan. 3. **Logique JavaScript :** * `startTimer()` : Démarre un compte à rebours de 600 secondes. Affiche une alerte et bloque l'interface à 0. * `validatePuzzle1()` : Vérifie la combinaison d'interrupteurs. Si correcte, masque l'énigme 1, affiche l'énigme 2 et un message de réussite. * `validatePuzzle2()` : Vérifie si la séquence entrée correspond à `72491`. Si oui, passe à l'énigme 3. * `validatePuzzle3()` : Compare l'ordre des `div` de câbles après glisser-déposer avec l'ordre cible [`red`, `blue`, `green`, `yellow`, `purple`, `cyan`]. Si correct, affiche un message final de victoire et arrête le chronomètre. * `resetGame()` : Réinitialise tout à l'état initial, redémarre le chronomètre. * Implémenter le glisser-déposer pour les câbles (HTML5 Drag and Drop API). 4. **Style CSS :** * Thème sombre : arrière-plan `#0a0a1f`, texte `#e0e0ff`. * Les sections `.puzzle` ont une bordure néon `1px solid #00f0ff` et un `box-shadow`. * Les interrupteurs et boutons ont un style futuriste. * Les câbles sont des `div` de taille fixe avec des couleurs vives et un effet `cursor: grab`. **Livrable final :** Un seul fichier HTML fonctionnel contenant les balises `<style>` et `<script>` intégrées.