Mario Runner - Jeu Mobile avec Gyroscope

Jeu de plateforme 2D pour mobile avec contrôle gyroscope, développé avec Phaser 3 et TypeScript.

🚀 Démarrage rapide

Installation

npm install

Développement

npm run dev

Le jeu sera accessible sur http://localhost:3000

Test sur mobile

1. Assurez-vous que votre mobile et votre PC sont sur le même réseau WiFi
2. Lancez npm run dev
3. Notez l'adresse IP affichée dans le terminal (ex: http://192.168.1.10:3000)
4. Ouvrez cette adresse dans le navigateur de votre mobile
5. Important iOS : Safari nécessite HTTPS pour le gyroscope. Utilisez un tunnel (ngrok, localtunel) ou un certificat SSL local

Build de production

npm run build

Les fichiers optimisés seront dans le dossier dist/

Prévisualiser le build

npm run preview

📱 Contrôles

• Gyroscope : Inclinez le téléphone à gauche/droite pour déplacer le personnage
• Bouton Saut : Touchez le bouton en bas à droite pour sauter

🎮 Fonctionnalités

• ✅ Configuration Phaser 3 avec TypeScript
• ✅ Support gyroscope iOS et Android
• ✅ Mode paysage forcé
• ✅ PWA (Progressive Web App)
• 🚧 Sprites personnalisés (à créer)
• 🚧 Niveaux et plateformes
• 🚧 Obstacles et cadeaux
• 🚧 Système de score
• 🚧 Niveau de 3 minutes

📂 Structure du projet

src/
├── scenes/          # Scènes Phaser (Boot, Menu, Game)
├── controls/        # Contrôles gyroscope et bouton
├── entities/        # Entités du jeu (Player, Obstacle, Gift)
├── utils/           # Utilitaires et constantes
└── main.ts          # Point d'entrée

public/
├── assets/          # Sprites, backgrounds, sons
├── levels/          # Fichiers JSON des niveaux
└── manifest.json    # Configuration PWA

🛠 Technologies

• Phaser 3 - Moteur de jeu 2D
• TypeScript - Typage statique
• Vite - Build tool rapide
• PWA - Application web progressive

📝 Prochaines étapes

1. ✅ Implémenter le contrôle gyroscope
2. ✅ Créer le bouton de saut tactile
3. ✅ Designer les plateformes et obstacles
4. ✅ Ajouter les cadeaux et le système de score
5. ✅ Créer un niveau de 3 minutes
6. 🚧 Créer les sprites du personnage (voir SPRITE_WORKFLOW.md)
7. 🚧 Ajouter sons et musique
8. 🚧 Optimiser assets graphiques
9. 🚧 Tester sur mobile réel via HTTPS
10. 🚧 Déployer en ligne (voir DEPLOY.md)

🎨 Assets nécessaires

À créer :

• Spritesheet du personnage (idle, walk, jump)
• Background qui défile
• Tiles pour plateformes
• Sprites obstacles
• Sprites cadeaux
• Icônes PWA (192x192, 512x512)

Outils recommandés :

• GIMP/Photoshop : Détourage et création sprites
• Piskel : Création de spritesheets pixel art
• Tiled : Éditeur de niveaux