我的第一个 前端 小游戏项目
- 项目开始于2026年1月28日，本人在寒假参加的一次牛客竞赛平台的AIcoding活动，本人感兴趣跟着视频中的前端小游戏开发教学进行了一次完全AI辅助的前端小游戏开发，本人为大一新生，刚接触前端以及编程等内容，因此对前端并没有深入的了解 ，代码不足之处还请谅解，欢迎大家指出讨论。
-
双模式跳跃系统：
-
小跳 (Small Jump)：鼠标点击触发。跳跃高度适中，下落速度快，适用于精准躲避单个障碍。
-
大跳 (Big Jump)：空格键触发。跳跃高度更高，滞空时间长（重力较小），适用于跨越连续障碍或长距离陷阱。
-
-
动态障碍生成：
- 障碍物从右向左移动，玩家固定于左侧。
-
三种类型：
- 普通障碍 (-10 HP)
- 危险障碍 (-20 HP)
- 致命障碍 (-30 HP)
-
权重随机算法：
- 根据配置概率（60% 普通 / 30% 危险 / 10% 致命）动态生成。
-
组合障碍：
- 从第 2 关起，概率生成连续的“障碍组”，提升挑战性。
-
独特的“红旗”通关机制：
- 并非无限奔跑，每关设有终点红旗。
- 红旗初始位于远处，随时间推移距离缩短；当距离 ≤ 20米时，红旗从屏幕右侧出现并向左移动。
-
胜利条件：玩家需存活至红旗与角色重合（或红旗越过角色）。
- 8 个渐进式关卡：
- 每关红旗初始距离递增 20 米（生存时间要求更长）。
- 随着关卡提升，高伤害障碍和组合障碍的出现频率增加。
- 生命值与奖励机制：
- 初始生命值：100。
- 通关奖励：每通过一关，最大生命值上限 +20 并回满血量。
- 策略性：鼓励玩家在受伤情况下继续尝试，而非必须完美无伤。
- 失败判定：生命值归零则游戏结束，结算显示已通关的最大关卡数。
- 多状态界面管理：包含开始、规则、关卡选择、关卡准备、游戏中、通关、失败七种状态无缝切换。
- 音频系统：集成背景音乐（BGM）与动作音效（跳跃、受伤、成功、失败），支持一键静音切换。
- 高对比度视觉设计：所有文字采用“黑底白字”样式，确保在动态背景下清晰可读。
- 动态角色动画：角色在跑动时有颠簸和倾斜效果，跳跃时根据速度产生仰角变化。
- 实时反馈：
- 动态血条显示。
- 大跳触发时的底部文字提示。
- 矢量绘制的红旗（非图片），保证任意分辨率下清晰锐利。
- 响应式布局：使用 CSS clamp() 和 min()/max() 适配桌面端与移动端屏幕。
.
├── index.html (主文件)
├── bg.png (背景图)
├── player.png (玩家图)
├── start.png (开始界面图)
├── success.png (成功界面图)
├── fail.png (失败界面图)
├── obs1.png (障碍图1)
├── obs2.png (障碍图2)
├── obs3.png (障碍图3)
└── js/
├── config.js (游戏配置与常量)
├── audio.js (音频管理器)
├── state.js (游戏状态、变量与图片预加载)
├── logic.js (核心游戏逻辑：玩家、障碍、红旗、碰撞检测)
├── render.js (渲染与 UI 更新)
└── main.js (初始化、事件绑定与游戏循环)
- 1. 音乐添加：实现了开始界面与游戏界面的 BGM 切换，以及全套动作音效。
- 2. 关卡选择与记忆系统：通过 LocalStorage 实现了关卡解锁进度保存，并增加了专门的关卡选择界面。
- 3. 碰撞体精细化：引入了 Hitbox Padding，使判定更加公平；增加了角色动态倾斜与跑动动画。
1. 游戏内容扩展
- 添加更多类型的障碍物（如会移动的障碍、需要低头躲避的悬空障碍）。
- 引入“道具系统”：如磁铁（吸引红旗）、护盾（抵挡一次伤害）、加速鞋等。 2. 视觉表现升级
- 实现视差滚动背景（Parallax Scrolling），增加场景空间感。
- 为角色添加粒子效果（如落地时的灰尘、受伤时的闪烁）。 3. 社交与竞技
- 本地排行榜系统：记录每关的最短通关时间。
- 角色皮肤系统：通过解锁关卡或达成特定成就更换角色外观。 4. 性能与兼容性
- 离线访问支持（PWA）：让游戏可以像原生应用一样安装在桌面或手机上。
b站视频：牛客网页小游戏AIcoding训练——基于AI开发的纯html2D跑酷小游戏 游戏在线版体验：牛客娘2D跑酷 牛客帖子: 牛客帖子