我把 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!

相关推荐
CarIise9 分钟前
下拉菜单HTML/CSS/JS实现
前端·css
2601_9620715718 分钟前
Java进阶(vue基础)
前端·javascript·vue.js
研☆香19 分钟前
数组方法 splice讲解 拓展
开发语言·前端·javascript
码视野20 分钟前
基于 Spring Boot + Vue3 的【城市地下燃气管网微泄漏感知与相邻地下空间燃爆预警中台】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端
淡海水22 分钟前
05-03-栈队列-PriorityQueue-TElement-TPriority-NET6优先队列语义与四叉堆实现
服务器·前端·c#·priorityqueue·clr·telement
ITresearchGuest1 小时前
LangChain JS 入门:快速搭建前端 AI 开发环境
前端·javascript·langchain
YHHLAI1 小时前
React + TypeScript 实战:从零构建颜色选择器应用
前端·react.js·typescript
Profile排查笔记1 小时前
指纹浏览器手机版怎么选?从本地 App 到云端 Android 的实现方式解析
前端·人工智能·后端·自动化
浪兎兎2 小时前
Vue CLI笔记
前端·vue.js·笔记
Csvn2 小时前
Proxy / Reflect 与响应式原理:完整手写一个 mini Vue3 响应式系统
前端