Initial commit

.claude-plugin/plugin.json

@@ -0,0 +1,15 @@
+{
+  "name": "leapmultix-dev-arcade",
+  "description": "Arcade creation helpers: arcade specialist agent plus gameplay skills",
+  "version": "1.0.0",
+  "author": {
+    "name": "Julien LE SAUX",
+    "email": "contact@jls42.org"
+  },
+  "skills": [
+    "./skills"
+  ],
+  "agents": [
+    "./agents"
+  ]
+}

README.md

@@ -0,0 +1,3 @@
+# leapmultix-dev-arcade
+
+Arcade creation helpers: arcade specialist agent plus gameplay skills

agents/arcade-specialist.md

@@ -0,0 +1,56 @@
+---
+name: arcade-specialist
+description: Développeur expert en jeux canvas spécialisé dans les jeux d'arcade éducatifs (Multimiam, Multisnake, Space Invasion, Memory). À utiliser de manière proactive pour créer des jeux d'arcade, optimiser les performances à 60 FPS ou déboguer les mécaniques de jeu.
+tools: Read, Write, Replace, Bash, Grep, Glob, WebSearch
+model: inherit
+color: yellow
+---
+
+Vous êtes un développeur de jeux canvas expert spécialisé dans les jeux d'arcade éducatifs. Votre expertise approfondie couvre l'API HTML5 Canvas, l'architecture de la boucle de jeu, les algorithmes de détection de collision, et l'optimisation des performances (cible de 60 FPS).
+
+## Contexte du projet : Jeux d'arcade leapmultix
+
+Le projet contient plusieurs jeux d'arcade existants dans le répertoire `js/` qui DOIVENT servir de source de vérité pour l'architecture et les patterns de code.
+
+- **Jeux de référence :** `multimiam*.js`, `multisnake.js`, `arcade-invasion.js`, `arcade-multimemory.js`.
+- **Architecture :** Modules ES6, communication via `eventBus`, et une structure décomposée (Moteur, Rendu, Contrôles, Questions).
+- **Exigences de performance :** 60 FPS constants, budget de 16.6ms par trame.
+
+## Vos Principes de Développement
+
+Au lieu de vous fier à des exemples de code statiques, vous devez baser votre travail sur l'analyse du code vivant du projet.
+
+### 1. Analyse de l'Architecture Existante
+
+Avant d'implémenter une nouvelle fonctionnalité ou un nouveau jeu, votre première action est d'explorer les jeux existants pour comprendre les patterns établis.
+
+- **Action :** Examine les fichiers comme `js/multimiam-engine.js`, `js/multimiam-renderer.js`, et `js/multisnake.js`.
+- **Objectif :** Comprendre comment la boucle de jeu, la gestion de l'état, le rendu, et la détection de collision sont implémentés.
+
+### 2. Optimisation des Performances (Cible 60 FPS)
+
+- **Principe :** Le budget de 16.6ms par trame est non négociable.
+- **Action :** Profilez vos implémentations à l'aide des outils de performance du navigateur. Appliquez des stratégies comme la mise en cache sur des canevas hors-champ, le rendu partiel (dirty rectangle), et la mutualisation d'objets (`Object Pooling`) en vous inspirant des exemples existants dans le code.
+
+### 3. Détection de Collision
+
+- **Principe :** Utilisez une approche en deux phases (Broad Phase / Narrow Phase).
+- **Action :** Examinez `arcade-common.js` ou des moteurs de jeu spécifiques pour voir les implémentations de détection de collision (ex: AABB). Pour des optimisations, inspirez-vous des techniques de partitionnement spatial si nécessaire.
+
+### 4. Gestion de la Mémoire
+
+- **Principe :** Évitez les fuites de mémoire en nettoyant systématiquement les écouteurs d'événements, les timers, et les handles de `requestAnimationFrame`.
+- **Action :** Implémentez des méthodes `cleanup()` ou `destroy()` dans vos classes, en suivant les exemples des entités de jeu existantes. La mutualisation d'objets (`Object Pooling`) doit être utilisée pour les objets fréquemment créés/détruits (balles, particules).
+
+### 5. Intégration Éducative
+
+- **Principe :** Le gameplay doit intégrer naturellement les questions de multiplication.
+- **Action :** Analysez `multimiam-questions.js` et son intégration dans `multimiam-engine.js` pour comprendre comment le système de questions est connecté à la logique de jeu.
+
+## Format de Sortie Requis (CRITIQUE)
+
+Pour générer ton rapport d'analyse ou de mise en œuvre, tu DOIS :
+
+1.  Lire le fichier `.claude/skills/report-template-arcade.md`.
+2.  Utiliser son contenu comme template exact pour ta réponse.
+3.  Remplir chaque section du template avec tes conclusions.

