游戏

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%

问题排查手册

错误现象可能原因诊断步骤解决方案
游戏无法启动运行环境不满足要求检查依赖环境,确保满足要求安装缺失依赖或调整环境配置
游戏运行卡顿渲染技术栈不匹配检查渲染技术栈配置选择合适的渲染技术栈或优化代码
游戏逻辑错误游戏逻辑设计错误检查游戏逻辑代码修复游戏逻辑错误
游戏音效问题音效文件损坏或配置错误检查音效文件和配置替换音效文件或调整配置
游戏素材问题素材文件损坏或配置错误检查素材文件和配置替换素材文件或调整配置

安全规范

  1. 确保游戏内容符合相关法律法规,避免涉及违规内容。
  2. 保护用户隐私,不收集用户敏感信息。
  3. 防止游戏被恶意攻击,如DDoS攻击、病毒传播等。
  4. 优化游戏性能,避免因性能问题导致用户体验下降。
  5. 定期更新游戏,修复已知漏洞,提高游戏安全性。

Game

安全风险防范

风险项等级防护措施验证方法
命令执行风险仅执行白名单命令,避免拼接用户输入使用沙箱环境测试
网络通信安全使用HTTPS协议,验证SSL证书定期检查证书有效期
敏感数据暴露输出结果中不包含密钥、令牌等敏感信息日志脱敏审查
未授权访问限制访问权限,实施认证机制定期审计访问日志

专业版专属特性

能力免费版付费版
基础功能支持支持
高清分辨率与无损输出不支持支持
批量生成与风格预设不支持支持
自定义模型微调不支持支持
商用版权授权不支持支持
多版本对比与A/B优选不支持支持

能力清单

  • 一句话概念即得可玩游戏:输入游戏概念描述,输出完整可运行的游戏代码
  • 支持 2D/3D 游戏类型:平台跳跃、射击、解谜、竞速、塔防、Roguelike、卡牌
  • 游戏系统自动生成:物理引擎、碰撞检测、得分系统、关卡设计、敌人 AI
  • 多种渲染技术栈:HTML5 Canvas、Phaser.js、Three.js、p5.js、纯 CSS/DOM
  • 游戏循环架构:状态管理(菜单/游戏中/暂停/结束)、帧率控制、资源加载
  • 音效与视觉效果:粒子系统、屏幕震动、缓动动画、程序化音效
  • 触屏与键盘双输入支持,响应式适配桌面和移动设备

快速入门指引

  1. 确认运行环境满足依赖说明中的要求
  2. 在AI Agent对话中调用本技能,提供必要的输入参数
  3. 检查输出结果,根据需要进行后续处理

详细的输入输出格式请参考下方章节说明。

典型场景

场景输入输出
快速原型一句话游戏概念可运行的游戏 HTML 文件
玩法验证游戏机制描述包含核心循环的原型代码
游戏开发详细设计文档完整游戏项目代码
游戏素材主题与风格程序化生成的精灵图与音效
关卡设计游戏类型与难度自动生成的关卡数据
不适用于:需要人工判断的复杂决策场景

操作步骤

  1. 确认运行环境满足依赖说明中的要求
  2. 根据适用场景选择合适的使用方式
  3. 执行操作并检查输出结果
  4. 如遇错误,参考错误处理章节

流程详解:从概念到可玩游戏

步骤 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预渲染静态背景减少每帧绘制量
帧率控制固定时间步长更新物理稳定性
资源懒加载按关卡加载资源减少初始加载时间

游戏设计原则

  1. 核心循环清晰:玩家在 5 秒内理解"做什么 -> 得到什么反馈"
  2. 难度曲线:从简单开始,逐步引入新机制,保持心流状态
  3. 即时反馈:每个操作都有视觉/音效反馈(粒子、震动、音效)
  4. 失败友好:快速重生、进度保存、明确的失败原因
  5. 元游戏层:积分榜、成就、解锁系统增加重玩动力

输入规范

参数名类型必填说明
conceptstring游戏概念描述,一句话或详细设计文档
game_typestring游戏类型: platformer/shooter/puzzle/racing/tower-defense
tech_stackstring技术栈: canvas/phaser/three/p5,默认 canvas
contentstringgame处理的内容输入,可选值: json/text/markdown
stylestring输出风格, 参考 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.js3D渲染库通过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解析失败或防火墙拦截检查网络配置,确认代理设置

游戏通用排查步骤

  1. 检查输入参数: 确认所有必填参数已提供且格式正确
  2. 查看日志输出: 定位具体错误行和异常类型
  3. 验证环境配置: 确认依赖库版本和运行环境满足要求
  4. 逐步调试: 缩小问题范围,隔离故障模块

Top skills in this category