Fanaviation12

Prompt

PROMPT ULTIME — CRÉER UN JEU VOXEL 3D MOBILE DANS UN UNIQUE FICHIER HTML Tu es un développeur senior spécialisé en JavaScript, WebGL, Three.js, jeux vidéo voxel, optimisation mobile et ergonomie tactile. Ta mission est de créer un jeu sandbox voxel 3D complet, original et réellement jouable sur téléphone, directement depuis un navigateur. Le résultat doit rappeler les grandes mécaniques d’un jeu de construction et de survie en blocs, sans copier son nom, son code, ses textures, ses sons, ses personnages, ses interfaces ou ses ressources protégées. CONTRAINTE ABSOLUE Tu dois livrer un seul fichier nommé "index.html". Ce fichier doit contenir directement : - le HTML ; - le CSS ; - le JavaScript ; - les interfaces ; - les textures générées par code ; - les sons générés par code si possible ; - toutes les données du jeu ; - les recettes ; - les blocs ; - les objets ; - la sauvegarde. Aucun autre fichier local ne doit être nécessaire. Le projet doit fonctionner sans : - npm ; - Node.js ; - terminal ; - compilation ; - installation ; - serveur backend ; - base de données distante ; - clé API ; - compte utilisateur ; - fichier CSS séparé ; - fichier JavaScript séparé ; - texture externe obligatoire ; - logiciel spécialisé. Le fichier doit pouvoir être déployé par un débutant sur : - GitHub Pages ; - Netlify ; - Cloudflare Pages ; - Vercel ; - itch.io ; - n’importe quel hébergement statique. L’utilisateur doit seulement avoir à : 1. créer un fichier "index.html" ; 2. copier le code fourni ; 3. enregistrer le fichier ; 4. envoyer le fichier sur un hébergement statique ; 5. ouvrir le lien depuis son téléphone. --- 1. FORMAT DE SORTIE OBLIGATOIRE Ta réponse finale doit contenir : 1. une explication très courte ; 2. un unique bloc de code contenant l’intégralité du fichier "index.html" ; 3. une procédure de déploiement pour débutant ; 4. une liste honnête des limites restantes. Ne fournis pas plusieurs fichiers. Ne découpe pas le code en plusieurs réponses. Ne remplace jamais une partie du code par : // À compléter ou : // Reste du code ou : // Implémentation similaire ou toute autre omission. Le fichier doit être complet et directement copiable. --- 2. DÉPENDANCE AUTORISÉE Tu peux charger Three.js depuis un CDN fiable avec une balise "<script>" classique. Utilise de préférence une version stable précise et non une URL ambiguë du type "latest". Exemple de principe : <script src="https://cdn.jsdelivr.net/npm/three@VERSION/build/three.min.js"></script> Évite les modules ES si cela complique l’ouverture et le déploiement pour un débutant. Le jeu doit afficher un message clair si Three.js ne peut pas être chargé. À part Three.js, évite toute autre dépendance. --- 3. OBJECTIF DU JEU Créer un jeu voxel 3D en vue à la première personne comprenant au minimum : - un monde en blocs ; - une génération procédurale ; - plusieurs types de blocs ; - des arbres ; - des reliefs ; - de l’eau simplifiée ; - un ciel ; - un cycle jour-nuit ; - un joueur contrôlable ; - des collisions ; - la gravité ; - le saut ; - la destruction de blocs ; - le placement de blocs ; - une barre d’inventaire rapide ; - une sélection de blocs ; - une sauvegarde locale ; - un mode survie simplifié ; - un mode créatif ; - une interface mobile ; - une interface ordinateur ; - un écran d’accueil ; - un menu pause ; - des paramètres graphiques ; - une aide intégrée. Le jeu doit être une vraie expérience jouable et non une simple scène 3D. --- 4. IDENTITÉ ORIGINALE Invente une identité propre au jeu. Créer : - un nom original ; - un titre original ; - une palette visuelle originale ; - des noms de blocs originaux ; - une interface originale ; - des textures originales générées par Canvas ; - des sons simples générés avec Web Audio API. Ne reprends pas : - le logo d’un jeu existant ; - ses textures ; - ses noms exacts ; - ses sons ; - son écran d’accueil ; - son interface exacte ; - ses créatures connues ; - ses recettes exactes. --- 5. COMPATIBILITÉ Le jeu doit fonctionner principalement sur : - Chrome Android ; - Samsung Internet ; - Edge Android ; - Safari iPhone ; - Safari iPad ; - Chrome ordinateur ; - Edge ordinateur ; - Firefox ordinateur. Le jeu doit être optimisé en priorité pour un téléphone récent. Il doit s’adapter aux écrans : - 16:9 ; - 18:9 ; - 20:9 ; - tablettes ; - écrans pliables ; - écrans avec encoche. Utilise les zones sécurisées CSS : env(safe-area-inset-top) env(safe-area-inset-bottom) env(safe-area-inset-left) env(safe-area-inset-right) --- 6. ÉCRAN D’ACCUEIL Créer un écran d’accueil esthétique comprenant : - le nom du jeu ; - un décor voxel animé en arrière-plan ; - un bouton « Jouer » ; - un bouton « Nouveau monde » ; - un bouton « Continuer » si une sauvegarde existe ; - un bouton « Paramètres » ; - un bouton « Aide ». Pour la création d’un monde, demander : - nom du monde ; - graine facultative ; - mode créatif ou survie ; - qualité graphique. Si aucune graine n’est saisie, en générer une automatiquement. --- 7. MONDE VOXEL Créer un monde composé de blocs cubiques. Prévoir au minimum les blocs suivants avec des noms originaux : - herbe ; - terre ; - pierre ; - sable ; - bois ; - feuilles ; - eau ; - minerai commun ; - minerai rare ; - bloc lumineux ; - planches ; - verre simplifié. Chaque bloc doit avoir : - un identifiant ; - une couleur ou texture ; - une solidité ; - un temps de destruction ; - une transparence éventuelle ; - une possibilité d’être placé ; - une possibilité d’être récupéré. Les textures doivent être générées dans le fichier HTML avec Canvas 2D. Créer un atlas de textures généré dynamiquement. Ne charge aucune image externe obligatoire. --- 8. GÉNÉRATION PROCÉDURALE Le monde doit être généré à partir d’une graine. La même graine doit produire le même terrain. Utilise une fonction de bruit procédural intégrée au fichier. La génération doit produire : - terrain irrégulier ; - plaines ; - collines ; - petites montagnes ; - plages ; - eau ; - arbres ; - minerais ; - petites cavités ou grottes simplifiées. Le monde peut être limité en taille pour préserver les performances mobiles. Taille recommandée pour la première version : - entre 48 × 48 et 96 × 96 blocs horizontalement ; - hauteur comprise entre 24 et 48 blocs. Choisis automatiquement une taille raisonnable selon la puissance de l’appareil. --- 9. OPTIMISATION OBLIGATOIRE Ne crée jamais un mesh Three.js distinct pour chaque bloc visible. Utilise au minimum : - suppression des faces invisibles ; - géométrie fusionnée ; - "BufferGeometry" ; - un nombre limité de matériaux ; - atlas de textures ; - recalcul local du monde lors des modifications ; - distance d’affichage limitée ; - brouillard ; - réduction de résolution sur mobile ; - limitation des particules ; - réutilisation des objets temporaires. Le jeu doit viser : - environ 60 FPS sur téléphone puissant ; - environ 30 FPS minimum sur téléphone intermédiaire. Si nécessaire, privilégie la fluidité plutôt que la taille du monde. --- 10. JOUEUR ET PHYSIQUE Le joueur doit avoir : - une caméra à la première personne ; - une hauteur réaliste par rapport aux blocs ; - une boîte de collision ; - une gravité ; - une vitesse horizontale ; - un saut ; - une détection du sol ; - des collisions avec les blocs solides ; - une possibilité de marcher ; - une possibilité de courir ; - une possibilité de voler en mode créatif ; - des dégâts de chute en mode survie. La physique doit être basée sur le temps écoulé et non sur le nombre d’images par seconde. Le joueur ne doit pas : - traverser les murs ; - passer à travers le sol ; - apparaître dans un bloc ; - placer un bloc dans son propre corps. Prévoir une fonction permettant de replacer le joueur au-dessus du terrain s’il est bloqué. --- 11. COMMANDES MOBILES Créer de vraies commandes tactiles utilisables. À gauche : - joystick virtuel pour avancer ; - reculer ; - aller à gauche ; - aller à droite. À droite : - glissement du doigt pour orienter la caméra. Ajouter des boutons pour : - sauter ; - courir ; - casser un bloc ; - poser un bloc ; - ouvrir l’inventaire ; - mettre en pause ; - voler vers le haut en mode créatif ; - voler vers le bas en mode créatif. Les commandes doivent : - prendre en charge plusieurs doigts simultanément ; - utiliser Pointer Events ; - empêcher le défilement de la page ; - empêcher le zoom accidentel ; - empêcher la sélection de texte ; - rester visibles en plein écran ; - avoir une taille adaptée aux pouces ; - avoir une opacité réglable ; - avoir un retour visuel lors de l’appui. La caméra et le déplacement doivent fonctionner simultanément avec deux doigts. ---

A system prompt was added to support web rendering