游戏
AI驱动的一句概念生成可玩HTML游戏,支持2D/3D、自动游戏系统设计、关卡和素材制作,适合快速原型开发和玩法验证。
天轰穿
@thcjp
Install
$ openclaw skills install @thcjp/game-toolkit疑问汇总
Q1: 如何开始使用Game?
A: 用一句话描述你想要的游戏即可。例如"做一个太空射击游戏,玩家控制飞船消灭陨石,有计分和生命值"。系统会生成一个完整的、可直接在浏览器中运行的单文件 HTML 游戏。你也可以提供更详细的需求(如视觉风格、操作方式、游戏规则),生成的游戏会更加精确。
Q2: 生成的游戏可以直接运行吗?
A: 是的。生成的游戏是一个自包含的 HTML 文件,包含所有 JavaScript、CSS 和游戏逻辑代码,无需安装任何依赖,直接在浏览器中打开即可运行。游戏支持键盘和触屏操作,自适应桌面和移动设备屏幕。
差异化分析
效率提升量化分析
| 操作步骤 | 手动耗时 | 自动化耗时 | 时间节约 | 准确率提升 |
|---|---|---|---|---|
| 游戏概念描述 | 2小时 | 10分钟 | 1小时50分钟 | 95% |
| 游戏原型开发 | 1周 | 1天 | 6天 | 90% |
| 游戏系统设计 | 1周 | 1天 | 6天 | 85% |
| 游戏关卡设计 | 1周 | 1天 | 6天 | 80% |
| 游戏素材制作 | 1周 | 1天 | 6天 | 75% |
差异化对比
| 对比维度 | 本技能 | 手动操作 | Python脚本 | 专业软件 |
|---|---|---|---|---|
| 设计效率 | 高效 | 低效 | 中等 | 高效 |
| 学习成本 | 低 | 中等 | 中等 | 高 |
| 功能丰富度 | 高 | 低 | 中等 | 高 |
| 适应范围 | 广泛 | 有限 | 有限 | 有限 |
| 成本 | 低 | 高 | 中等 | 高 |
核心痛点解决
| 痛点 | 描述 | 影响范围 | 解决方案 | 量化效果 |
|---|---|---|---|---|
| 游戏开发周期长 | 游戏开发周期长,影响市场反应速度 | 整个游戏行业 | 提供自动化游戏设计工具,缩短开发周期 | 平均缩短50% |
| 游戏原型迭代慢 | 游戏原型迭代慢,影响开发效率 | 游戏开发团队 | 提供快速原型生成功能,加快迭代速度 | 平均加快70% |
| 游戏开发成本高 | 游戏开发成本高,影响盈利能力 | 游戏公司 | 降低游戏开发成本,提高盈利能力 | 平均降低30% |
问题排查手册
| 错误现象 | 可能原因 | 诊断步骤 | 解决方案 |
|---|---|---|---|
| 游戏无法启动 | 运行环境不满足要求 | 检查依赖环境,确保满足要求 | 安装缺失依赖或调整环境配置 |
| 游戏运行卡顿 | 渲染技术栈不匹配 | 检查渲染技术栈配置 | 选择合适的渲染技术栈或优化代码 |
| 游戏逻辑错误 | 游戏逻辑设计错误 | 检查游戏逻辑代码 | 修复游戏逻辑错误 |
| 游戏音效问题 | 音效文件损坏或配置错误 | 检查音效文件和配置 | 替换音效文件或调整配置 |
| 游戏素材问题 | 素材文件损坏或配置错误 | 检查素材文件和配置 | 替换素材文件或调整配置 |
安全规范
- 确保游戏内容符合相关法律法规,避免涉及违规内容。
- 保护用户隐私,不收集用户敏感信息。
- 防止游戏被恶意攻击,如DDoS攻击、病毒传播等。
- 优化游戏性能,避免因性能问题导致用户体验下降。
- 定期更新游戏,修复已知漏洞,提高游戏安全性。
Game
安全风险防范
| 风险项 | 等级 | 防护措施 | 验证方法 |
|---|---|---|---|
| 命令执行风险 | 高 | 仅执行白名单命令,避免拼接用户输入 | 使用沙箱环境测试 |
| 网络通信安全 | 中 | 使用HTTPS协议,验证SSL证书 | 定期检查证书有效期 |
| 敏感数据暴露 | 高 | 输出结果中不包含密钥、令牌等敏感信息 | 日志脱敏审查 |
| 未授权访问 | 中 | 限制访问权限,实施认证机制 | 定期审计访问日志 |
专业版专属特性
| 能力 | 免费版 | 付费版 |
|---|---|---|
| 基础功能 | 支持 | 支持 |
| 高清分辨率与无损输出 | 不支持 | 支持 |
| 批量生成与风格预设 | 不支持 | 支持 |
| 自定义模型微调 | 不支持 | 支持 |
| 商用版权授权 | 不支持 | 支持 |
| 多版本对比与A/B优选 | 不支持 | 支持 |
能力清单
- 一句话概念即得可玩游戏:输入游戏概念描述,输出完整可运行的游戏代码
- 支持 2D/3D 游戏类型:平台跳跃、射击、解谜、竞速、塔防、Roguelike、卡牌
- 游戏系统自动生成:物理引擎、碰撞检测、得分系统、关卡设计、敌人 AI
- 多种渲染技术栈:HTML5 Canvas、Phaser.js、Three.js、p5.js、纯 CSS/DOM
- 游戏循环架构:状态管理(菜单/游戏中/暂停/结束)、帧率控制、资源加载
- 音效与视觉效果:粒子系统、屏幕震动、缓动动画、程序化音效
- 触屏与键盘双输入支持,响应式适配桌面和移动设备
快速入门指引
- 确认运行环境满足依赖说明中的要求
- 在AI Agent对话中调用本技能,提供必要的输入参数
- 检查输出结果,根据需要进行后续处理
详细的输入输出格式请参考下方章节说明。
典型场景
| 场景 | 输入 | 输出 |
|---|---|---|
| 快速原型 | 一句话游戏概念 | 可运行的游戏 HTML 文件 |
| 玩法验证 | 游戏机制描述 | 包含核心循环的原型代码 |
| 游戏开发 | 详细设计文档 | 完整游戏项目代码 |
| 游戏素材 | 主题与风格 | 程序化生成的精灵图与音效 |
| 关卡设计 | 游戏类型与难度 | 自动生成的关卡数据 |
| 不适用于:需要人工判断的复杂决策场景 |
操作步骤
- 确认运行环境满足依赖说明中的要求
- 根据适用场景选择合适的使用方式
- 执行操作并检查输出结果
- 如遇错误,参考错误处理章节
流程详解:从概念到可玩游戏
步骤 1:描述游戏概念 一句话描述需要包含以下要素:
| 要素 | 示例 | 作用 |
|---|---|---|
| 核心玩法 | "平台跳跃收集金币" | 决定游戏类型和机制 |
| 视觉风格 | "像素风" / "霓虹科技" | 决定美术风格 |
| 操作方式 | "方向键移动+空格跳跃" | 决定输入控制 |
| 目标规则 | "60秒内收集尽量多金币" | 决定胜负条件 |
| 完整示例: |
"做一个像素风格的平台跳跃游戏,玩家用方向键移动、空格跳跃,需要在60秒内收集尽可能多的金币,同时躲避移动的敌人,有3条命" 步骤 2:选择技术栈 | 技术栈 | 适用类型 | 优点 | 缺点 | |:-------|:---------|:-----|:-----| | HTML5 Canvas | 2D 游戏 | 轻量、兼容性好、无依赖 | 需手写渲染逻辑 | | Phaser.js | 2D 游戏 | 功能完整、物理引擎、场景管理 | 需加载库文件 | | Three.js | 3D 游戏 | WebGL 3D 渲染、光照 | 学习成本高 | | p5.js | 创意编程 | 简洁 API、艺术风格 | 性能有限 | | 纯 CSS/DOM | 简单游戏 | 无依赖、易理解 | 性能差、不适合复杂场景 | 步骤 3:游戏架构设计
游戏架构模式
游戏循环(Game Loop)
所有游戏的核心都是游戏循环,负责更新状态和渲染画面:
class Game {
constructor(canvas) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.state = 'menu'; // menu / playing / paused / gameover
this.lastTime = 0;
this.entities = [];
this.score = 0;
this.lives = 3;
}
start() {
requestAnimationFrame((time) => this.loop(time));
}
loop(currentTime) {
const deltaTime = (currentTime - this.lastTime) / 1000;
this.lastTime = currentTime;
if (this.state === 'playing') {
this.update(deltaTime); // 更新游戏逻辑
}
this.render(); // 渲染画面
}
update(dt) {
// 更新所有实体
this.entities.forEach(e => e.update(dt));
// 碰撞检测
this.checkCollisions();
// 检查游戏状态
this.checkGameState();
}
render() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.entities.forEach(e => e.render(this.ctx));
this.renderUI();
}
}
状态管理
const GAME_STATES = {
MENU: 'menu',
PLAYING: 'playing',
PAUSED: 'paused',
GAME_OVER: 'gameover',
LEVEL_COMPLETE: 'level_complete'
};
function handleStateTransition(newState) {
switch(newState) {
case GAME_STATES.PLAYING:
gameLoop.start();
break;
gameLoop.stop();
break;
showGameOverScreen();
break;
}
}
游戏类型与核心机制
平台跳跃游戏
核心机制实现要点:
// 玩家物理
class Player {
constructor(x, y) {
this.x = x;
this.y = y;
this.vx = 0;
this.vy = 0;
this.width = 32;
this.height = 32;
this.onGround = false;
this.jumpPower = -450; // 跳跃力度
this.moveSpeed = 200; // 移动速度
this.gravity = 1200; // 重力
}
update(dt) {
// 应用重力
this.vy += this.gravity * dt;
// 水平移动
if (input.left) this.vx = -this.moveSpeed;
else if (input.right) this.vx = this.moveSpeed;
else this.vx *= 0.8; // 摩擦减速
// 跳跃
if (input.jump && this.onGround) {
this.vy = this.jumpPower;
this.onGround = false;
}
// 更新位置
this.x += this.vx * dt;
this.y += this.vy * dt;
// 平台碰撞(AABB)
this.onGround = false;
platforms.forEach(p => {
if (this.aabb(p)) {
if (this.vy > 0 && this.y < p.y) {
this.y = p.y - this.height;
this.vy = 0;
this.onGround = true;
}
}
});
}
}
射击游戏
| 机制 | 实现方式 |
|---|---|
| 子弹管理 | 对象池模式,复用子弹对象避免 GC |
| 敌人生成 | 定时器 + 难度曲线,随时间增加生成频率 |
| 碰撞检测 | 圆形碰撞(距离比较)或 AABB(矩形相交) |
| 射击模式 | 散弹、追踪弹、激光、范围攻击 |
解谜游戏
| 类型 | 核心逻辑 |
|---|---|
| 推箱子 | 网格状态 + 可逆移动 + 死锁检测 |
| 连连看 | 图案匹配 + 路径连通算法 |
| 消除类 | 网格匹配 + 下落填充 + 连锁反应 |
| 数字华容道 | 状态空间搜索 + 可解性判断 |
视觉效果系统
粒子系统
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.vx = (Math.random() - 0.5) * 300;
this.vy = (Math.random() - 0.5) * 300 - 100;
this.life = 1.0;
this.color = color;
this.size = Math.random() * 4 + 2;
}
update(dt) {
this.x += this.vx * dt;
this.y += this.vy * dt;
this.vy += 400 * dt; // 粒子重力
this.life -= dt * 2; // 生命衰减
}
render(ctx) {
ctx.globalAlpha = Math.max(0, this.life);
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.size, this.size);
ctx.globalAlpha = 1;
}
}
// 触发爆炸效果
function createExplosion(x, y, count = 20) {
for (let i = 0; i < count; i++) {
particles.push(new Particle(x, y, '#ff6b6b'));
}
}
屏幕震动
let shakeIntensity = 0;
let shakeDuration = 0;
function triggerShake(intensity, duration) {
shakeIntensity = intensity;
shakeDuration = duration;
}
// 在渲染前应用偏移
function applyShake() {
if (shakeDuration > 0) {
const offsetX = (Math.random() - 0.5) * shakeIntensity;
const offsetY = (Math.random() - 0.5) * shakeIntensity;
ctx.save();
ctx.translate(offsetX, offsetY);
shakeDuration -= dt;
shakeIntensity *= 0.9; // 衰减
}
}
输入控制
键盘输入
const input = { left: false, right: false, jump: false };
document.addEventListener('keydown', (e) => {
switch(e.code) {
case 'ArrowLeft': case 'KeyA': input.left = true; break;
case 'ArrowRight': case 'KeyD': input.right = true; break;
case 'Space': case 'ArrowUp': case 'KeyW':
input.jump = true;
e.preventDefault(); // 阻止页面滚动
break;
}
});
document.addEventListener('keyup', (e) => {
switch(e.code) {
left = false; break;
right = false; break;
case 'Space': case 'ArrowUp': case 'KeyW': input.jump = false; break;
}
});
触屏输入
canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
const touch = e.touches[0];
const rect = canvas.getBoundingClientRect();
const x = touch.clientX - rect.left;
// 左半屏移动,右半屏跳跃
if (x < canvas.width / 2) {
if (x < canvas.width / 4) input.left = true;
else input.right = true;
} else {
input.jump = true;
}
});
优选实践
性能优化
| 优化项 | 方法 | 效果 |
|---|---|---|
| 对象池 | 复用子弹/粒子对象 | 减少 GC 停顿 |
| 空间分区 | 网格/四叉树管理碰撞 | 减少碰撞检测次数 |
| 离屏 Canvas | 预渲染静态背景 | 减少每帧绘制量 |
| 帧率控制 | 固定时间步长更新 | 物理稳定性 |
| 资源懒加载 | 按关卡加载资源 | 减少初始加载时间 |
游戏设计原则
- 核心循环清晰:玩家在 5 秒内理解"做什么 -> 得到什么反馈"
- 难度曲线:从简单开始,逐步引入新机制,保持心流状态
- 即时反馈:每个操作都有视觉/音效反馈(粒子、震动、音效)
- 失败友好:快速重生、进度保存、明确的失败原因
- 元游戏层:积分榜、成就、解锁系统增加重玩动力
输入规范
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| concept | string | 是 | 游戏概念描述,一句话或详细设计文档 |
| game_type | string | 否 | 游戏类型: platformer/shooter/puzzle/racing/tower-defense |
| tech_stack | string | 否 | 技术栈: canvas/phaser/three/p5,默认 canvas |
| content | string | 否 | game处理的内容输入,可选值: json/text/markdown |
| style | string | 否 | 输出风格, 参考 references/style.md |
返回格式
{
"success": true,
"data": {
"game_type": "platformer",
"tech_stack": "canvas",
"title": "金币冒险",
"description": "像素风平台跳跃游戏,收集金币躲避敌人",
"code": "<!-- 完整可运行的 HTML 游戏代码 -->",
"features": ["物理跳跃", "碰撞检测", "敌人AI", "计分系统", "3条命", "60秒计时"],
"controls": {"move": "方向键/WASD", "jump": "空格/上键"},
"metadata": {
"template_used": "game-engine",
"word_count": 0,
"style": "专业"
}
},
"error": null
}
输出模板参考: assets/output.json
异常处置
| 错误场景 | 原因 | 处理方式 |
|---|---|---|
| 配置错误 | 参数缺失或格式错误 | 检查依赖说明中的配置要求 |
常见问题FAQ
Q1: Game支持哪些类型的游戏?
A: Game支持多种类型的游戏,包括平台跳跃、射击、解谜、竞速、塔防、Roguelike和卡牌游戏等,几乎可以满足不同游戏概念的需求。
Q2: 游戏生成的过程中,如何处理复杂的游戏逻辑?
A: 对于复杂的游戏逻辑,Game提供自定义模型微调功能,允许用户根据具体需求调整游戏行为,确保生成的游戏符合预期。
Q3: 游戏的音效和视觉效果如何实现?
A: Game内置多种渲染技术栈,支持粒子系统、屏幕震动、缓动动画和程序化音效,用户可以根据需要选择合适的视觉效果和音效。
Q4: 如何确保游戏的可玩性和趣味性?
A: Game通过即时反馈、难度曲线和元游戏层设计,确保游戏的可玩性和趣味性,帮助玩家保持兴趣并挑战自我。
Q5: 游戏生成的代码是否可以修改和扩展?
A: 是的,Game生成的代码是开源的,用户可以根据需要修改和扩展游戏功能,以满足更复杂的需求。
安装与配置
| 依赖项 | 类型 | 是否必需 | 获取方式 |
|---|---|---|---|
| Node.js | 运行环境 | 是 | 从Node.js官网下载安装 |
| npm | 包管理器 | 是 | 与Node.js一起安装,或通过npm官网安装 |
| Canvas | 渲染库 | 是 | 内置在HTML5中,无需额外安装 |
| Phaser.js | 游戏框架 | 否 | 通过npm安装 (npm install phaser) |
| Three.js | 3D渲染库 | 否 | 通过npm安装 (npm install three) |
| p5.js | 创意编程库 | 否 | 通过npm安装 (npm install p5) |
| Web Audio API | 音频处理 | 否 | 内置在HTML5中,无需额外安装 |
功能介绍
- 自动化执行: AI Agent即时游戏设计引擎,一句话概念即得可玩游戏。The instant game design engine
- 文件处理: 支持多种文件格式的读取、解析和写入操作
- API集成: 通过标准化接口调用外部服务并处理响应
- 命令执行: 在安全沙箱中执行系统命令并收集结果
- 信息检索: 快速搜索和过滤目标数据
错误恢复方案
针对游戏使用中可能遇到的常见问题,提供以下排查方案:
| 错误类型 | 原因分析 | 解决方案 |
|---|---|---|
| API认证失败(401) | API密钥错误或过期 | 检查密钥配置,重新生成token |
| 接口限流(429) | 请求频率超出限制 | 降低调用频率,启用重试退避策略 |
| 响应超时(504) | 网络延迟或服务端负载过高 | 增加超时阈值,检查网络连接 |
| 文件不存在 | 路径错误或文件未创建 | 检查路径拼写,确认文件已生成 |
| 文件格式不支持 | 扩展名不在支持列表中 | 转换为支持的格式后重试 |
| 权限不足 | 当前用户无读写权限 | 检查文件权限,以管理员身份运行 |
| 命令执行失败 | 参数错误或环境依赖缺失 | 检查命令语法,确认依赖已安装 |
| 进程超时 | 命令执行时间过长 | 增加超时设置,优化命令参数 |
| 网络连接失败 | DNS解析失败或防火墙拦截 | 检查网络配置,确认代理设置 |
游戏通用排查步骤
- 检查输入参数: 确认所有必填参数已提供且格式正确
- 查看日志输出: 定位具体错误行和异常类型
- 验证环境配置: 确认依赖库版本和运行环境满足要求
- 逐步调试: 缩小问题范围,隔离故障模块
Top skills in this category
Dashboard
@cellcogAI dashboard and web app generation powered by CellCog. Interactive dashboards, KPI trackers, data visualization, charts, analytics apps, data explorers, calculators, games. Responsive HTML apps with real-time filters.
Instagram Skill via cyberdrk/gram CLI
@areinInstagram CLI for viewing feeds, posts, profiles, and engagement via cookies.
Section 11: Endurance Training Coach (Intervals.icu)
@crankaddictEvidence-based endurance coaching protocol (v11.35). Use when analyzing training data, reviewing sessions, generating pre/post-workout reports, planning work...
Skill Vetter
@spclaudehomeSecurity-first skill vetting for AI agents. Use before installing any skill from ClawdHub, GitHub, or other sources. Checks for red flags, permission scope, and suspicious patterns.
Github
@steipeteInteract with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.