Un marco automatizado que permite a los desarrolladores y agentes de IA construir, probar y refinar sistemáticamente juegos web basados en canvas utilizando Playwright.
Instalar y Descargar
1. ClawHub CLI
La forma más rápida de instalar una habilidad directamente desde el registro.
npx clawhub@latest install develop-web-game
2. Instalación manual
Copia la carpeta de la habilidad a una de estas ubicaciones
~/.openclaw/skills/ <project>/skills/ Prioridad: Espacio de trabajo > Local > Integrado
3. Instalación del prompt
Copia este prompt en OpenClaw para instalarlo automáticamente.
Ayúdame a instalar develop-web-game usando Clawhub. Si Clawhub no está instalado, instálalo primero (npm i -g clawhub).
¿Prefieres descargar?
Obtén los archivos originales de la habilidad en un archivo ZIP.
¿Qué es Desarrollar Web Game?
La habilidad Develop Web Game establece un flujo de trabajo de desarrollo y prueba determinista para construir juegos interactivos de navegador. Al tratar el diseño de juegos como un ciclo incremental de implementación, ejecución de acciones, pausa, observación y ajuste, esta habilidad garantiza que los juegos web permanezcan robustos y sin errores durante todo el desarrollo. Como parte del ecosistema Openclaw Skills, proporciona a los agentes y desarrolladores las herramientas estructuradas necesarias para eliminar la inestabilidad de las pruebas y mantener bucles de juego limpios.
El núcleo de esta habilidad es la integración estrecha de la verificación visual y el seguimiento de estado programático. En lugar de depender de pruebas manuales, los desarrolladores pueden automatizar secuencias de entrada del usuario y capturar estados de runtime precisos. Este régimen de pruebas disciplinado bajo el paradigma Openclaw Skills garantiza que la mecánica, los layouts de canvas y la física de su juego se rendericen con precisión bajo todas las condiciones.
Casos de uso de Desarrollar Web Game
- Prototipar rápidamente juegos HTML y JavaScript canvas construyendo funciones en pequeños incrementos probables.
- Automatizar entradas de usuario como movimiento, salto e interacciones de menú para evitar la fatiga de la verificación manual.
- Validar transiciones de estado de juego, lógica de renderizado y layouts de UI visual usando análisis automatizado de capturas de pantalla.
- Habilitar el traspaso continuo entre múltiples instancias de agentes de IA utilizando registros de estado de progreso estructurados.
Cómo funciona Desarrollar Web Game
- Definir Metas: Identifique una sola función o mecánica para implementar.
- Integrar Hooks: Exponga window.render_game_to_text y window.advanceTime dentro del bucle de juego para asegurar el acceso al estado determinista y el avance del tiempo.
- Seguimiento de Progreso: Mantenga un archivo de registro progress.md persistente para capturar el prompt original del usuario y las tareas pendientes.
- Ejecutar Playwright Client: Use el script de cliente automatizado junto con acciones de referencia para simular el juego.
- Inspeccionar Visuales: Abra e inspeccione visualmente las capturas de pantalla generadas de las funciones recién añadidas para verificar la corrección.
- Verificar Interacciones: Pruebe cadenas completas de interacción de varios pasos (como disparar a un enemigo para reducir la salud y actualizar la puntuación).
- Resolución de Errores: Verifique los logs de la consola del navegador y resuelva cualquier excepción de runtime en un bucle de retroalimentación iterativo.
Configuración de Desarrollar Web Game
Configure las variables de entorno necesarias para inicializar las rutas para esta habilidad:
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"
Asegúrese de que Playwright esté instalado globalmente o como una dependencia del proyecto:
# Verifique la disponibilidad de npx, de lo contrario instale globalmente
command -v npx >/dev/null 2>&1 || npm install -g @playwright/mcp@latest
Ejecute el cliente de prueba con un archivo de payload de acciones 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 datos y taxonomía de Desarrollar Web Game
Salida de Estado de Texto
Su juego debe exponer un hook de renderizado global que devuelva una cadena JSON sucinta que represente el estado activo:
{
"mode": "playing",
"player": { "x": 100, "y": 150, "r": 15 },
"entities": [
{ "x": 200, "y": 220, "r": 10 }
],
"score": 500
}
Payloads de Acción
Simule interacciones de varios pasos definiendo estructuras de pasos 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 }
]
}
Archivos y Logs Principales
| Nombre del Archivo | Descripción |
|---|---|
| progress.md | Rastrea prompts originales, listas TODO, regresiones activas y sugerencias para agentes sucesores. |
| $WEB_GAME_CLIENT | Script Node que realiza la integración con Playwright, el avance de tiempo virtual y las exportaciones de capturas de pantalla. |
| $WEB_GAME_ACTIONS | Archivo JSON de referencia que contiene payloads de esquema de movimiento de teclado y ratón. |
Funciones avanzadas de Desarrollar Web Game
- Virtual Time Stepping: Implementa bucles deterministas personalizados utilizando window.advanceTime para desacoplar la velocidad del juego de la capacidad del procesador anfitrión durante las pruebas.
- Captura Visual de Pantalla: Autogenera capturas dentro del juego para activos visuales, permitiendo aserciones visuales directas y comprobación de regresión visual.
- Redireccionamiento de Log de Consola: Captura y analiza mensajes de la consola del navegador directamente dentro de ejecuciones de terminal para resaltar fallos rápidamente.
- Registro de Progreso Multi-Agente: Se integra con archivos progress.md para preservar el contexto y los prompts del usuario a través de ciclos de desarrollo de agentes secuenciales.
SKILL.md
Cargando
Habilidades relacionadas de Openclaw
Cloudflare Deploy
Una skill de automatización de despliegue integrada que permite a los agentes de IA configurar, probar y desplegar aplicaciones en todo el ecosistema de Cloudflare.
Sentiment Analyzer Pro
Un framework de habilidades impulsado por una metodología avanzada que estructura los eventos de opinión pública en el ciclo de vida de cinco etapas de Duncan para generar informes estandarizados de relaciones públicas y análisis de crisis.
GitHub PR Comment Handler
Una AI agent skill diseñada para obtener, organizar y resolver automáticamente los comentarios de revisión de GitHub Pull Request abiertos utilizando la GitHub CLI.
Figma Implement Design
Convierte automáticamente nodos y componentes de Figma en código de producción preciso píxel a píxel, alineado directamente con tus reglas de estilo locales.
CarryFeed Twitter Tools
Un contenedor de línea de comandos amigable con la AI para resolver perfiles, publicaciones y activos multimedia públicos de X/Twitter sin flujos de inicio de sesión ni raspado de sesiones.
Peking University Alumni Association Information Query Tool
Una herramienta de asistente de AI diseñada para consultar y recuperar información sobre la Peking University Alumni Association, incluyendo capítulos, actividades, servicios y opciones de donación.
Flujo de Trabajo de Mesh y Textura para VFX de Juegos
Un marco estructurado para construir VFX de juegos estilizados y de alto rendimiento en Godot usando meshes simples, texturas de scroll, materiales de Shader y tweens de motor.
Presentado*
