开源等距城市建造模拟器（IsoCity） · TypeScript 开源游戏

国内开发环境适配

Windows

AI 推断/待核验

Linux

AI 推断/待核验

macOS

AI 推断/待核验

引擎 / 框架：自研引擎暂无中文教程标记未标记站长实测

需 Node.js 18+ 与 npm；国内安装 Next.js 相关依赖建议配置 npmmirror 等镜像源；如页面引用外部字体或 CDN 资源可能加载受限，具体待核验。

中文项目介绍

IsoCity 是一个以等距（isometric）视角呈现的开源城市建造项目，仓库同时包含两个可独立访问的作品：面向城市建设的 IsoCity 和面向主题公园经营的 IsoCoaster。README 用两张截图对照展示二者：前者主打火车、飞机、汽车与行人构成的城市交通图景，后者则围绕过山车、游乐设施与游客展开。两个站点分别指向 iso-city.com 与 iso-coaster.com，说明该项目并非只停留在代码仓库层面的原型，而是配套了公开的在线入口。

从定位上看，它更接近「用现代 Web 技术重做经典等距模拟经营游戏」的实验性工程：没有引入 Unity、Godot 等现成游戏引擎，而是直接以 HTML5 Canvas 作为绘制底座，在浏览器里实现地块放置、图层管理、深度排序与动态模拟。README 还特别注明项目使用 Cursor 辅助开发，这对关注 AI 辅助编程实践的读者也有一定参考价值。

核心功能

等距渲染引擎

核心是名为 `CanvasIsometricGrid` 的渲染实现，基于 HTML5 Canvas，负责复杂的深度排序（depth sorting）、图层管理，并同时支持图片精灵与 Canvas 绘制的精灵。

动态交通模拟

城市中会出现汽车、火车、飞机、公交车、水上飞机等自主行驶的载具；README 进一步提到火车、桥梁、公交、驳船等元素，载具会在城市中移动并遵守交通信号灯。

行人系统

为城市居民提供寻路与人群模拟，使街道不只有车辆。

经济与资源

包含资源管理、住宅/商业/工业三类分区（zoning）以及城市成长逻辑。

交互式网格

以地块（tile）为单位的放置系统，可铺设建筑、道路、铁轨、公园与公共设施等。

状态管理

支持多座城市的保存与读取。

响应式界面

面向移动端优化，提供触摸友好的操作方式，以及抽屉式面板与工具栏。

技术架构分析

构建与运行

README 给出了标准的本地启动流程，前置条件是 Node.js（v18 或更高）与 npm：

git clone https://github.com/amilich/isometric-city.git
cd isometric-city
npm install
npm run dev

启动后访问 http://localhost:3000 进入 IsoCity，访问 http://localhost:3000/coaster 进入 IsoCoaster。也就是说，两个作品共用同一个 Next.js 应用，通过不同路由区分。

由于项目使用 Next.js 16，首次安装依赖与构建时可能涉及较新的工具链版本，建议在干净的 Node 环境中操作；若依赖下载缓慢，可考虑配置 npm 镜像源。这部分属于常规工程经验，README 本身并未给出针对特定网络环境的说明，国内环境下的实际体验仍待核验。

补充说明

技术栈与实现要点

技术选型非常克制，README 的 Tech Stack 列出四项：

框架：Next.js 16
语言：TypeScript
图形：HTML5 Canvas，明确说明不依赖外部游戏引擎库，为纯原生实现
图标：Lucide React

由此可以看出一条清晰的取舍：渲染层自研，业务层交给 React/Next.js 生态，类型安全由 TypeScript 保障。等距渲染的难点通常集中在绘制顺序与遮挡关系上——同一屏幕位置上，不同高度的建筑、载具与地面装饰需要按正确的前后关系叠加，这正是 README 强调 depth sorting 与图层管理的原因。把渲染循环放在 Canvas 而非 DOM 中，也有助于承载大量地块与移动实体。

学习建议

这个仓库比较适合以下方向的读者：想了解如何在浏览器里手写等距渲染与深度排序的前端开发者；想研究城市模拟中交通、行人寻路与分区逻辑如何组织的游戏编程爱好者；以及希望参考 TypeScript + Canvas 组合做交互式网格编辑器的工程师。建议按「先跑起来观察现象，再定位渲染入口 CanvasIsometricGrid，最后追踪模拟与存档逻辑」的顺序阅读代码，避免一上来就陷入大量绘制细节。