小鸡下蛋 小游戏 html

「19-快乐小鸡下蛋 html 小游戏」
/~530e3Zw9rF~:/
链接：https://pan.quark.cn/s/8e2b5e5ca6f7

小鸡下蛋

快乐小鸡下蛋

一款轻松、可爱、无需联网的 2D 网页孵化小游戏。

玩家点击草地规划产蛋地点，鸡妈妈会依次走到目的地完成产蛋。蛋窝达到目标后，所有鸡蛋会集体破壳，孵出具有不同装扮和特效的小鸡，然后自动进入下一轮。

项目使用原生 HTML、CSS、JavaScript、Canvas 2D 和 Web Audio API 开发，不依赖后端、构建工具或第三方运行库。

快速开始

直接运行

双击项目根目录中的index.html，使用现代浏览器打开即可游玩。

快乐小鸡下蛋/ └── index.html ← 双击这个文件

使用本地服务器运行（可选）

如果浏览器限制本地文件的数据保存，可以在项目目录启动一个静态服务器：

python -m http.server 8000

然后访问：

http://127.0.0.1:8000/

核心玩法

1. 点击草地选择一个产蛋目的地。

2. 鸡妈妈转向并走到目的地光圈。

3. 到达后生成一枚鸡蛋，鸡蛋会落下、弹跳并停在草地上。

4. 可以连续规划最多 8 个目的地，鸡妈妈会依次执行。

5. 快速规划会累积连击，并提高稀有蛋出现概率。

6. 本轮蛋窝达到目标后自动开始集体孵化。

7. 不同鸡蛋孵出拥有不同装扮和拖尾的小鸡。

8. 小鸡离开场地后自动进入下一轮。

首轮目标为 12 枚进度；之后每两轮提高 2 枚，最高为 20 枚。部分稀有蛋一次会贡献多枚进度。

鸡蛋与特殊小鸡

游戏包含 9 类可收集鸡蛋。首次发现新蛋时会解锁对应图鉴。

鸡蛋	孵化结果	进度价值	特点
奶油蛋	软萌小鸡	1	基础蛋种，任何天气都会出现
金光蛋	皇冠小鸡	2	晴朗天气出现率提高，拥有金色星光装饰
雨露蛋	水手小鸡	1	小雨天气更常见，佩戴蓝色水手帽与领巾
花瓣蛋	花花小鸡	1	小雨天气更常见，头戴粉色花朵
薄荷蛋	叶子小鸡	1	微风天气更常见，拥有绿色叶片装饰
星云蛋	星镜小鸡	1	星夜天气更常见，佩戴星光眼镜并留下紫色拖尾
斑斑蛋	探险小鸡	1	微风天气更常见，佩戴探险围巾
彩虹蛋	彩虹小鸡	3	超稀有蛋种，拥有彩虹纹理和多彩拖尾
月光蛋	月夜小鸡	2	仅在星夜出现，佩戴月夜帽并留下月光拖尾

连击保底

• 达到 5 连击时，会优先获得一种尚未发现的基础特殊蛋。

• 首次达到 8 连击时，会保底出现彩虹蛋。

• 如果 8 连击发生在星夜且月光蛋尚未解锁，会优先出现月光蛋。

• 5 连击和 10 连击还会进一步提高当次稀有蛋权重。

动态天气

天气会自动轮换，并真实影响玩法、概率和场景动画。

天气	玩法影响	场景表现
晴朗	金光蛋概率提高，彩虹蛋概率小幅提高	明亮天空、太阳和缓慢云朵
小雨	雨露蛋和花瓣蛋概率提高	天空变暗并出现动态雨滴
微风	鸡妈妈移动速度提高约 40%，同时影响鸡蛋、粒子和小鸡移动	云朵加速、草地出现风痕
星夜	连击判定时间延长，星云蛋和月光蛋概率提高	月亮、星星和萤火虫效果

右侧天气卡会显示当前天气、玩法效果和剩余时间。点击天气卡可以重新查看当前天气说明。

收集图鉴

点击顶部的📖按钮可以打开“蛋与小鸡图鉴”。

• 未发现的蛋显示为问号。

• 首次产出新蛋后自动解锁对应条目。

• 图鉴会显示蛋名、对应小鸡和玩法效果。

• 收集进度保存在浏览器本地，关闭网页后不会丢失。

• 完成 9/9 收集后会显示全图鉴完成提示。

