🐢 龟居 · 乌龟养殖缸

一款在浏览器里养乌龟的慢节奏模拟游戏 —— 孵蛋、育苗、造景，把水缸慢慢养成你想要的样子。

简介

龟居是一个纯前端的水龟饲养模拟游戏。没有登录、没有广告、不需要安装，打开网页就能开始养龟。

你从一颗蛋开始：买蛋、放进孵化器、等它破壳，得到一只巴掌大的龟苗。喂它、摸它、看着它一天天长大；等它成年、心情足够好，它还会自己给你下一颗蛋。

水缸是你的画布。水草、沉木、假山、陶罐、晒背台…… 二十多种造景素材都可以自由摆放，水质、造景分、乌龟的心情互相牵动 —— 缸造得越好看，龟龟们赚的龟币也越多。

✨ 特性

• 🥚 孵化即开盲盒 —— 三档龟蛋，珍稀蛋有机会孵出传说级品种，破壳有独立演出
• 🐢 7 种真实龟种 —— 从常见的巴西红耳龟到家养的黄喉拟水龟、西非侧颈龟，各有专属配色与游动姿态
• 🌱 自由造景 —— 8 种水草 + 8 种装饰 + 4 种器材，拖拽摆放、随意挪动，叶片会随水流摆动
• 💧 活着的生态 —— 水质随龟的数量衰减，过滤器与换水维持平衡；饱食度、心情、成长度三条线互相影响
• 🍤 有反馈的互动 —— 撒饲料，乌龟会自己游过去抢食；点一下乌龟就能摸它
• 🧬 自动繁殖 —— 成年的、心情好的龟会自己下蛋，形成「蛋 → 龟苗 → 成体 → 蛋」的闭环
• 📖 品种图鉴 —— 记录你收集到的每一个品种
• 💾 自动存档 —— 进度存在浏览器本地，关掉网页也不会丢，回来还能领取离线收益
• 📱 响应式 —— 桌面与手机都能玩，无任何第三方依赖

🎮 怎么玩

步骤	说明
1. 孵蛋	在「孵化」页购买龟蛋，自动进入孵化器。进度满后点击 破壳 得到一只龟苗
2. 喂食	点底部 投食 撒下饲料，乌龟会循着气味游过来吃。饱食度低于 25% 时龟头顶会冒 🍤
3. 抚摸	直接点水缸里的乌龟，心情 +7，偶尔会有小反应
4. 造景	在「商店」购买水草与装饰，切到「布置」页选中物品 → 点击水缸放下 → 拖动调整位置
5. 维护	水质变浑就点 换水；装上过滤器可以持续净水，省下不少龟币
6. 繁殖	成体（成长度 ≥ 95%）且心情 > 68 时会自己下蛋，孵化位满了会先存进「蛋篮」
7. 扩缸	龟缸住满后，在「器材」页购买 扩缸套件，容量 +4、孵化位 +1

小提示：双击已放置的摆件可以直接收回背包；按 F 投食、按 W 换水、按 Esc 取消当前操作。

🐢 龟种图鉴

品种	学名	稀有度	特点
巴西红耳龟	Trachemys scripta elegans	★ 普通	眼后一道红斑，活泼好动，抢食凶猛
中华草龟	Mauremys reevesii	★ 普通	背甲三条棱脊，性情温和，皮实好养
西非侧颈龟	Pelusios castaneus	★★ 稀有	脖子太长只能侧着折进壳里，喜欢埋进底砂
黄喉拟水龟	Mauremys mutica	★★ 稀有	喉部与四肢内侧呈鹅黄色，头型清秀
剃刀麝香龟	Sternotherus carinatus	★★★ 珍稀	背甲中央一道刀脊状高棱，爱钻石头缝
黄缘闭壳龟	Cuora flavomarginata	★★★ 珍稀	背甲镶黄边，腹甲可完全闭合
猪鼻龟	Carettochelys insculpta	★★★★ 传说	唯一的淡水"海龟"，鳍状四肢，鼻子像小猪

🚀 快速开始

在线游玩

直接访问 👉 https://michuan.github.io/gui/

本地运行

游戏是一个单文件静态页面，克隆下来双击即可：

git clone https://github.com/MiChuan/gui.git
cd gui

然后双击 index.html，或用任意静态服务器打开：

# Python
python -m http.server 8080

# Node.js
npx serve .

浏览器访问 http://localhost:8080 即可。

建议使用 Chrome / Edge / Firefox / Safari 的较新版本（需要 Canvas 2D 与 roundRect 支持）。

🗂 项目结构

gui/
├── index.html                  # 游戏本体：HTML 结构 + CSS 样式 + 全部游戏逻辑
├── assets/                     # README 使用的截图
│   ├── screenshot.jpg
│   ├── build.jpg
│   └── hatch.jpg
├── .github/workflows/
│   └── deploy.yml              # 推送到 main 后自动部署 GitHub Pages
├── .nojekyll                   # 跳过 Jekyll 处理
├── LICENSE
└── README.md

整个游戏只有一个 index.html，内部大致分为几块：

区块	职责
基础工具	数值插值、mulberry32 可复现随机数、角度插值
数据层	SPECIES 龟种、ITEMS 造景物、EGG_TIERS 蛋档位
渲染层	水体 / 底砂 / 水草 / 装饰 / 乌龟 / 小鱼 / 饲料的 Canvas 绘制
模拟层	tick() 每秒推进饥饿、心情、成长、水质与产出
交互层	画布指针事件（放置、拖动、抚摸）与面板事件委托
存档层	localStorage 读写与离线收益结算

🛠 技术说明

• 零依赖、零构建：没有框架、没有打包器、没有 node_modules，一个文件就是全部。
• 全程序化绘制：所有乌龟、水草、装饰都是 Canvas 路径实时绘制的，没有一张位图素材。因此整个项目不含图片资源，加载极快。
• 体积随分辨率自适应：物体位置以 0~1 归一化坐标存储，渲染时再乘以画布实际像素，窗口怎么缩放布局都不会错位。
• 形状可复现：每件造景带一个随机种子，用 mulberry32 生成形态，保证同一棵水草每帧长得一模一样、不会抖动，换台设备也一致。
• 单一绘制函数复用：同一套绘制逻辑同时服务于主画面、列表头像与商店缩略图，靠传入不同的缩放单位适配尺寸。
• 离线结算：基于 lastSave 时间戳推算离开期间的收益与消耗，上限 4 小时。

🤝 参与贡献

欢迎提 Issue 或 PR —— 无论是新龟种、新水草、平衡性调整还是修 bug。

1. Fork 本仓库并新建分支：git checkout -b feat/new-turtle
2. 修改 index.html（新增龟种只需在 SPECIES 里加一项，绘制、图鉴、商店会自动接上）
3. 提交前请自测：孵化、喂食、放置、存档四条主流程走通
4. 提交 PR 并说明改动内容与截图

如果只是想报告问题，请附上浏览器版本和复现步骤。

📄 License

本项目基于 MIT License 开源，Copyright © 2026 CodeAnt。

---

如果这个小水缸让你放松了一会儿，欢迎点个 ⭐ Star