小鸡下蛋 小游戏 html
小鸡下蛋 小游戏 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/核心玩法
点击草地选择一个产蛋目的地。
鸡妈妈转向并走到目的地光圈。
到达后生成一枚鸡蛋,鸡蛋会落下、弹跳并停在草地上。
可以连续规划最多 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和参考图片拥有适当的使用授权,并根据实际情况补充项目许可证和素材来源说明。
