Un framework automatisé qui permet aux développeurs et aux agents IA de créer, tester et affiner systématiquement des jeux web basés sur canvas à l'aide de Playwright.
Installer & Télécharger
1. ClawHub CLI
Le moyen le plus rapide d'installer une compétence directement depuis le registre.
npx clawhub@latest install develop-web-game
2. Installation manuelle
Copiez le dossier de la compétence dans l'un de ces emplacements
~/.openclaw/skills/ <project>/skills/ Priorité : Espace de travail > Local > Intégré
3. Installation du prompt
Copiez ce prompt dans OpenClaw pour l'installer automatiquement.
Aide-moi à installer develop-web-game via Clawhub. Si Clawhub n'est pas installé, installe-le d'abord (npm i -g clawhub).
Vous préférez télécharger ?
Obtenez les fichiers bruts de la compétence dans une archive ZIP.
Qu'est-ce que Développer un Web Game ?
La compétence Develop Web Game établit un flux de travail de développement et de test déterministe pour la création de jeux par navigateur interactifs. En traitant la conception de jeux comme un cycle incrémental d'implémentation, d'exécution d'actions, de mise en pause, d'observation et d'ajustement, cette compétence garantit que les jeux web restent robustes et sans erreur tout au long du développement. En tant que partie intégrante de l'écosystème Openclaw Skills, elle fournit aux agents et aux développeurs les outils structurés nécessaires pour éliminer l'instabilité des tests et maintenir des boucles de jeu propres.
Le cœur de cette compétence est l'intégration étroite de la vérification visuelle et du suivi d'état programmé. Au lieu de s'appuyer sur des tests manuels, les développeurs peuvent automatiser les séquences d'entrées utilisateur et capturer des états de runtime précis. Ce régime de test discipliné selon le paradigme Openclaw Skills garantit que la mécanique, les layouts canvas et la physique de votre jeu sont rendus avec précision dans toutes les conditions.
Cas d'utilisation de Développer un Web Game
- Prototyper rapidement des jeux HTML et JavaScript canvas en construisant des fonctionnalités par petits incréments testables.
- Automatiser les entrées utilisateur comme le mouvement, le saut et les interactions de menu pour éviter la fatigue liée à la vérification manuelle.
- Valider les transitions d'état du jeu, la logique de rendu et les layouts UI visuels à l'aide d'une analyse automatisée de captures d'écran.
- Permettre un transfert continu entre plusieurs instances d'agents IA à l'aide de logs de progression structurés.
Comment fonctionne Développer un Web Game
- Définir les objectifs : Identifiez une fonctionnalité ou une mécanique à implémenter.
- Intégrer les Hooks : Exposez window.render_game_to_text et window.advanceTime dans la boucle de jeu pour garantir un accès à l'état déterministe et une avancée temporelle.
- Suivre la progression : Maintenez un fichier de log progress.md persistant pour capturer le prompt utilisateur original et les tâches en attente.
- Exécuter Playwright Client : Utilisez le script client automatisé avec des actions de référence pour simuler le gameplay.
- Inspecter les visuels : Ouvrez et inspectez visuellement les captures d'écran générées des nouvelles fonctionnalités ajoutées pour vérifier leur exactitude.
- Vérifier les interactions : Testez des chaînes d'interaction multi-étapes complètes (comme tirer sur un ennemi pour réduire sa santé et mettre à jour le score).
- Résolution d'erreurs : Vérifiez les logs de la console du navigateur et résolvez toute exception de runtime dans une boucle de rétroaction itérative.
Configuration de Développer un Web Game
Configurez les variables d'environnement nécessaires pour initialiser les chemins de cette compétence :
export CODEX_HOME="${CODEX_HOME:-$HOME/.codex}"
export WEB_GAME_CLIENT="$CODEX_HOME/skills/develop-web-game/scripts/web_game_playwright_client.js"
export WEB_GAME_ACTIONS="$CODEX_HOME/skills/develop-web-game/references/action_payloads.json"
Assurez-vous que Playwright est installé globalement ou en tant que dépendance du projet :
# Vérifiez la disponibilité de npx, sinon installez-le globalement
command -v npx >/dev/null 2>&1 || npm install -g @playwright/mcp@latest
Exécutez le client de test avec un fichier de payload d'actions spécifié :
node "$WEB_GAME_CLIENT" --url http://localhost:5173 --actions-file "$WEB_GAME_ACTIONS" --click-selector "#start-btn" --iterations 3 --pause-ms 250
Schéma de données et taxonomie de Développer un Web Game
Sortie d'état texte
Votre jeu doit exposer un hook de rendu global renvoyant une chaîne JSON concise représentant l'état actif :
{
"mode": "playing",
"player": { "x": 100, "y": 150, "r": 15 },
"entities": [
{ "x": 200, "y": 220, "r": 10 }
],
"score": 500
}
Payloads d'action
Simulez des interactions multi-étapes en définissant des structures d'étapes en JSON :
{
"steps": [
{ "buttons": ["left_mouse_button"], "frames": 2, "mouse_x": 120, "mouse_y": 80 },
{ "buttons": [], "frames": 6 },
{ "buttons": ["right"], "frames": 8 },
{ "buttons": ["space"], "frames": 4 }
]
}
Fichiers principaux et logs
| Nom de fichier | Description |
|---|---|
| progress.md | Suit les prompts originaux, les listes TODO, les régressions actives et les suggestions pour les agents successeurs. |
| $WEB_GAME_CLIENT | Script Node réalisant l'intégration Playwright, l'avancée de temps virtuel et les exportations de captures d'écran. |
| $WEB_GAME_ACTIONS | Fichier JSON de référence contenant les payloads de schéma de mouvement clavier et souris. |
Fonctionnalités avancées de Développer un Web Game
- Virtual Time Stepping : Implémente des boucles déterministes personnalisées utilisant window.advanceTime pour découpler la vitesse de jeu de la capacité du processeur hôte pendant les tests.
- Capture visuelle d'écran : Auto-génère des captures dans le jeu vers des actifs visuels, permettant des assertions visuelles directes et un contrôle de régression visuelle.
- Redirection de logs console : Capture et analyse les messages de console du navigateur directement dans les exécutions terminal pour mettre en évidence les erreurs rapidement.
- Journalisation de progression multi-agent : S'intègre aux fichiers progress.md pour préserver le contexte et les prompts utilisateur à travers des cycles de développement d'agent séquentiels.
SKILL.md
Chargement
Compétences Openclaw associées
Cloudflare Deploy
Une compétence d'automatisation de déploiement intégrée qui permet aux agents d'IA de configurer, tester et déployer des applications sur l'ensemble de l'écosystème Cloudflare.
Sentiment Analyzer Pro
Un framework de compétences avancé axé sur une méthodologie qui structure les événements d'opinion publique selon le cycle de vie en cinq étapes de Duncan pour générer des rapports standardisés de relations publiques et d'analyse de crise.
GitHub PR Comment Handler
Une AI agent skill conçue pour récupérer, organiser et traiter automatiquement les commentaires de révision de GitHub Pull Request ouverts à l'aide de la GitHub CLI.
Figma Implement Design
Convertissez automatiquement les nœuds et composants Figma en code de production précis au pixel près, directement aligné sur vos règles de style locales.
CarryFeed Twitter Tools
Un wrapper en ligne de commande adapté à l'AI pour résoudre les profils, les publications et les composants multimédias publics X/Twitter sans flux de connexion ni scraping de session.
Peking University Alumni Association Information Query Tool
Un outil d'assistant AI conçu pour interroger et récupérer des informations sur la Peking University Alumni Association, y compris les sections, les activités, les services et les options de don.
Flux de travail de Mesh et de Texture pour VFX de jeu
Un cadre structuré pour créer des VFX de jeu stylisés et performants dans Godot en utilisant des meshes minimaux, des textures défilantes, des matériaux Shader et des tweens moteur.
En vedette*