操作方式

鼠标与触摸

操作	功能
点击草地	选择产蛋目的地
点击“下一个蛋”	自动选择附近目的地
点击天气卡	查看当前天气效果
📖	打开收集图鉴
?	打开玩法帮助
🔊 / 🔇	开启或关闭声音
Ⅱ / ▶	暂停或继续游戏
⛶	进入或退出全屏（桌面端）

键盘

按键	功能
Space/Enter	游戏画布获得焦点后，规划附近目的地
P	暂停或继续
Esc	关闭帮助或图鉴

已实现功能

• 母鸡转向、移动、步行起伏、下蛋弹跳和阴影反馈

• 目的地光圈与最多 8 个指令的路线队列

• 圆润鸡蛋轮廓、物理落地、弹跳和分散堆放

• 9 种鸡蛋纹理、9 类特殊小鸡装扮

• 彩虹、星光、月光等特殊小鸡拖尾

• 连击提示、稀有率加成和新蛋保底机制

• 多轮目标增长与完整孵化循环

• 晴朗、小雨、微风、星夜动态天气

• 羽毛、星星、蛋壳碎片、画面轻震和浮动文字

• Web Audio API 程序化音效，无外部音频文件

• 收集图鉴、累计鸡蛋、累计小鸡和最高纪录本地保存

• 暂停、静音、帮助、图鉴和全屏控制

• 鼠标、触摸和键盘操作

• 桌面、平板、手机横竖屏响应式布局

• 尊重系统“减少动态效果”偏好

技术实现

技术	用途
HTML5	页面结构、游戏 UI 和可访问性语义
CSS3	响应式布局、弹窗、控件和过渡动画
JavaScript	游戏状态、路线队列、概率、天气和孵化流程
Canvas 2D	农场场景、角色、鸡蛋、粒子和天气绘制
Web Audio API	实时生成下蛋、破壳、鸣叫和天气音效
LocalStorage	保存统计数据、声音设置和图鉴进度

游戏采用单页面、单循环架构。动态实体由requestAnimationFrame更新和绘制，最大帧间隔受到限制，避免页面切换回来后物理状态突然跳跃。

项目结构

快乐小鸡下蛋/ ├── index.html # 页面结构、游戏 UI、弹窗和图鉴 ├── style.css # 响应式界面、控件与弹窗样式 ├── game.js # 游戏状态、Canvas 绘制、物理、天气和音效 ├── hen.png # 母鸡透明角色图片 ├── chick.png # 小鸡透明角色图片 ├── 游戏参考图.png # 早期画面参考 ├── 小鸡下蛋项目.txt # 原始项目策划 └── README.md # 项目说明

数据保存

游戏使用localStorage保存：

• 累计鸡蛋数量

• 累计孵化小鸡数量

• 最高纪录

• 声音开关

• 已解锁图鉴条目

以下操作会导致记录重置：

• 清理浏览器站点数据

• 使用不同浏览器打开游戏

• 某些浏览器为本地文件创建了不同的存储空间

• 手动删除对应的 LocalStorage 数据

浏览器兼容性

推荐使用较新的浏览器版本：

• Microsoft Edge

• Google Chrome

• Firefox

• Safari

浏览器需要支持 Canvas 2D、Web Audio API、LocalStorage 和现代 CSS。声音通常会在玩家第一次点击“开始下蛋”后启用，这是浏览器的自动播放安全限制。

自定义与扩展

主要玩法配置位于game.js：

• eggTypes：鸡蛋名称、小鸡名称、图鉴说明和进度价值

• weatherTypes：天气名称、持续时间与说明

• chooseEggType()：蛋种权重、天气概率和连击保底

• drawEggDecoration()：不同蛋的纹理绘制

• drawChickAccessory()：特殊小鸡装扮绘制

• startHatching()：孵化和小鸡生成流程

可以继续扩展的方向：

• 新增雪天、彩虹雨、流星夜等天气

• 增加小鸡稀有度、昵称和个体收藏

• 加入每日任务、成就和图鉴完成奖励

• 新增计时、安静、挑战等游戏模式

• 增加更多场景、季节和农场装饰

• 将最高纪录同步到在线排行榜

素材与发布说明

项目本身可以离线运行。公开发布或用于商业用途前，请确认hen.png、chick.png和参考图片拥有适当的使用授权，并根据实际情况补充项目许可证和素材来源说明。