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