6.9 KiB
6.9 KiB
🚀 Guide de Démarrage Rapide
✅ Ce qui est déjà fait
Votre jeu Mario Runner est entièrement fonctionnel avec :
✨ Fonctionnalités Complètes
- ✅ Version PC : Contrôles clavier (Flèches + Espace)
- ✅ Version Mobile : Gyroscope + Bouton tactile
- ✅ Détection automatique PC/Mobile
- ✅ Physique complète (gravité, sauts, collisions)
- ✅ Plateformes (sol + 7 plateformes en l'air)
- ✅ Obstacles (collision → perte points)
- ✅ Cadeaux (collecte → gain points)
- ✅ Système de score
- ✅ Timer 3 minutes avec fin de partie
- ✅ Caméra qui suit le joueur
- ✅ Background avec effet parallaxe
- ✅ Niveau étendu (3x largeur écran)
- ✅ Menu avec demande permission gyroscope iOS
- ✅ PWA configuré
🎮 Tester Maintenant
Sur PC (Développement)
Le serveur est déjà lancé sur :
- Local : http://localhost:3001/
- Réseau : http://10.0.1.97:3001/ (pour tester depuis mobile sur WiFi)
Contrôles PC :
←→: DéplacerEspaceou↑: Sauter
Sur Mobile
-
Sur le même WiFi :
- Ouvrez http://10.0.1.97:3001/ sur votre mobile
- ⚠️ Note : Le gyroscope ne fonctionnera pas en HTTP (iOS)
-
Avec HTTPS (pour gyroscope iOS) :
# Installez ngrok npm install -g ngrok # Dans un nouveau terminal ngrok http 3001 # Utilisez l'URL HTTPS donnée (ex: https://xyz.ngrok.io)
Contrôles Mobile :
- Inclinez le téléphone : Déplacer
- Bouton vert (bas droite) : Sauter
📂 Structure du Projet
mario/
├── src/
│ ├── main.ts # Point d'entrée
│ ├── game.ts # Config Phaser
│ ├── scenes/ # Scènes du jeu
│ │ ├── BootScene.ts # Chargement
│ │ ├── MenuScene.ts # Menu + permission gyro
│ │ └── GameScene.ts # Jeu principal ⭐
│ ├── controls/ # Contrôles
│ │ ├── GyroControl.ts # Gyroscope iOS/Android
│ │ └── JumpButton.ts # Bouton tactile
│ ├── entities/ # Entités du jeu
│ │ ├── Player.ts # Joueur
│ │ ├── Obstacle.ts # Obstacles
│ │ └── Gift.ts # Cadeaux
│ └── utils/
│ └── constants.ts # Constantes ⚙️
├── public/
│ ├── assets/
│ │ └── sprites/
│ │ └── SPRITE_WORKFLOW.md # Guide création sprites
│ ├── icons/ # Icônes PWA (à créer)
│ └── manifest.json # Config PWA
├── DEVELOPMENT_GUIDE.md # Guide développement complet
├── DEPLOY.md # Guide déploiement
└── README.md # Documentation
🎨 Prochaines Étapes (Personnalisation)
1. Créer les Sprites du Personnage
📖 Consultez public/assets/sprites/SPRITE_WORKFLOW.md
Résumé :
- Détourer la photo du neveu (GIMP, remove.bg)
- Créer animations avec Piskel ou Aseprite
- Placer dans
public/assets/sprites/player_spritesheet.png - Charger dans
src/scenes/BootScene.ts
2. Ajouter des Sons
// Dans BootScene.preload()
this.load.audio('jump', 'assets/audio/jump.mp3');
this.load.audio('collect', 'assets/audio/collect.mp3');
this.load.audio('music', 'assets/audio/background.mp3');
// Dans GameScene
this.sound.play('jump'); // Lors du saut
this.sound.play('collect'); // Lors de collecte
3. Créer Plus de Niveaux
Utilisez Tiled (mapeditor.org) :
- Créer un tilemap
- Exporter en JSON
- Charger dans Phaser
4. Créer les Icônes PWA
Générez sur https://pwabuilder.com/imageGenerator
- 192x192 →
public/icons/icon-192.png - 512x512 →
public/icons/icon-512.png
5. Déployer en Ligne
📖 Consultez DEPLOY.md
Méthode rapide (Netlify) :
npm run build
npx netlify-cli deploy --prod --dir=dist
🔧 Personnalisation Rapide
Changer la Difficulté
Éditez src/utils/constants.ts :
// Plus facile
export const PLAYER_JUMP_VELOCITY = -500; // Sauts plus hauts
export const PLAYER_MAX_SPEED = 250; // Plus lent
export const LEVEL_DURATION = 240; // 4 minutes
// Plus difficile
export const PLAYER_JUMP_VELOCITY = -350; // Sauts plus bas
export const PLAYER_MAX_SPEED = 350; // Plus rapide
export const LEVEL_DURATION = 120; // 2 minutes
Ajuster le Gyroscope
export const GYRO_DEADZONE = 10; // Zone morte plus grande
export const GYRO_MAX_TILT = 20; // Moins de tilt nécessaire
export const GYRO_SENSITIVITY = 15; // Plus sensible
Ajouter des Obstacles
Dans GameScene.ts, méthode spawnTestObjects() :
// Ajouter plus d'obstacles
[400, 800, 1200, 1500, 2200, 2800].forEach((x) => {
const obstacle = this.add.rectangle(x, height - 80, 40, 60, 0xF44336);
this.physics.add.existing(obstacle);
this.obstacles!.add(obstacle);
});
📚 Commandes Utiles
# Développement (avec hot reload)
npm run dev
# Build de production
npm run build
# Prévisualiser le build
npm run preview
# Lancer sur mobile avec HTTPS
ngrok http 3001 # (après npm run dev)
🐛 Dépannage
Le jeu ne démarre pas
# Réinstaller les dépendances
rm -rf node_modules
npm install
npm run dev
Erreurs TypeScript
# Rebuild complet
npm run build
Le gyroscope ne fonctionne pas
- ✅ Vérifiez que vous utilisez HTTPS (iOS requis)
- ✅ Vérifiez que la permission a été accordée dans le menu
- ✅ Testez sur un vrai appareil (pas simulateur)
Le jeu est trop rapide/lent
Ajustez dans src/utils/constants.ts :
PLAYER_MAX_SPEEDPLAYER_ACCELERATIONGYRO_SENSITIVITY
🎯 Objectifs de Gameplay
But actuel :
- Survivre 3 minutes
- Collecter un maximum de cadeaux (jaunes) = +100 pts
- Éviter les obstacles (rouges) = -50 pts
Idées d'amélioration :
- Système de vies (3 vies, game over si 0)
- Power-ups (invincibilité, double saut, vitesse)
- Ennemis mobiles
- Checkpoints
- Multiple niveaux avec progression
- Leaderboard avec LocalStorage
💡 Astuces
-
Mode Debug : Activez dans
src/game.ts:arcade: { debug: true, // Voir les hitboxes } -
Test Rapide Mobile :
- Utilisez Chrome DevTools → Toggle Device Toolbar (F12)
- Simulez gyroscope : Sensors tab
-
Performance :
- Le jeu cible 60 FPS
- Testé sur mobile moderne
- Optimisé avec pooling d'objets (à venir)
🎊 C'est Parti !
Votre jeu est 100% fonctionnel !
Testez-le maintenant sur http://localhost:3001/
Prochaine étape recommandée : Créer les sprites du personnage 🎨
Pour toute question, consultez :
DEVELOPMENT_GUIDE.md- Guide completDEPLOY.md- Déploiementpublic/assets/sprites/SPRITE_WORKFLOW.md- Création sprites
Bon développement ! 🚀