Uma estrutura automatizada que permite que desenvolvedores e agentes de IA construam, testem e refinem sistematicamente jogos web baseados em canvas usando Playwright.
Instalar e Baixar
1. ClawHub CLI
A maneira mais rápida de instalar uma habilidade diretamente do registro.
npx clawhub@latest install develop-web-game
2. Instalação Manual
Copie a pasta da habilidade para um desses locais
~/.openclaw/skills/ <project>/skills/ Prioridade: Espaço de Trabalho > Local > Integrado
3. Instalação do Prompt
Copie este prompt para o OpenClaw para instalá-lo automaticamente.
Ajude-me a instalar o develop-web-game usando o Clawhub. Se o Clawhub não estiver instalado, instale-o primeiro (npm i -g clawhub).
Prefere baixar?
Obtenha os arquivos originais da habilidade em um arquivo ZIP.
O que é Desenvolver Web Game?
A habilidade Develop Web Game estabelece um fluxo de trabalho determinístico de desenvolvimento e teste para a construção de jogos interativos de navegador. Ao tratar o design de jogos como um ciclo incremental de implementação, execução de ação, pausa, observação e ajuste, esta habilidade garante que os jogos web permaneçam robustos e livres de erros durante todo o desenvolvimento. Como parte do ecossistema Openclaw Skills, ela fornece aos agentes e desenvolvedores as ferramentas estruturadas necessárias para eliminar a instabilidade dos testes e manter loops de jogo limpos.
O núcleo desta habilidade é a integração estreita da verificação visual e rastreamento de estado programático. Em vez de depender de testes manuais, os desenvolvedores podem automatizar sequências de entrada do usuário e capturar estados de runtime precisos. Este regime de teste disciplinado sob o paradigma Openclaw Skills garante que a mecânica, os layouts de canvas e a física do seu jogo sejam renderizados com precisão sob todas as condições.
Casos de uso do Desenvolver Web Game
- Prototipar rapidamente jogos HTML e JavaScript canvas construindo recursos em pequenos incrementos testáveis.
- Automatizar entradas do usuário como movimento, pulo e interações de menu para evitar a fadiga da verificação manual.
- Validar transições de estado de jogo, lógica de renderização e layouts de UI visual usando análise automatizada de capturas de tela.
- Habilitar handoff contínuo entre múltiplas instâncias de agentes de IA usando logs de estado de progresso estruturados.
Como o Desenvolver Web Game funciona
- Definir Metas: Identifique um único recurso ou mecânica para implementar.
- Integrar Hooks: Exponha window.render_game_to_text e window.advanceTime dentro do loop de jogo para garantir acesso a estado determinístico e avanço de tempo.
- Rastrear Progresso: Mantenha um arquivo de log progress.md persistente para capturar o prompt original do usuário e as tarefas pendentes.
- Executar Playwright Client: Use o script de cliente automatizado junto com ações de referência para simular o gameplay.
- Inspecionar Visuais: Abra e inspecione visualmente as capturas de tela geradas dos novos recursos adicionados para verificar a correção.
- Verificar Interações: Teste cadeias completas de interação de várias etapas (como atirar em um inimigo para reduzir a saúde e atualizar a pontuação).
- Resolução de Erros: Verifique os logs do console do navegador e resolva quaisquer exceções de runtime em um loop de feedback iterativo.
Configuração do Desenvolver Web Game
Configure as variáveis de ambiente necessárias para inicializar os caminhos para esta habilidade:
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"
Certifique-se de que o Playwright esteja instalado globalmente ou como uma dependência do projeto:
# Verifique a disponibilidade do npx, caso contrário instale globalmente
command -v npx >/dev/null 2>&1 || npm install -g @playwright/mcp@latest
Execute o cliente de teste com um arquivo de payload de ações especificado:
node "$WEB_GAME_CLIENT" --url http://localhost:5173 --actions-file "$WEB_GAME_ACTIONS" --click-selector "#start-btn" --iterations 3 --pause-ms 250
Esquema de Dados e Taxonomia de Desenvolver Web Game
Saída de Estado de Texto
Seu jogo deve expor um hook de renderização global retornando uma string JSON sucinta representando o estado ativo:
{
"mode": "playing",
"player": { "x": 100, "y": 150, "r": 15 },
"entities": [
{ "x": 200, "y": 220, "r": 10 }
],
"score": 500
}
Payloads de Ação
Simule interações de várias etapas definindo estruturas de passos em 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 }
]
}
Arquivos e Logs Principais
| Nome do Arquivo | Descrição |
|---|---|
| progress.md | Rastreia prompts originais, listas TODO, regressões ativas e sugestões para agentes sucessores. |
| $WEB_GAME_CLIENT | Script Node realizando a integração com Playwright, avanço de tempo virtual e exportações de captura de tela. |
| $WEB_GAME_ACTIONS | Arquivo JSON de referência contendo payloads de esquema de movimento de teclado e mouse. |
Recursos avançados do Desenvolver Web Game
- Virtual Time Stepping: Implementa loops determinísticos personalizados utilizando window.advanceTime para desacoplar a velocidade do jogo da capacidade do processador host durante os testes.
- Captura Visual de Tela: Auto-gera capturas dentro do jogo para ativos visuais, permitindo asserções visuais diretas e verificação de regressão visual.
- Redirecionamento de Log de Console: Captura e analisa mensagens do console do navegador diretamente dentro de execuções de terminal para destacar falhas rapidamente.
- Registro de Progresso Multi-Agente: Integra-se com arquivos progress.md para preservar contexto e prompts do usuário em ciclos de desenvolvimento de agente sequenciais.
SKILL.md
Carregamento
Habilidades relacionadas do Openclaw
Cloudflare Deploy
Uma skill de automação de implantação integrada que permite que agentes de IA configurem, testem e implantem aplicações em todo o ecossistema Cloudflare.
Sentiment Analyzer Pro
Uma ferramenta avançada baseada em metodologia que estrutura eventos de opinião pública no ciclo de vida de cinco estágios de Duncan para gerar relatórios padronizados de relações públicas e análise de crises.
GitHub PR Comment Handler
Uma AI agent skill projetada para buscar, organizar e resolver automaticamente comentários de revisão de GitHub Pull Request abertos usando a GitHub CLI.
Figma Implement Design
Converta automaticamente nós e componentes do Figma em código de produção pixel-perfect alinhado diretamente com suas regras de estilo locais.
CarryFeed Twitter Tools
Um wrapper de linha de comando amigável para AI para resolver perfis, postagens e ativos de mídia públicos do X/Twitter sem fluxos de login ou raspagem de sessão.
Peking University Alumni Association Information Query Tool
Uma ferramenta de assistente de AI projetada para consultar e recuperar informações sobre a Peking University Alumni Association, incluindo capítulos, atividades, serviços e opções de doação.
Fluxo de Trabalho de Mesh e Textura para VFX de Jogos
Uma estrutura organizada para construir VFX de jogos estilizados e de alto desempenho no Godot usando meshes simples, texturas de scroll, materiais de Shader e tweens de motor.
Apresentou*
