--- name: opus-5-5-game-gyroll-tilt-to-roll-marble-runner description: "Use when you want a game like Erwann Robin's \"GYROLL: tilt-to-roll marble runner\". Runs their exact Claude Opus 5.5 prompt." source: https://github.com/ErwannRobin/gyro prompt_source: https://github.com/ErwannRobin/gyro#prompt-history author: "Erwann Robin" model: claude-opus-5-5 --- # GYROLL: tilt-to-roll marble runner A free prompt from the Omo "Opus 5.5 game prompts" collection. - Made by Erwann Robin and shared on GitHub: https://github.com/ErwannRobin/gyro - Prompt quoted word for word from: https://github.com/ErwannRobin/gyro#prompt-history - Play the original: https://gyroll.vercel.app/ - Model as stated by the creator: Claude Opus 5.5. Omo has not re-run it, so your result will differ. ## How to use 1. Open Claude Code (or a Claude chat for a single-file HTML game) running Claude Opus 5.5. 2. Paste the prompt below. 3. Change the theme, characters or rules if you want your own version. 4. Play it, then ask for fixes in plain words. ## Prompt ```text Crée un jeu vidéo HTML5 complet et extrêmement soigné dans **un seul fichier `index.html`**. ## Concept Le joueur contrôle une **bille** qui roule sur une **longue planche étroite en 3D**, suspendue dans le vide. La planche contient un **chemin sinueux en virages et zigzag**, avec des virages de plus en plus difficiles. Le chemin avance continuellement vers l’avant et est généré/prolongé au fur et à mesure : le jeu est donc **endless**. Objectif : **aller le plus loin possible sans tomber**. Le score augmente continuellement avec la distance parcourue. Afficher : * distance * score * meilleur score * vitesse actuelle Le joueur doit avoir immédiatement la sensation d'un **jeu arcade mobile premium**, pas d'une simple démo technique. ## CONTRAINTE ABSOLUE : UN SEUL HTML Tout doit être contenu dans **un unique fichier HTML** : * HTML * CSS * JavaScript * shaders éventuels * effets visuels * sons générés par Web Audio API **Aucune librairie externe.** Pas de Three.js. Pas de Babylon.js. Pas de Cannon.js. Pas de CDN. Pas de fichiers externes. Pas d'images externes. Pas de polices externes. Le fichier doit pouvoir être sauvegardé puis ouvert directement dans un navigateur moderne. ## Contrôle mobile Le contrôle principal doit utiliser **l'accéléromètre / gyroscope du téléphone**. Sur mobile : * incliner le téléphone vers la gauche → la bille se déplace vers la gauche * incliner vers la droite → la bille se déplace vers la droite * Incliner vers l’avant → la bille se déplace vers l’avant * Incliner vers l’arrière → la bille ralentit puis se déplace vers l’arrière * l'orientation doit être filtrée/lissée pour éviter les mouvements brusques * prévoir une calibration initiale afin que la position naturelle du téléphone corresponde au centre IMPORTANT : Sur iOS, gérer correctement la permission `DeviceOrientationEvent.requestPermission()` lorsqu'elle est nécessaire. Afficher un bouton clair : **« ACTIVER LE CONTRÔLE PAR INCLINAISON »** Si les capteurs ne sont pas disponibles ou refusés : * proposer automatiquement un contrôle tactile de secours * le jeu doit rester parfaitement jouable Sur desktop : * WASD / flèches * éventuellement souris ou trackpad comme contrôle secondaire. ## Gameplay La bille doit avoir une vraie sensation de poids et d'inertie. Implémenter une physique suffisamment crédible : * accélération * friction * inertie * gravité * vitesse maximale * collisions avec les bords du chemin * chute lorsque la bille quitte la planche Le joueur ne doit pas simplement déplacer directement la bille avec une coordonnée X. La bille doit réellement sembler rouler. ### Génération du parcours Créer un parcours endless procédural. Le chemin doit : * être étroit * zigzaguer * avoir des virages doux et des virages serrés * varier sa largeur * introduire progressivement davantage de difficulté * contenir occasionnellement des sections spéciales Exemples de sections : * ligne droite rapide * grand virage * succession de petits zigzags * passage étroit * plateforme légèrement inclinée * trous / zones dangereuses * plateformes discontinues * obstacles simples * accélérateurs La difficulté doit augmenter progressivement avec la distance. Éviter que la génération produise des situations impossibles. ## Direction artistique Je veux quelque chose de **visuellement extraordinaire**. Pas un simple canvas avec des rectangles. Direction artistique : **arcade futuriste premium + jouet physique + environnement spectaculaire.** Imagine un mélange entre : * un jouet miniature extrêmement détaillé * une piste suspendue dans un immense espace * une esthétique arcade moderne * des matériaux réalistes * des effets lumineux élégants La planche doit être très travaillée : * matériau détaillé * bords visibles * dessous de la plateforme * petites pièces mécaniques * rivets * bandes lumineuses * texture subtile * variations de matériaux La bille doit être magnifique : * matériau métallique/verre * réflexions simulées * highlight dynamique * ombre portée * légère traînée lumineuse à grande vitesse Potentiellement on peut choisir plusieurs textures pour la planche et la bille. L'environnement autour de la planche doit donner une vraie impression de profondeur : * immense vide * brume * particules * étoiles ou architecture abstraite * lumière volumétrique simulée * éléments qui défilent à différentes vitesses ## Rendu Puisqu'aucune librairie 3D externe n'est autorisée, construis toi-même un moteur de rendu suffisamment convaincant avec **Canvas 2D**, éventuellement avec WebGL natif si tu estimes que cela apporte une amélioration majeure. Tu peux utiliser : * Canvas 2D * WebGL natif * Web Audio API * DeviceOrientation API * requestAnimationFrame * Pointer Events * CSS avancé Si WebGL est utilisé, écris directement les shaders GLSL dans le fichier HTML. Priorité : **60 FPS sur téléphone moderne.** Prévoir une adaptation automatique : * résolution * pixel ratio * nombre de particules * qualité des ombres * effets post-processing afin de maintenir de bonnes performances. ## Caméra Caméra troisième personne légèrement au-dessus et derrière la bille. Elle doit suivre la bille avec : * interpolation fluide * léger retard cinématique * anticipation dans la direction du déplacement * léger mouvement de caméra avec la vitesse Lors des gros virages, la caméra doit donner une sensation spectaculaire de mouvement. ## Effets Ajouter de nombreux petits détails qui donnent une sensation premium : * particules lors des collisions * particules lorsque la bille accélère * poussière/étincelles très légères * traînée lumineuse * motion blur simulé si performant * vignette * légère profondeur atmosphérique * flash subtil lors d'un événement important * effets de particules lors de la chute * caméra dynamique Ne pas surcharger l'écran. L'ensemble doit rester élégant. ## Sons Créer **tous les sons avec Web Audio API**, sans fichiers audio externes. Créer au minimum : * son de roulement de la bille * petites variations sonores selon la vitesse * son lors d'une collision avec le bord * son lorsqu'un bonus est récupéré * son lors du passage d'un checkpoint * son lors d'une accélération * son de chute * son de game over * musique d'ambiance générative minimaliste La musique doit être générée procéduralement et rester agréable en boucle. IMPORTANT : les navigateurs bloquent généralement l'audio avant une interaction utilisateur. Initialiser l'AudioContext après le premier clic/tap. Ajouter un bouton : 🔊 / 🔇 Prévoir une gestion propre du volume. ## Interface L'interface doit être minimaliste et magnifique. En haut : **SCORE** `12 840` **DISTANCE** `284 m` **BEST** `1 920 m` Afficher éventuellement la vitesse de façon discrète. Au démarrage : un écran élégant avec : **ROLL** *How far can you go?* Puis : **ACTIVER LE CONTRÔLE PAR INCLINAISON** et une petite indication : **Inclinez votre téléphone pour contrôler la bille** Après la calibration, lancer immédiatement le jeu. ## Game Over Lorsque la bille tombe : ralentir brièvement le temps, faire tomber la caméra avec elle, ajouter des particules, jouer le son de chute, puis afficher : **GAME OVER** `1 284 m` `SCORE 48 920` `BEST 2 041 m` Bouton : **REJOUER** Si le score est un record : **NOUVEAU RECORD** avec une animation spectaculaire mais courte. ## UX mobile Le jeu doit être pensé d'abord pour un écran de smartphone en portrait. * aucun scroll * aucun élément minuscule * boutons facilement utilisables au doigt * interface lisible en plein soleil * aucune dépendance à un hover * gestion correcte du changement d'orientation * empêcher les gestes tactiles accidentels pendant le jeu lorsque nécessaire Prévoir aussi un mode paysage si pertinent. ## Architecture du code Même si tout est dans un seul HTML, organiser proprement le JavaScript en modules/classes logiques : * Game * Renderer * Physics * TrackGenerator * Ball * Camera * InputManager * AudioManager * ParticleSystem * UI Ne pas écrire un énorme bloc de code spaghetti. Ajouter des commentaires uniquement là où ils sont réellement utiles. ## Robustesse Le jeu doit : * fonctionner sans serveur si possible * fonctionner sur Chrome/Safari modernes * fonctionner sur iPhone et Android * gérer l'absence de DeviceOrientation * gérer le refus de permission * gérer la perte de focus * mettre le jeu en pause si nécessaire * reprendre proprement * éviter les fuites mémoire * limiter le nombre de particules * ne jamais produire de NaN ou d'objets invalides * ne jamais générer un parcours impossible ## Très important Ne me donne pas une simple maquette. Je veux **un jeu réellement jouable et fini**. Avant de terminer, vérifie mentalement : 1. que le fichier est autonome ; 2. qu'il ne dépend d'aucune ressource externe ; 3. que le contrôle gyroscopique fonctionne sur mobile ; 4. que la permission iOS est correctement demandée ; 5. qu'un fallback tactile existe ; 6. que le parcours est réellement endless ; 7. que le score augmente avec la distance ; 8. que la bille peut réellement tomber ; 9. que le bouton Rejouer fonctionne ; 10. que les sons sont générés sans fichiers externes ; 11. que le jeu reste performant sur mobile. **Donne-moi directement le contenu complet du fichier `index.html`, prêt à être copié-collé et exécuté.** ``` --- The prompt and the game belong to their creator. Listed on omo.space with credit and a link to the original. Creator and want it removed? https://omo.space/support