From 4bfd84a0b57f2d7379943c423f3fe78d8018c1cc Mon Sep 17 00:00:00 2001 From: Zhongwei Li Date: Sun, 30 Nov 2025 08:26:59 +0800 Subject: [PATCH] Initial commit --- .claude-plugin/plugin.json | 12 ++ README.md | 3 + plugin.lock.json | 45 +++++ skills/creating-arcade-games/SKILL.md | 241 ++++++++++++++++++++++++++ 4 files changed, 301 insertions(+) create mode 100644 .claude-plugin/plugin.json create mode 100644 README.md create mode 100644 plugin.lock.json create mode 100644 skills/creating-arcade-games/SKILL.md diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..ba13a53 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,12 @@ +{ + "name": "leapmultix-skill-creating-arcade-games", + "description": "Skill creating-arcade-games from LeapMultix", + "version": "1.0.0", + "author": { + "name": "Julien LE SAUX", + "email": "contact@jls42.org" + }, + "skills": [ + "./skills" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..52905cc --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# leapmultix-skill-creating-arcade-games + +Skill creating-arcade-games from LeapMultix diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..d873c70 --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,45 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:jls42/leapmultix:leapmultix-marketplace/skills/creating-arcade-games", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "263cb71b0203fe484fa50ea2321d508cdf80253e", + "treeHash": "e55a5fd64c9ce41740b3c84716e18bbba6944a4feb0a3553e8c56eb547c00c2c", + "generatedAt": "2025-11-28T10:19:11.904441Z", + "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-skill-creating-arcade-games", + "description": "Skill creating-arcade-games from LeapMultix", + "version": "1.0.0" + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "631f035c6e0b5fa62e21f2e2951c930ccaadb9af1e068b30e73c3c985537866d" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "274ab14301f8943fc43cc12e13c92ed1370db1329ca6c91b55ae33a5c3d98cc0" + }, + { + "path": "skills/creating-arcade-games/SKILL.md", + "sha256": "09d1ead875ca16a1e1819f2b7eb8621236333248954669d133bd3cfcf93547dc" + } + ], + "dirSha256": "e55a5fd64c9ce41740b3c84716e18bbba6944a4feb0a3553e8c56eb547c00c2c" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/skills/creating-arcade-games/SKILL.md b/skills/creating-arcade-games/SKILL.md new file mode 100644 index 0000000..215d08f --- /dev/null +++ b/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