plugin.lock.json

@@ -0,0 +1,61 @@
+{
+  "$schema": "internal://schemas/plugin.lock.v1.json",
+  "pluginId": "gh:jls42/leapmultix:leapmultix-marketplace/leapmultix-dev-arcade",
+  "normalized": {
+    "repo": null,
+    "ref": "refs/tags/v20251128.0",
+    "commit": "9ec6976b38ded9f290f179e8fd448fcbdd77ee21",
+    "treeHash": "afd6c55d11f1f6c11e10643994ceaac62fe859d545bd11270dd9717ced1c6a71",
+    "generatedAt": "2025-11-28T10:19:09.932459Z",
+    "toolVersion": "publish_plugins.py@0.2.0"
+  },
+  "origin": {
+    "remote": "git@github.com:zhongweili/42plugin-data.git",
+    "branch": "master",
+    "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
+    "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
+  },
+  "manifest": {
+    "name": "leapmultix-dev-arcade",
+    "description": "Arcade creation helpers: arcade specialist agent plus gameplay skills",
+    "version": "1.0.0"
+  },
+  "content": {
+    "files": [
+      {
+        "path": "README.md",
+        "sha256": "ee90e47d0b9f98cfc7d854a667a712e2dd0b29b0b08f1191834f9b9438eca54f"
+      },
+      {
+        "path": "agents/arcade-specialist.md",
+        "sha256": "1dac11bbe69bdaf8c250764b773bb5517164850204ec8ce3cddc87e0707ed097"
+      },
+      {
+        "path": ".claude-plugin/plugin.json",
+        "sha256": "a49127af945af5b54ead4cceb3eead38a4cac182b4e12e089f9a79f8014e76dc"
+      },
+      {
+        "path": "skills/sound-effect-manager/SKILL.md",
+        "sha256": "486f12dd2145bca5abc5f7fcd9e6b5620f3907228ab46f833026c032b902cc80"
+      },
+      {
+        "path": "skills/creating-arcade-games/SKILL.md",
+        "sha256": "09d1ead875ca16a1e1819f2b7eb8621236333248954669d133bd3cfcf93547dc"
+      },
+      {
+        "path": "skills/sprite-management/SKILL.md",
+        "sha256": "66c69aa1d18a0bc94037ca07c5aa107a37de3b8603241a6c0b8b86258ad51b1c"
+      },
+      {
+        "path": "skills/game-mode/SKILL.md",
+        "sha256": "16786958e57665705b8d61d2ee8f68333f049ffabacf09304a43007afa8f9804"
+      }
+    ],
+    "dirSha256": "afd6c55d11f1f6c11e10643994ceaac62fe859d545bd11270dd9717ced1c6a71"
+  },
+  "security": {
+    "scannedAt": null,
+    "scannerVersion": null,
+    "flags": []
+  }
+}

skills/creating-arcade-games/SKILL.md

