一款2D像素风格的农场模拟游戏，融合种植、建造、社交等元素。
玩家扮演拥有"万能农具"神器的异世界来客，在荒地上创造理想村庄。
使用 Emoji 作为游戏素材，鼠标优先 操作，一键 免费 部署你的农场世界。
分享项目
🌟 开创异世界农场新纪元。为休闲游戏爱好者打造的沉浸式田园体验。
游戏主界面 - 农场全景视图
📱 更多截图
核心玩法 - 种植系统（左）和建造系统（右）
社交系统 - NPC互动和随机事件
技术栈徽章：
Important
本项目展示了现代Web游戏开发实践。结合 Angular 20 与 Pixi.js 8 提供高性能2D渲染，部署在 Cloudflare Pages 全球 CDN 上。特色包括完整的农场模拟系统、鼠标优先控制、Emoji视觉素材、基于 Cloudflare KV 的实时存档系统。
我们致力于创造一个充满乐趣的异世界农场模拟游戏。通过现代Web技术和创新的游戏设计，为玩家提供轻松愉快的田园生活体验。
游戏采用 全Emoji视觉风格，无需任何外部素材资源。支持 鼠标优先操作，降低上手难度。包含完整的农场经营要素：种植、收获、建造、社交、探索。部署在 Cloudflare Pages 全球边缘网络，存档数据存储在 Cloudflare KV 分布式键值存储中。
Note
- Node.js >= 18.0 必需
- 支持现代浏览器（Chrome, Firefox, Safari, Edge）
- 推荐分辨率 1920x1080 或更高
- 游戏自动保存进度
 |
