网页H5小游戏

1.休闲益智类 H5 娱乐小游戏，主打横版躲避玩法，适配移动端、PC 端多设备使用场景；
2.融合童年怀旧风格，借鉴雷霆战机类经典玩法，核心为 “躲避障碍 + 收集道具” 的轻竞技体验；
3.操作方式：PC 端通过 A/D 键控制汽车左右移动、W 键加速、空格键暂停；移动端提供虚拟按键适配；玩家需躲避前方车辆，同时收集金币（+3 分）、钻石（+6 分）、吸铁石（自动拾取道具）、盾牌（抵消碰撞）实现分数累积，支持历史得分排名；
4.H5 线上即玩模式，无需下载安装，加载速度快，操作门槛低，自动适配不同屏幕尺寸。

1.整体架构采用 “分层模块式” 设计：分为游戏核心逻辑层（碰撞检测、道具状态、难度迭代）、UI 交互层（多端适配界面、弹窗反馈）、数据存储层（历史得分记录）；技术栈使用 HTML5 搭建页面结构，Tailwind CSS 实现响应式样式，原生 JavaScript 编写游戏逻辑，结合 Font Awesome 提供图标资源，通过 localStorage 完成本地数据持久化；
2.负责模块为游戏全流程开发：①核心玩法模块：实现车辆 / 道具的生成、移动、碰撞检测逻辑，覆盖 5 种道具（金币、钻石、吸铁石、盾牌、加速）的交互规则；②多端适配模块：完成 PC 端键盘操作与移动端虚拟按键的兼容适配；③数据模块：实现历史得分的存储、排序、删除等功能，支持最多 10 条记录留存；量化结果：游戏运行帧率稳定 60fps，多端适配覆盖率 100%，道具交互逻辑无异常；
3.遇到的难点及解决方案：①难点：移动端虚拟按键与 PC 端键盘操作的冲突兼容；方案：通过设备触控事件 / 键盘事件的区分监听，实现操作逻辑的解耦；②难点：道具状态（如吸铁石时效、盾牌数量）的精准管理；方案：使用定时器 + 全局状态变量，结合 DOM 类名切换实现状态可视化；③难点：车辆与玩家的碰撞检测精度不足；方案：通过获取 DOM 元素的 boundingClientRect 计算矩形交叉区域，提升检测准确性。