← 返回

在浏览器里养出一个小世界

2026-03

最近在做 sandbox-simulationWorld ——一个跑在浏览器里的极简生态模拟沙盒。目标很简单:让地形、食物、基因和捕食关系在一页网页里自己转起来,而不是靠手写剧情推着走。

想模拟什么

世界由柏林噪声生成海拔与湿度,再划分出河流、平原、森林、沙漠等九种地貌。土地带有能量:植物和小动物从地里长出来,生物死亡后又把能量还回去。人、狼、兔、野猪各自有代谢、视野和欲望,行为靠效用 AI 打分,而不是死板的状态机。

后来又往「部落」方向走了一步:篝火营地、公粮仓、猎人 / 农夫 / 卫兵的职业分化,以及资源枯竭时的掠夺与灭国。生态不再只是个人求生,也会出现群体层面的兴衰。

怎么做才不卡

技术栈是 Vue 3 + Canvas 2D + Web Worker。渲染留在主线程,碰撞、寻路和基因演算丢进 Worker,时钟大约 10Hz。地图大了以后加了 LOD:近看画细节,远看只剩色点,再配合视野剔除,几百个单位时页面还能保持顺畅。

主线程:镜头、插值动画、Canvas 绘制
Worker :地形、效用 AI、遗传与历史档案

顺手留下的坑与收获

早期版本里,繁衍和食腐一度破坏能量守恒,像永动机一样爆兵。后来把繁殖成本、代谢损耗和食腐惩罚写死,世界才重新「饿得起来」。双种子(地图种子 / 行为种子)也很好玩:同一组参数可以完整重演一整纪元,方便对照实验。

项目还在改。仓库在 Gitee ,本地跑起来就是一句 npm run dev