@@ -0,0 +1,241 @@
+---
+name: creating-arcade-games
+description: Creates HTML5 canvas arcade games following leapmultix patterns (Multimiam, Multisnake, Invasion). Use when creating new arcade mini-games
+allowed-tools: Read, Write, Grep, Glob, Bash
+---
+
+# Arcade Game Creator
+
+Guide la création de nouveaux jeux arcade canvas pour le mode Arcade.
+
+## Table des matières
+
+- [Quand utiliser](#quand-utiliser)
+- [Jeux existants (références)](#jeux-existants-références)
+- [Patterns architecturaux](#patterns-architecturaux)
+- [Composants essentiels](#composants-essentiels)
+- [Workflow de création](#workflow-de-création)
+- [Patterns de gameplay](#patterns-de-gameplay)
+- [Performance (viser 60 FPS)](#performance-viser-60-fps)
+- [Checklist](#checklist)
+- [Debugging](#debugging)
+- [Outils disponibles](#outils-disponibles)
+- [En cas de doute](#en-cas-de-doute)
+- [Références](#références)
+
+## Quand utiliser
+
+- Création d'un nouveau jeu arcade
+- Extension du mode Arcade
+- Adaptation de jeux existants
+- Prototypage de mini-jeux
+
+## Jeux existants (références)
+
+### Architecture simple
+
+**Arcade Multi Memory** (31 KB) :
+
+- Jeu de memory matching
+- Structure monolithique simple
+- Bon point de départ
+
+**Arcade Invasion** (31 KB) :
+
+- Space Invaders style
+- Gestion d'entités multiples
+- Pattern de vagues d'ennemis
+
+### Architecture décomposée
+
+**Multimiam** (architecture modulaire) :
+
+- Point d'entrée + modules séparés
+- Engine (logique), Renderer (rendu), Controls (inputs), Questions (multiplication)
+- Meilleure maintenabilité
+
+**Multisnake** (38 KB) :
+
+- Structure plus monolithique
+- Gestion de grille
+
+## Patterns architecturaux
+
+### Pattern monolithique
+
+Tout dans un fichier. Simple pour jeux petits.
+
+**Quand utiliser** : Jeux simples, prototypes
+
+### Pattern décomposé
+
+Séparation en modules (Engine, Renderer, Controls, Questions).
+
+**Quand utiliser** : Jeux complexes, maintenance long terme
+
+Examine Multimiam pour voir ce pattern en action.
+
+## Composants essentiels
+
+### Game Loop
+
+Boucle continue : update → render → next frame (requestAnimationFrame)
+
+### Système de rendu Canvas
+
+Clear canvas → Draw entities → Draw UI
+
+### Gestion des inputs
+
+Support clavier ET touch pour mobile
+
+### Intégration questions multiplication
+
+Questions intégrées au gameplay, pas séparées
+
+Cherche ces patterns dans les jeux existants.
+
+## Workflow de création
+
+### Étape 1 : Choisir un jeu de référence
+
+Identifie le jeu existant qui ressemble le plus au tien :
+
+- Jeu de puzzle/memory → arcade-multimemory.js
+- Jeu de tir/action → arcade-invasion.js
+- Jeu de grille → multisnake.js
+
+### Étape 2 : Décider de l'architecture
+
+**Jeu simple** : Fichier unique `arcade-new-game.js`
+
+**Jeu complexe** : Fichiers multiples
+
+- `new-game.js` (point d'entrée)
+- `new-game-engine.js` (logique)
+- `new-game-renderer.js` (rendu)
+- `new-game-controls.js` (inputs)
+
+### Étape 3 : Comprendre le pattern de référence
+
+Examine le jeu choisi :
+
+- Comment l'initialisation fonctionne ?
+- Comment le game loop est structuré ?
+- Comment le rendu est organisé ?
+- Comment les questions sont intégrées ?
+
+Adapte (ne copie pas aveuglément).
+
+### Étape 4 : Intégrer dans mode Arcade
+
+Trouve où les jeux arcade sont enregistrés.
+Ajoute ton jeu suivant le même pattern.
+
+### Étape 5 : Ajouter UI et traductions
+
+- Ajoute bouton dans HTML (cherche structure existante)
+- Crée traductions (fr → en → es)
+- Vérifie synchronisation i18n
+
+## Patterns de gameplay
+
+### Collision detection
+
+Cherche comment les jeux existants détectent les collisions (AABB pattern courant).
+
+### Spawning d'entités
+
+Trouve comment les ennemis/objets sont créés dans les jeux.
+
+### Scoring et progression
+
+Examine les systèmes de score et de niveaux dans les jeux existants.
+
+## Performance (viser 60 FPS)
+
+**Techniques essentielles** :
+
+- `requestAnimationFrame` (pas `setInterval`)
+- Object pooling pour entités
+- Éviter allocations mémoire dans game loop
+- Optimiser opérations canvas
+
+Cherche exemples de ces optimisations dans le code existant.
+
+## Checklist
+
+### Découverte
+
+- [ ] Examiner jeu similaire existant
+- [ ] Comprendre architecture (monolithique ou décomposée)
+- [ ] Identifier patterns de game loop et rendu
+
+### Implémentation
+
+- [ ] Fichiers créés avec convention de nommage
+- [ ] Game loop avec requestAnimationFrame
+- [ ] Rendu canvas fonctionnel
+- [ ] Controls clavier ET touch
+- [ ] Questions multiplication intégrées
+- [ ] Sons joués (correct/wrong)
+
+### Intégration
+
+- [ ] Intégré dans mode Arcade
+- [ ] Bouton ajouté dans HTML
+- [ ] Traductions ajoutées
+- [ ] `npm run i18n:compare` passe
+
+### Qualité
+
+- [ ] Performance 60 FPS (tester sur mobile)
+- [ ] Cleanup des listeners (pas de leaks)
+- [ ] Tests si logique complexe
+- [ ] Code formatté et lint passe
+
+## Debugging
+
+### Problèmes de performance
+
+Utilise Chrome DevTools → Performance tab
+Enregistre pendant le jeu et cherche frame drops
+
+### Problèmes de rendu
+
+Vérifie ordre de rendu (background → entités → UI)
+
+### Problèmes d'inputs
+
+Vérifie event listeners attachés et retirés proprement
+
+## Outils disponibles
+
+Examine le code pour trouver :
+
+- Fonctions audio (playSound)
+- Event bus (communication avec UI)
+- Utils généraux (utils-es6.js)
+- Question generator (questionGenerator.js)
+- Fonctions communes arcade (arcade-common.js, arcade-utils.js)
+
+## En cas de doute
+
+**Code existant = source de vérité**
+
+1. Choisis jeu similaire comme référence
+2. Comprends son architecture avant de coder
+3. Adapte les patterns
+4. Teste fréquemment (surtout performance)
+5. Mobile-first : teste sur touch dès le début
+
+## Références
+
+Cherche dans le code :
+
+- `js/arcade-multimemory.js` - Jeu simple
+- `js/arcade-invasion.js` - Space invaders
+- `js/multimiam*.js` - Architecture décomposée
+- `js/multisnake.js` - Snake
+- `js/arcade-common.js` - Fonctions communes
+- `js/questionGenerator.js` - Génération questions

skills/game-mode/SKILL.md

@@ -0,0 +1,220 @@
+---
+name: creating-game-modes
+description: Creates new game modes by extending the abstract GameMode.js class with lifecycle management, event bus, and lazy loading
+allowed-tools: Read, Write, Grep, Glob, Bash
+---
+
+# New Game Mode Creator
+
+Guide la création de nouveaux modes de jeu suivant l'architecture établie du projet.
+
+## Table des matières
+
+- [Quand utiliser](#quand-utiliser)
+- [Architecture des Game Modes](#architecture-des-game-modes)
+- [Workflow de création](#workflow-de-création)
+- [Patterns et conventions](#patterns-et-conventions)
+- [Checklist de création](#checklist-de-création)
+- [Debugging](#debugging)
+- [En cas de doute](#en-cas-de-doute)
+- [Références](#références)
+
+## Quand utiliser
+
+- Création d'un nouveau mode de jeu
+- Extension de la fonctionnalité arcade
+- Ajout de variantes de modes existants
+- Migration de code legacy vers pattern GameMode
+
+## Architecture des Game Modes
+
+### Principes fondamentaux
+
+**Héritage** : Tous les modes héritent de `GameMode` (classe abstraite)
+
+**Communication** :
+
+- Utilise `eventBus` pour découplage (jamais de couplage direct)
+- Pattern publish/subscribe pour événements
+
+**Chargement** : Lazy loading via le système existant
+
+**Cycle de vie** : `init()` → `start()` → `update()` → `cleanup()`
+
+- Toujours nettoyer les listeners dans `cleanup()`
+
+### Méthodes abstraites requises
+
+À implémenter dans tout mode :
+
+- `init()` - Initialisation
+- `cleanup()` - Nettoyage et libération ressources
+- `handleQuestion()` - Traitement d'une question
+- `handleCorrectAnswer()` - Gestion réponse correcte
+- `handleWrongAnswer()` - Gestion réponse incorrecte
+- `updateUI()` - Mise à jour interface
+- `showResults()` - Affichage résultats
+
+## Workflow de création
+
+### Étape 1 : Explorer les exemples existants
+
+Examine les modes dans `js/modes/` :
+
+- **QuizMode.js** : Mode simple, bon point de départ
+- **ChallengeMode.js** : Mode avec timer, patterns avancés
+- **ArcadeMode.js** : Collection de mini-jeux
+
+Trouve celui qui ressemble le plus à ce que tu veux créer.
+
+### Étape 2 : Localiser la classe abstraite
+
+Trouve et examine `GameMode.js` pour comprendre :
+
+- Les méthodes abstraites obligatoires
+- Les méthodes utilitaires disponibles
+- Le contrat d'interface
+
+### Étape 3 : Comprendre l'intégration
+
+Cherche dans le code existant :
+
+- Comment les modes sont enregistrés (gestionnaire de modes)
+- Comment le lazy loading fonctionne
+- Comment les modes communiquent via eventBus
+
+### Étape 4 : Créer ton mode
+
+**Convention de nommage** : `js/modes/YourMode.js` (PascalCase)
+
+**Structure minimale** :
+
+- Hérite de GameMode
+- Implémente toutes les méthodes abstraites
+- Utilise eventBus pour communication
+- Nettoie proprement dans cleanup()
+
+Adapte un exemple existant à ton besoin.
+
+### Étape 5 : Intégrer
+
+- Enregistre dans le gestionnaire de modes
+- Ajoute au lazy loader
+- Crée les traductions (fr, en, es)
+- Vérifie synchronisation i18n
+
+### Étape 6 : Tester
+
+```bash
+npm test YourMode.test.js
+npm run format:check
+npm run lint
+npm run i18n:compare
+```
+
+## Patterns et conventions
+
+### Communication via Event Bus
+
+**Principe** : Ne jamais coupler directement les composants
+
+**Pattern typique** :
+
+- Émettre : `eventBus.emit('mode:event', data)`
+- Écouter : `eventBus.on('user:action', this.handler)`
+- Nettoyer : `eventBus.off('user:action', this.handler)`
+
+Cherche des exemples dans les modes existants.
+
+### Gestion de l'état
+
+Trouve comment les modes existants gèrent leur état interne.
+Pattern commun : objet `this.state` avec propriétés du jeu.
+
+### Utilisation des utilitaires
+
+Examine `utils-es6.js` pour voir les fonctions disponibles :
+
+- Génération de nombres aléatoires
+- Mélange d'arrays
+- Formatage du temps
+- Etc.
+
+## Checklist de création
+
+### Découverte
+
+- [ ] Examiner au moins 1 mode existant similaire
+- [ ] Comprendre GameMode (classe abstraite)
+- [ ] Identifier où les modes sont enregistrés
+- [ ] Trouver le pattern de lazy loading
+
+### Implémentation
+
+- [ ] Fichier créé dans `js/modes/`
+- [ ] Hérite de GameMode
+- [ ] Toutes méthodes abstraites implémentées
+- [ ] Event bus utilisé (pas de couplage direct)
+- [ ] Cleanup proper (listeners retirés)
+
+### Intégration
+
+- [ ] Enregistré dans gestionnaire
+- [ ] Ajouté au lazy loader
+- [ ] Traductions ajoutées (fr → en → es)
+- [ ] `npm run i18n:compare` passe
+
+### Qualité
+
+- [ ] Tests créés et passent
+- [ ] Code formatté (`npm run format`)
+- [ ] Lint passe (`npm run lint`)
+- [ ] Documentation JSDoc
+- [ ] Testé manuellement
+
+## Debugging
+
+### Vérifier initialisation
+
+Cherche les patterns de logging dans les modes existants.
+
+### Vérifier event bus
+
+Liste tous les événements émis par les modes existants pour comprendre les conventions.
+
+### Problèmes courants
+
+**Mode ne se charge pas** :
+
+- Vérifie enregistrement dans gestionnaire
+- Vérifie configuration lazy loader
+
+**Event bus ne fonctionne pas** :
+
+- Vérifie que cleanup retire les listeners
+- Cherche la bonne signature des événements
+
+**Traductions manquantes** :
+
+```bash
+npm run i18n:compare
+```
+
+## En cas de doute
+
+**Source de vérité = code existant**
+
+1. Explore les modes similaires
+2. Le code réel est plus fiable que toute documentation
+3. Adapte les patterns, ne copie pas aveuglément
+4. Teste fréquemment
+
+## Références
+
+Cherche dans le code :
+
+- `js/core/GameMode.js` - Classe abstraite
+- `js/modes/` - Tous les modes existants
+- `js/core/GameModeManager.js` - Gestionnaire
+- `js/lazy-loader.js` - Configuration lazy loading
+- `js/core/eventBus.js` - Event bus

skills/sound-effect-manager/SKILL.md

@@ -0,0 +1,87 @@
+---
+name: managing-sound-effects
+description: Manages sound effects and audio for user feedback (correct/wrong sounds, music, volume). Use when adding new sounds or managing audio
+allowed-tools: Read, Write, Grep, Glob, Bash
+---
+
+# Sound Effect Manager
+
+Gère effets sonores et feedback audio pour meilleure expérience utilisateur.
+
+## Quand utiliser
+
+- Ajout de nouveaux effets sonores
+- Gestion du volume et mute
+- Musique de fond pour jeux
+- Feedback audio utilisateur
+- Optimisation chargement audio
+
+## AudioManager (js/core/audio.js)
+
+**API :**
+
+- `playSound(soundName, options)` - Jouer son
+- `setVolume(volume)` - Volume global (0.0-1.0)
+- `toggleMute()` / `isMuted()` - Mute control
+
+**Sons disponibles (examine audio.js) :**
+correct, wrong, victory, click, coin, levelup
+
+## Ajouter un nouveau son
+
+1. **Compresser :** < 50 KB (96 kbps pour effets, 128 kbps musique)
+2. **Formats :** MP3, OGG, WebM (fallback)
+3. **Placer :** assets/sounds/
+4. **Enregistrer :** SOUND_CATALOG dans audio.js
+5. **Utiliser :**
+   ```javascript
+   import { playSound } from './core/audio.js';
+   playSound('yourSound');
+   ```
+
+## Patterns essentiels
+
+- **Préchargement :** Sons critiques avant utilisation
+- **Pool audio :** Instances multiples pour chevauchement
+- **Musique fond :** Volume 0.3, loop activé, cleanup dans destroy
+- **Mobile :** Autoplay nécessite interaction utilisateur
+- **Accessibilité :** Respecter prefers-reduced-motion
+
+## Gestion du lifecycle
+
+**Mode avec musique :**
+
+```javascript
+// Lancer musique
+playSound('background-music', { loop: true, volume: 0.3 });
+
+// cleanup() → stopper musique
+```
+
+Examine QuizMode/ChallengeMode pour patterns existants.
+
+## Checklist ajout son
+
+- [ ] Fichier compressé < 50 KB
+- [ ] Formats multiples (MP3, OGG, WebM)
+- [ ] Ajouté au SOUND_CATALOG
+- [ ] Volume testé
+- [ ] Mute fonctionne
+- [ ] Cleanup musique si loop
+- [ ] Mobile autoplay OK
+
+## En cas de doute
+
+**Règles absolues :**
+
+1. Utiliser audio.js API (jamais créer Audio directement)
+2. < 50 KB par fichier
+3. Stopper musique dans cleanup()
+4. Pas d'autoplay sans interaction utilisateur
+5. Volume par défaut ≤ 0.7
+
+**Référence :**
+
+- `js/core/audio.js` - API complète
+- `assets/sounds/` - Catalogues existants
+- Modes (QuizMode, ChallengeMode) - Exemples d'utilisation

skills/sprite-management/SKILL.md

@@ -0,0 +1,212 @@
+---
+name: managing-sprites
+description: Manages sprites, sprite sheets, sprite animations for arcade games (loading, rendering, collisions). Use when creating games or adding animated characters
+allowed-tools: Read, Write, Grep, Glob, Bash
+---
+
+# Gestion des Sprites
+
+Guide la gestion des sprites et sprite sheets pour les jeux arcade.
+
+## Table des matières
+
+- [Quand utiliser](#quand-utiliser)
+- [Sprites dans le projet](#sprites-dans-le-projet)
+- [Types de sprites](#types-de-sprites)
+- [Concepts clés](#concepts-clés)
+- [Classes et structures recommandées](#classes-et-structures-recommandées)
+- [Optimisations](#optimisations)
+- [Workflow de création sprite](#workflow-de-création-sprite)
+- [Checklist sprite](#checklist-sprite)
+- [En cas de doute](#en-cas-de-doute)
+
+## Quand utiliser
+
+- Ajout de nouveaux personnages/ennemis
+- Création de sprite sheets
+- Animations de sprites
+- Détection de collisions
+- Optimisation rendu sprites
+
+## Sprites dans le projet
+
+Trouve dans le code :
+
+- Personnages joueurs
+- Monstres et ennemis
+- Power-ups et collectibles
+- Sprite sheets existants
+
+**Formats :**
+
+- PNG avec transparence
+- Sprite sheets (multiples frames)
+- Résolutions multiples (@1x, @2x, @3x)
+
+Examine le répertoire assets/sprites.
+
+## Types de sprites
+
+### 1. Sprite simple
+
+Image statique, pas d'animation, position et taille fixes.
+
+### 2. Sprite Sheet
+
+**Multiple frames dans une image :**
+
+- Layout horizontal (frames en ligne)
+- Layout grille (frames en grille)
+- Permet animations fluides
+
+**Layouts courants :**
+
+- Horizontal : 8 frames × 64px = 512×64px
+- Grille 4×4 : 16 frames de 64×64px = 256×256px
+- Par row : Chaque ligne = animation différente
+
+Trouve les sprite sheets existants.
+
+### 3. Sprite animé
+
+**Animation frame par frame :**
+
+- FPS configurable
+- Boucle automatique
+- Delta time pour smoothness
+
+### 4. Sprite directionnel
+
+**Différentes animations par direction :**
+
+- Idle, Walk, Jump par direction
+- Row dans sprite sheet par action
+- State machine pour transitions
+
+## Concepts clés
+
+### Chargement d'images
+
+**Asynchrone :**
+
+- `Image.onload` pour savoir quand prêt
+- Précharger avant utilisation
+- Placeholder ou loading si nécessaire
+
+Trouve comment le projet gère le chargement.
+
+### Rendering
+
+**Canvas drawImage() :**
+
+- Source rectangle (quelle partie du sprite sheet)
+- Destination rectangle (où dessiner)
+- Scaling automatique si tailles différentes
+
+Examine les fonctions de rendu dans les jeux.
+
+### Collision Detection
+
+**Techniques disponibles :**
+
+- Bounding box (AABB) - Simple et rapide
+- Collision circulaire - Pour objets ronds
+- Pixel-perfect - Précis mais coûteux
+- Hitbox personnalisée - Compromise
+
+Trouve les fonctions de collision utilisées.
+
+### Animation State Machine
+
+**États et transitions :**
+
+- IDLE → WALK → JUMP → FALL → IDLE
+- Changement frame selon elapsed time
+- Loop ou one-shot selon animation
+
+Examine les state machines dans les jeux arcade.
+
+## Classes et structures recommandées
+
+Trouve dans le code :
+
+- Classe Sprite de base
+- Classe AnimatedSprite
+- Manager de sprites (pool, loading)
+- Helpers de collision
+
+Examine l'architecture existante.
+
+## Optimisations
+
+### Performance
+
+- **Sprite pooling** : Réutiliser instances au lieu de créer/détruire
+- **Dirty flag** : Re-draw seulement si changement
+- **Offscreen culling** : Pas de rendu si hors écran
+- **Batch rendering** : Grouper draw calls
+
+### Mémoire
+
+- **Atlas textures** : Combiner sprites dans une texture
+- **Lazy loading** : Charger sprites au besoin
+- **Image scaling** : Charger résolution appropriée (@1x, @2x)
+- **Cleanup** : Libérer sprites inutilisés
+
+Cherche les optimisations déjà en place.
+
+## Workflow de création sprite
+
+### 1. Design sprite sheet
+
+- Définir taille frame (64×64, 128×128, etc.)
+- Organiser layout (horizontal, grille)
+- Créer frames avec transparence PNG
+
+### 2. Intégration code
+
+- Charger sprite sheet
+- Définir source rectangles par frame
+- Setup animation (FPS, frames, loop)
+- Render à chaque frame du jeu
+
+### 3. Collision setup
+
+- Définir hitbox pour collision
+- Tester collisions avec autres sprites
+- Ajuster hitbox si nécessaire
+
+### 4. Tests et debug
+
+- Afficher hitboxes en mode debug
+- Vérifier timing animations
+- Tester performance avec multiples sprites
+
+## Checklist sprite
+
+- [ ] Sprite sheet créé avec transparence PNG
+- [ ] Layout défini (horizontal/grille)
+- [ ] Frames chargées correctement
+- [ ] Animations fluides (FPS approprié)
+- [ ] Collisions détectées correctement
+- [ ] Hitboxes ajustées
+- [ ] Performance acceptable (60 FPS)
+- [ ] Cleanup mémoire implémenté
+
+## En cas de doute
+
+**Source :** Jeux arcade existants + sprite utils
+
+**Règles absolues :**
+
+1. Toujours précharger sprites avant utilisation
+2. Utiliser delta time pour animations fluides
+3. Bounding box (AABB) pour la plupart des collisions
+4. Sprite pooling si > 10 instances simultanées
+5. Cleanup sprites inutilisés pour éviter memory leaks
+
+**Workflow minimal :**
+
+- Charger sprite sheet avec Image.onload
+- drawImage() avec source/destination rectangles
+- Collision AABB pour détection rapide