mario/QUICKSTART.md

# 🚀 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éplacer
- `Espace` ou `↑` : Sauter

### Sur Mobile

1. **Sur le même WiFi** :
   - Ouvrez http://10.0.1.97:3001/ sur votre mobile
   - ⚠️ **Note** : Le gyroscope ne fonctionnera pas en HTTP (iOS)

2. **Avec HTTPS (pour gyroscope iOS)** :
   ```bash
   # 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é** :
1. Détourer la photo du neveu (GIMP, remove.bg)
2. Créer animations avec Piskel ou Aseprite
3. Placer dans `public/assets/sprites/player_spritesheet.png`
4. Charger dans `src/scenes/BootScene.ts`

### 2. Ajouter des Sons

```typescript
// 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) :
1. Créer un tilemap
2. Exporter en JSON
3. 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)** :
```bash
npm run build
npx netlify-cli deploy --prod --dir=dist
```

## 🔧 Personnalisation Rapide

### Changer la Difficulté

Éditez `src/utils/constants.ts` :

```typescript
// 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

```typescript
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()` :

```typescript
// 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

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

```bash
# Réinstaller les dépendances
rm -rf node_modules
npm install
npm run dev
```

### Erreurs TypeScript

```bash
# 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_SPEED`
- `PLAYER_ACCELERATION`
- `GYRO_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

1. **Mode Debug** : Activez dans `src/game.ts` :
   ```typescript
   arcade: {
       debug: true,  // Voir les hitboxes
   }
   ```

2. **Test Rapide Mobile** :
   - Utilisez Chrome DevTools → Toggle Device Toolbar (F12)
   - Simulez gyroscope : Sensors tab

3. **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 complet
- `DEPLOY.md` - Déploiement
- `public/assets/sprites/SPRITE_WORKFLOW.md` - Création sprites

**Bon développement ! 🚀**