# 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

```bash
npm install
```

### Développement

```bash
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

```bash
npm run build
```

Les fichiers optimisés seront dans le dossier `dist/`

### Prévisualiser le build

```bash
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