无需安装！访问在线版本立即体验游戏。 |
|---|
Tip
⭐ 给我们点个Star 支持项目发展，获取最新更新通知！
⭐ Star历史
体验从荒地到繁荣农场的完整过程。我们的农业系统提供了丰富的种植选择和季节变化，让每一次收获都充满成就感。
种植系统：
- 🌾 10种作物：萝卜、土豆、胡萝卜、小麦、番茄、玉米、南瓜、草莓、卷心菜、稻米
- 🌱 生长阶段：种子→发芽→成长→成熟，每种作物独特生长周期
- 💧 灌溉系统：需要定期浇水保持土壤湿润
- 🍂 季节系统：春夏秋冬四季，不同作物适应不同季节
工具系统：
- 🌾 锄头 - 耕地
- 💧 水壶 - 浇水
- 🪓 斧头 - 砍树
- ⛏️ 镐子 - 采矿
- 🔨 锤子 - 建造
- 🎣 鱼竿 - 钓鱼
从简陋小屋到繁华村庄，建造系统让你自由规划农场布局，打造独一无二的田园世界。
建筑类型：
- 🏠 小屋 - 基础居住建筑
- 🏚️ 谷仓 - 存储农作物
- ⛲ 水井 - 提供水源
- 🏪 商店 - 买卖物品
- 🛖 工坊 - 制作工具
资源系统：
- 🪵 木材 - 从树木获取
- 🪨 石材 - 从岩石开采
- 🌾 农产品 - 种植收获
- 💰 金币 - 交易货币
与5位性格各异的NPC建立友谊，体验10种随机事件带来的惊喜与挑战。
NPC系统：
- 👨🌾 农夫老王 - 传授种植技巧
- 👩🏫 老师小李 - 教授新知识
- 🧑🍳 厨师大张 - 收购食材
- 👨💼 商人老赵 - 买卖物品
- 👶 小孩小明 - 活泼可爱
随机事件：
- 🌧️ 雨天 - 自动浇水
- ☀️ 晴天 - 作物生长加快
- 🧙 商人来访 - 稀有种子
- 🎊 丰收节 - 价格上涨
- 🏜️ 干旱 - 需要更多水
- ⛈️ 暴风雨 - 作物受损
- 🧚 精灵祝福 - 成长加速
- 🧧 春节 - 获得红包
- ☄️ 流星雨 - 幸运加成
- 🏪 集市日 - 需求增加
Angular 20 |
TypeScript 5 |
Pixi.js 8 |
RxJS 7 |
Cloudflare Pages |
前端技术栈：
- 框架: Angular 20 (Standalone Components)
- 渲染引擎: Pixi.js 8 (WebGL 2D Graphics)
- 语言: TypeScript 5 严格模式
- 状态管理: RxJS + Services单例模式
- 样式: SCSS
- 构建工具: Angular CLI
后端技术栈：
- 平台: Cloudflare Pages Functions (边缘计算)
- 数据存储: Cloudflare KV (全球分布式键值存储)
- API: RESTful架构，同域部署无需CORS
部署架构：
graph LR
subgraph "用户浏览器"
A[Angular SPA]
end
subgraph "Cloudflare 全球边缘网络"
B[Pages CDN<br/>静态资源托管]
C[Pages Functions<br/>API 边缘计算]
D[KV Store<br/>游戏存档存储]
end
A -- "静态资源请求" --> B
A -- "/api/game/*" --> C
C -- "读写存档" --> D
游戏系统架构：
graph TB
subgraph "游戏前端 (Angular SPA)"
A[GameCanvasComponent<br/>Pixi.js 渲染] --> B[EmojiRendererService<br/>纹理缓存]
A --> C[游戏世界<br/>30x20 Tile Grid]
end
subgraph "状态管理 (RxJS BehaviorSubject)"
E[GameDataService] --> F[PlayerState]
E --> G[WorldData]
E --> H[TimeState]
E --> I[InventoryState]
end
subgraph "游戏系统 (Angular Services)"
J[CropService<br/>种植系统]
K[BuildingService<br/>建造系统]
L[NpcService<br/>NPC系统]
M[EventService<br/>随机事件]
end
subgraph "持久化 (Cloudflare)"
O[SaveGameService] -- "POST /api/game/save" --> P[Pages Function]
O -- "GET /api/game/load" --> P
P -- "KV put/get" --> Q[Cloudflare KV]
end
C --> E
E --> J
E --> K
E --> L
E --> M
E --> O
数据流：
sequenceDiagram
participant Player as 玩家浏览器
participant SPA as Angular SPA
participant Fn as Pages Function
participant KV as Cloudflare KV
Note over Player,KV: 保存游戏
Player->>SPA: 点击保存 / 自动保存
SPA->>SPA: GameDataService.gameState
SPA->>Fn: POST /api/game/save {userId, saveData}
Fn->>KV: KV.put("save:{userId}", data)
KV-->>Fn: OK
Fn-->>SPA: {success: true}
SPA-->>Player: 保存成功通知
Note over Player,KV: 加载游戏
Player->>SPA: 页面加载 / 点击加载
SPA->>Fn: GET /api/game/load?userId=xxx
Fn->>KV: KV.get("save:{userId}")
KV-->>Fn: JSON data
Fn-->>SPA: {success: true, saveData}
SPA->>SPA: GameDataService.loadGame(saveData)
SPA-->>Player: 游戏恢复
项目结构：
otherworld-god-farmer/
├── src/ # Angular 前端源码
│ ├── app/
│ │ ├── components/ # UI组件
│ │ │ ├── player-hud/ # HUD显示
│ │ │ ├── inventory/ # 背包界面
│ │ │ ├── tool-wheel/ # 工具轮盘
│ │ │ └── ...
│ │ ├── game/ # 游戏核心
│ │ │ └── game-canvas/ # Pixi.js 主画布
│ │ ├── models/ # 数据模型 (ISaveData, IPlayerState, ...)
│ │ └── services/ # 业务服务 (GameData, World, Crop, ...)
│ ├── index.html
│ ├── main.ts
│ └── styles.scss
├── functions/ # Cloudflare Pages Functions (后端API)
│ ├── api/game/
│ │ ├── save.ts # POST /api/game/save → KV存储
│ │ └── load.ts # GET /api/game/load → KV读取
│ └── tsconfig.json
├── public/ # 静态资源 (logo, favicon)
├── wrangler.toml # Cloudflare Pages 配置
├── angular.json # Angular 构建配置
├── package.json
└── tsconfig.json
优化措施：
- ⚡ FPS监控: 实时性能监控与调试
- 🚀 视锥剔除: 只渲染可见区域
- 💨 对象池: 复用游戏对象减少GC
- 📊 批量渲染: 减少Draw Call
- 🔄 纹理缓存: 优化Emoji纹理加载
性能指标：
- ✅ 稳定 60 FPS 运行
- ✅ 启动时间 < 3秒
- ✅ 内存占用 < 200MB
- ✅ 支持 30x20 地图规模
Important
请确保已安装以下环境：
1. 克隆仓库
git clone https://github.com/ChanMeng666/otherworld-god-farmer.git
cd otherworld-god-farmer2. 安装依赖
npm install3. 启动开发服务器
# 方式一：仅前端开发（不含API）
npm start
# 运行在 http://localhost:4200
# 方式二：完整本地环境（推荐，含 Pages Functions + KV 模拟）
npm run dev:cf
# 运行在 http://localhost:8788🎉 成功！ 打开浏览器开始游戏。
npm start # Angular 开发服务器
npm run dev:cf # Cloudflare Pages 完整本地环境
npm run build # 构建生产版本
npm run deploy # 构建并部署到 Cloudflare Pages
npm test # 运行测试 (Karma + Jasmine)移动控制：
- 🎮 WASD键 - 角色移动
- 🖱️ 鼠标点击 - 点击移动到目标位置
- 🖱️ 右键菜单 - 显示可用操作
工具使用：
- 🔧 自动选择 - 根据目标自动切换工具
- 🖱️ 左键使用 - 使用当前工具
- ⚙️ 工具轮盘 - 手动选择工具
界面操作：
- 📦 背包按钮 - 打开/关闭背包
- 🏗️ 建造按钮 - 打开建造菜单
- 💾 存档按钮 - 保存/加载游戏
- ❓ 帮助按钮 - 查看操作指南
种植流程：
- 使用锄头耕地
- 选择种子种植
- 定期浇水
- 等待成熟
- 收获作物
建造流程：
- 收集资源（木材、石材）
- 打开建造菜单
- 选择建筑类型
- 放置建筑
NPC互动：
- 右键点击NPC对话
- 赠送礼物提升好感度
- 完成任务获得奖励
本项目部署在 Cloudflare Pages 上，前端静态资源通过全球 CDN 分发，后端 API 以 Pages Functions 形式运行在边缘节点。
一键部署：
# 1. 安装依赖
npm install
# 2. 登录 Cloudflare
npx wrangler login
# 3. 构建并部署
npm run deploy首次部署需额外操作：
# 创建 KV 命名空间（用于游戏存档）
npx wrangler kv namespace create GAME_SAVES
# 将输出的 id 填入 wrangler.toml
# 创建 Pages 项目
npx wrangler pages project create otherworld-god-farmer --production-branch master
# 通过 Cloudflare API 绑定 KV（替换 <ACCOUNT_ID> 和 <KV_ID>）
curl -X PATCH "https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/pages/projects/otherworld-god-farmer" \
-H "Authorization: Bearer <API_TOKEN>" \
-H "Content-Type: application/json" \
-d '{"deployment_configs":{"production":{"kv_namespaces":{"GAME_SAVES":{"namespace_id":"<KV_ID>"}}}}}'graph LR
A[npm run deploy] --> B[Angular Build]
B --> C[dist/client/browser/]
C --> D[wrangler pages deploy]
D --> E[Cloudflare Pages CDN]
D --> F[Pages Functions 编译]
F --> G[边缘节点 API]
G --> H[KV 存档存储]
后端 API 以 Cloudflare Pages Functions 形式部署，与前端同域，数据存储在 Cloudflare KV 中。
存档系统API：
| 方法 | 端点 | 描述 | 存储 |
|---|---|---|---|
POST |
/api/game/save |
保存游戏数据 | Cloudflare KV |
GET |
/api/game/load?userId=xxx |
加载游戏存档 | Cloudflare KV |
示例请求：
// 保存游戏
fetch('/api/game/save', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
userId: 'player_1234567890',
saveData: gameState
})
});
// 加载游戏
fetch('/api/game/load?userId=player_1234567890')
.then(res => res.json())
.then(data => {
if (data.success) {
// data.saveData 包含完整游戏状态
}
});欢迎贡献代码！请遵循以下流程：
- Fork本仓库
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 提交Pull Request
代码规范：
- 使用TypeScript严格模式
- 遵循Angular风格指南
- 添加必要的注释
- 确保测试通过
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。
Chan Meng 创作者 & 主要开发者 |
联系方式：
- 💼 LinkedIn: chanmeng666
- 🐙 GitHub: @ChanMeng666
- 📧 Email: chanmeng.dev@gmail.com
- 🌐 Portfolio: chanmeng.org
🚀 打造异世界最棒的农场游戏 🌟
让每个玩家都能享受田园生活的乐趣
让每个玩家都能享受田园生活的乐趣
⭐ Star本项目 • 🐛 报告问题 • 💡 功能建议 • 🤝 贡献代码
用 ❤️ 由 Chan Meng 制作
