LabyCube est jouable gratuitement dans votre navigateur, sans installation.
Labycube est un jeu d'exploration et de réflexion en 3D temps réel, directement jouable dans votre navigateur. Conçu à l'aide de Three.js et de l'API Web Audio, le jeu vous propulse à la surface d'un mystérieux artefact cubique tridimensionnel dont les faces abritent des labyrinthes générés de manière procédurale.
Pour vous enfuir, vous devrez faire preuve d'agilité, de logique et de rapidité à travers les dimensions.
Vous êtes piégé au sein d'une structure cybernétique appelée Labycube. Cette matrice cryptée à 6 faces est régie par un système de sécurité impitoyable. Votre seule chance de survie est de collecter les fragments de clés de décryptage dispersés sur chaque face, de contourner les sentinelles autonomes et d'ouvrir les sas dimensionnels pour restaurer la liberté de votre conscience numérique.
- Les Puces de Données (Data Chips) : Chaque face comporte des puces binaires (les bits
0en bleu/gris et les bits1en vert/noir). Pour révéler la clé d'un niveau, vous devez récolter ces puces dans l'ordre exact de la séquence de sécurité affichée à l'approche de la porte. Toute erreur de séquence déclenchera une alerte sonore et réinitialisera votre progression de décryptage. - La Clé Violette & la Porte : Une fois toutes les puces correctement déchiffrées, la Clé Violette apparaît. Ramassez-la pour déverrouiller la porte orange et passer à la face suivante.
- Progression Cube : Ouvrez les 6 portes pour terminer le cube. La difficulté augmente de manière dynamique à chaque nouveau cube (taille de grille élargie, vitesse de déplacement des ennemis, densité d'obstacles).
- Dalles de Glace : Les dalles bleu clair sont extrêmement glissantes. Dès que vous y posez le pied, vous glissez de manière incontrôlable en ligne droite jusqu'à ce que vous heurtiez un mur ou une dalle normale.
- Bouclier Numérique (Super Cristal) : Ce bonus cyan vous accorde une invincibilité temporaire de 5 secondes. Profitez-en pour foncer sur les ennemis et les désintégrer !
- Batterie de Secours : Stockez ce module d'énergie vert et déclenchez-le manuellement depuis l'interface (HUD) pour activer l'invincibilité au moment le plus opportun.
- Patrouilleurs Rouges : Des cubes hostiles qui explorent les intersections du labyrinthe de façon semi-aléatoire.
- Navettes Oranges : Des drones de garde effectuant des patrouilles linéaires rigides et prévisibles, mais implacables.
- Snake Boss : Toutes les 6 faces (niveaux boss), vous affronterez un immense serpent articulé qui vous traquera dans une atmosphère sombre et oppressante.
- Pénalité : Tout contact direct avec un ennemi sans bouclier actif vous inflige +10 secondes de pénalité sur le chronomètre et vous renvoie au point de départ de la face.
Le projet est développé sans aucun framework lourd, s'appuyant uniquement sur du code Javascript ES6 standardisé et structuré en modules réutilisables :
├── assets/
│ ├── images/ # Logotypes et ressources visuelles OGG
│ ├── textures/ # Textures procédurales et normales des blocs
│ └── fonts/ # Polices de caractères vectorielles
├── css/
│ ├── style.css # Styles principaux du jeu et des interfaces HUD
│ ├── gallerie.css # Mise en page du musée 3D interactif
│ └── fonts.css # Chargement des polices locales
├── js/
│ ├── audio/
│ │ └── SoundManager.js # Synthétiseur de sons temps réel (Web Audio API)
│ ├── entities/
│ │ ├── Enemy.js # Sentinelles de patrouille et IA
│ │ └── SnakeBoss.js # Boss articulé du niveau final
│ ├── environment/
│ │ └── Stars.js # Rendu du champ d'étoiles spatial procédural
│ ├── level/
│ │ ├── TileTypes.js # Enumération des types de dalles
│ │ ├── LevelManager.js # Gestion des faces, du maillage et du culling
│ │ ├── MazeGenerator.js # Algorithme de génération de labyrinthe
│ │ └── BossMazeGenerator.js# Générateur d'arène pour le Snake Boss
│ ├── player/
│ │ ├── player.js # Physique du joueur, inventaire, powers & HUD
│ │ ├── navigation.js # Mathématiques de pliage et de transition 3D
│ │ └── InputManager.js # Gestion réactive des entrées clavier & tactiles
│ ├── camera.js # Caméra cinématique (Slerp, easing & zoom parabolique)
│ ├── config.js # Variables de configuration globale du jeu
│ ├── scene.js # Initialisation du moteur Three.js
│ └── main.js # Point d'entrée principal, boucle d'animation et UI
├── index.html # Structure HTML de l'application
├── gallerie.html # Musée 3D interactif des objets du jeu
└── README.md # Ce fichier
- Transition de Caméra Cinématique : Développée dans
js/camera.js, elle utilise une interpolation sphérique (Slerp) couplée à un easing cubique et à un effet de zoom parabolique automatique (la caméra recule légèrement pendant la rotation de face pour un effet 3D spectaculaire). - Culling Actif des Faces : Pour maximiser les performances de rendu WebGL, seul le groupe d'éléments 3D de la face sur laquelle se trouve le joueur est affiché et animé à l'écran.
- Synthèse Sonore Pure (No assets) : Aucun fichier audio n'est téléchargé.
SoundManager.jsgénère tous les effets sonores (prise d'objets, choc, téléportation, victoire, apparition) à la volée en créant et en modulant des oscillateurs électroniques (sine,sawtooth,triangle,square) de l'API Web Audio. - Sauvegarde persistante : L'état complet de la partie (niveau, score, inventaire, puces collectées, pénalités) est sérialisé et sauvegardé automatiquement dans le
localStoragede votre navigateur toutes les 2 secondes pour éviter toute perte de progression.
Le menu principal intègre un Musée 3D interactif (gallerie.html). Cet espace indépendant charge les géométries Three.js utilisées en jeu pour vous permettre d'observer sous tous les angles les différents objets, ennemis et obstacles (Puces, Navettes, Glace, etc.) d'un simple clic.
Aucun outil de compilation ou étape de build n'est nécessaire. Comme le jeu utilise des modules ES6 (import/export), il doit simplement être servi par un serveur HTTP local pour des raisons de sécurité du navigateur (les requêtes d'import de modules via le protocole file:// sont bloquées).
Si Node.js est installé sur votre machine, lancez cette commande à la racine du projet :
npx serve .Si vous préférez Python, utilisez l'un de ces serveurs intégrés :
- Python 3 :
python -m http.server 8000
- Python 2 :
python -m SimpleHTTPServer 8000
Ouvrez ensuite votre navigateur favori à l'adresse : http://localhost:8000 (ou le port indiqué par votre terminal) et commencez à jouer !
- Déplacement : Touches
ZQSD/WASDou Flèches Directionnelles. - Consommer la Batterie : Cliquez sur le bouton 🔋 de l'interface HUD en bas à gauche de l'écran.
- Options : Bouton ⚙️ pour activer ou désactiver les sons, ajuster le volume, passer en plein écran ou réinitialiser la partie.
Ce projet est distribué sous licence MIT. Libre à vous de le modifier, de l'améliorer et de le partager !
Développé avec passion pour l'exploration en 3D. Préparez-vous à défier la géométrie !