我把 AI 编程 Agent 变成了宝可梦,让它们在像素风办公室里跑来跑去

多 Agent 协作编程已经是很多开发者的日常了。但当你同时跑着 3、4 个 Agent,它们分别在写代码、跑测试、查文件......你怎么知道谁在干什么?切 Tab?看日志?盯终端?

我之前看到一个很酷的项目 Pixel Agents------它把 Claude Code 的 Agent 变成像素小人,在虚拟办公室里走来走去。我当时就想:如果每个 Agent 是一只宝可梦呢?

于是我做了 Pokemon Claw Monitor ------一个面向 OpenClaw 的实时监控面板,每个 Agent 都是一只宝可梦,在像素风办公室里工作。这是对经典宝可梦游戏的一次致敬,也让多 Agent 监控变成了一件有趣的事。

它是怎么工作的?

核心逻辑很简单:

  1. Agent → 宝可梦映射:在配置里给每个 Agent 分配一个图鉴编号(1--151),支持初代全部 151 只宝可梦
  2. Agent 开始工作 → 精灵球打开 → 宝可梦走到工位坐下,播放工作动画
  3. Agent 完成任务 → 宝可梦站起来,走回精灵球,精灵球关闭
  4. 你自己 → 用 WASD 操控一个玩家角色,在办公室里自由走动

后端每 3 秒轮询 Agent 的会话文件,通过 lock 文件和 transcript 的 mtime 判断 Agent 是否在工作,然后通过 SSE 推送给前端。前端是一个跑在 React 里的 Phaser 3 游戏------BFS 寻路、楼梯传送、Tween 动画,一套完整的 2D 游戏系统。

地图完全可自定义

整个办公室地图用一个 JSON 配置文件定义,包括碰撞检测、工位、精灵球位置、楼梯------全部用 ASCII 字符表示:

shell 复制代码
####################################
#..................................#
#..++++...........*...*...*...*...#
#..++++...........................#
#.................$$..............#
####################################
符号 含义
# 墙壁(不可通过)
. 可行走地板
+ 工位(Agent 工作时坐这里)
* 精灵球槽位
$ / % 楼梯(上下楼传送)

换掉 assets/ 里的地图图片,改一下 JSON 配置,就能拥有自己的像素风办公室。

技术栈

模块 技术
游戏引擎 Phaser 3(Canvas 渲染、Tween 动画、精灵系统)
前端框架 React 19 + Vite 6
后端服务 原生 Node.js HTTP(无 Express),SSE 推送
寻路算法 BFS + 楼梯传送
Agent 监控 基于文件系统(session JSON、lock 文件、mtime 检测)

有意思的技术细节

BFS 寻路中的楼梯传送

地图中的 $% 是成对的传送点。BFS 在探索到楼梯格子时,会以零代价跳转到配对的楼梯格子。这意味着宝可梦能无缝穿越多层办公室------走到 2F 的楼梯口,下一步就出现在 1F 对应位置。

typescript 复制代码
// BFS 中的楼梯传送逻辑
if (stairMap.has(key)) {
  const dest = stairMap.get(key)!;
  // 跳转到配对楼梯,代价为 0
  queue.push({ col: dest.col, row: dest.row });
}

工位朝向自动检测

宝可梦坐在工位上时,会自动面朝最近的墙壁(# 格子)。不管你怎么设计工位布局,宝可梦都能面朝正确的方向------用的是一个简单的四方向最近墙壁探测。

纯文件系统的状态监控

不需要数据库,不需要修改 Agent------监控完全基于文件系统:

  • 读取 sessions.json 获取会话元数据
  • 检测 .jsonl.lock 文件判断进程是否存活(process.kill(pid, 0)
  • 通过 transcript 文件的 mtime 判断 Agent 是否在 30 秒内有活动

零侵入,即插即用。

路线图 & 欢迎贡献

这个项目是 MIT 开源的,非常欢迎大家提 PR:

  • 更多宝可梦:目前支持初代 151 只,精灵系统可扩展,欢迎补充更多世代
  • 自定义地图:设计你自己的像素风办公室,分享给社区
  • Agent 团队可视化:展示多 Agent 协作和通信关系

如果你和我一样,小时候玩着宝可梦长大,现在每天和 AI Agent 打交道------希望这个项目能让你会心一笑。

链接


本项目受 Pixel Agents 启发,向经典宝可梦游戏致敬。如果你觉得有趣,欢迎 Star 和 PR!

相关推荐
孟健2 小时前
AI编程效率翻10倍:一个IDE同时跑10+个Claude Code
claude
重庆穿山甲2 小时前
Java开发者的大模型入门:Spring AI组件全攻略(二)
前端·后端
重庆穿山甲2 小时前
Java开发者的大模型入门:Spring AI组件全攻略(一)
前端·后端
布列瑟农的星空2 小时前
前端都能看懂的rust入门教程(二)——函数和闭包
前端·后端·rust
晨米酱3 小时前
四、Prettier 编辑器集成指南
前端·代码规范
文心快码BaiduComate3 小时前
Comate 4.0新年全面焕新!底层重构、七大升级、复杂任务驾驭力跃升
前端·程序员·架构
怪可爱的地球人3 小时前
uni-app:5 步接入 vite-plugin-uni-pages,用 <route> 自动生成 pages.json
前端
前端Hardy3 小时前
告别 !important:现代 CSS 层叠控制指南,90% 的样式冲突其实不用它也能解
前端·vue.js·面试
前端Hardy3 小时前
Vue 3 性能优化的 5 个隐藏技巧,第 4 个连老手都未必知道
前端·vue.js·面试