Connector - Jeu de Puzzle Connecter les Points - Puzzle Jeu

Utilisez Three.js pour générer un **jeu adapté au mobile** sur le thème "Connecteur". Veuillez d'abord lire les exigences de conception détaillées ci-dessous, puis générez le code en conséquence : ### 1. Ressources & Environnement * **Style Visuel :** Esthétique minimaliste, épurée et géométrique de type "Puzzle ZEN". * **Palette de Couleurs :** * **Arrière-plan :** Blanc cassé ou gris clair doux (`#f0f0f0`) avec un réseau filaire géométrique très discret et statique en arrière-plan (faible opacité). * **Nœuds (Points) :** Sphères 3D. Les nœuds non connectés sont Gris Foncé (`#333333`). Les nœuds Actifs/Sélectionnés deviennent Orange Vif (`#FF6600`). Les nœuds Terminés/Verrouillés deviennent Vert d'eau (`#008080`). * **Connexions :** Lignes luminescentes (matériau émissif) reliant les sphères. * **Modèles & Formes :** Utilisez `THREE.SphereGeometry` pour les points et `THREE.Line` ou `THREE.TubeGeometry` pour les connexions afin de leur donner du volume. * **Effets :** Appliquez un `UnrealBloomPass` subtil (Post-traitement) pour que les connexions orange et les nœuds actifs brillent légèrement, renforçant la sensation d'"énergie connectée". * **Caméra :** Caméra orthographique (vue de dessus) pour garantir que le puzzle reste non déformé et lisible sur les écrans mobiles de différents formats. * **Performance :** Utilisez des sphères à faible polycount (nombre de segments ~16) pour maintenir 60 FPS sur les appareils mobiles. ### 2. Exigences Audio * **Musique de Fond (BGM) :** Une piste ambiante calme, propice à la "réflexion". Synthétiseurs doux, tempo lent, pas de percussion lourde. * **Effets Sonores (SFX) :** * **Sélection de Nœud :** Un "pop" net et aigu ou un "blip" numérique. * **Connexion Formée :** Un bourdonnement électrique satisfaisant ou un ton ascendant. * **Mouvement Invalide :** Un "buzz" grave et sourd ou un ton d'erreur. * **Niveau Terminé :** Un accord harmonieux (tonalité majeure) indiquant la résolution. ### 3. Boucle de Gameplay * **Objectif :** Reliez tous les points (nœuds) à l'écran en une seule ligne continue sans revenir en arrière ni croiser votre propre chemin (sauf si des nœuds spécifiques de type "pont" le permettent). * **Mécaniques :** * **Départ :** Le joueur touche un "Nœud de Départ" spécifique (avec effet de pulsation). * **Action :** Le joueur fait glisser son doigt/sa souris vers un nœud adjacent pour former une connexion. * **Obstacles :** En fonction des étiquettes "Éviteur/Obstacle", introduisez des "Barrières Rouges" entre certains nœuds. Toucher une barrière ou traverser une ligne existante brise la chaîne de connexion en cours et réinitialise la progression du niveau. * **Condition de Victoire :** Tous les nœuds requis sont connectés, formant une forme géométrique spécifique (Pentagone, Étoile, Forme Abstraite). * **Score :** * Un chronomètre est affiché en haut de l'écran. * Système de notation par étoiles : 3 étoiles pour une réalisation rapide, 1 étoile pour une réalisation lente. ### 4. Contrôles & Interactions Mobiles * **Système d'Entrée :** Implémentez un `Raycaster` mappé sur `touchmove` (mobile) et `mousemove` (bureau). * **Glisser-pour-Connecter :** Le joueur n'a pas besoin de taper sur chaque point. Il doit pouvoir "balayer" les points. Lorsque l'intersection du rayon touche un nœud voisin valide, il s'ajuste automatiquement et dessine la ligne. * **Retour Haptique :** Déclenchez `window.navigator.vibrate(10)` lorsqu'une connexion réussie atteint un nouveau nœud pour une confirmation tactile. * **Orientation :** Le mode portrait est privilégié, mais le canevas doit redimensionner dynamiquement (`window.addEventListener('resize', ...)`) pour garder le puzzle centré avec une marge de remplissage sur toute taille d'écran. * **Couche Interface Utilisateur :** * Superposition HTML minimaliste. * **Haut :** Compteur de niveau et Chronomètre. * **Bas :** Un grand bouton "Réinitialiser" (hauteur minimale de 44px pour l'accessibilité tactile). Générez un jeu interactif de type « escape room » en HTML, CSS et JavaScript. **Titre du jeu :** La Chambre du Temps **Concept :** Le joueur est coincé dans une pièce où le temps s'écoule à l'envers. Il doit résoudre des énigmes basées sur des anomalies temporelles (ex : une horloge qui tourne à l'envers, un journal dont les pages se remplissent de la fin au début) pour rétablir le flux normal du temps et s'échapper. **Exigences techniques :** 1. **Structure :** Un seul fichier HTML avec `<style>` et `<script>` intégrés. 2. **Mécanique centrale :** Une horloge numérique ou analogique visible qui décompte à partir de **10:00** (10 minutes) en temps réel. La fin du compte à rebours entraîne un game over. 3. **Énigmes :** Au moins trois énigmes doivent être résolues séquentiellement. * **Énigme 1 : Puzzle d'objets inversés** - Une grille d'objets (comme `🕰️`, `📖`, `🔑`) est affichée. Le joueur doit les cliquer dans l'ordre **inverse** de leur apparition à l'écran. * **Énigme 2 : Code numérique** - Un cadenas à code avec l'indice : "Regardez le temps à l'envers". La solution est le miroir de l'heure affichée au moment où l'énigme devient active (ex. : si l'horloge affiche `08:45`, le code est `5480`). * **Énigme 3 : Question à réponse textuelle** - Une console affiche : `La fin est mon commencement, mon commencement est la fin. Que suis-je ?` Le joueur doit taper la réponse correcte (`un sablier`). 4. **Interface utilisateur :** ```html <div id="game-container"> <h1 id="room-title"></h1> <div id="timer">10:00</div> <div id="puzzle-area"></div> <input type="text" id="text-answer" placeholder="Entrez votre réponse..."> <button id="submit-btn">Soumettre</button> <div id="feedback"></div> <div id="inventory">Objets trouvés : <span id="items">Aucun</span></div> </div> ``` 5. **Style :** Thème sombre et inquiétant. L'animation CSS `@keyframes pulse` doit faire pulser légèrement le timer en rouge lorsque le temps est inférieur à 2:00. 6. **Logique JavaScript :** * Initialiser et mettre à jour le compte à rebours du timer. * Gérer la séquence des énigmes et la validation des réponses. * Mettre à jour l'inventaire et fournir un feedback visuel. * Afficher un message de victoire (`Félicitations ! Le flux temporel est rétabli.`) ou d'échec (`Le temps a eu raison de vous...`) à la fin. **Contraintes :** * Le jeu doit être entièrement fonctionnel dans un navigateur moderne en ouvrant simplement le fichier HTML. * Le code doit être commenté en français. * Utilisez `const` et `let`, évitez `var`. * Pour l'énigme 1, générer un tableau aléatoire de 5 emojis à chaque début de partie. Ne générez que le code final, sans explications supplémentaires.