像素小英雄大冒险

这是一款横版平台跳跃类游戏，玩家需要控制红色像素小英雄完成冒险。

• 核心目标： 到达位于右侧高处的金色平台（终点），即可完成关卡。
• 玩家操作：
  • ←→ 方向键：控制英雄左右移动。
  • ↑ 方向键或空格键：控制英雄跳跃。
  • Shift 键：在地面上时向当前朝向冲刺。
• 游戏元素：
  • 玩家： 有3条生命，触碰到敌人或从悬崖掉落会损失生命。
  • 敌人： 黑色带尖刺的球体，在平台上巡逻。玩家可以从上方踩击消灭它们。
  • 金币 (Coin)： 收集可增加分数，系统会定期生成。
  • 蘑菇 (Mushroom)： 特殊道具，收集后可以增加一条生命。
  • 平台： 绿色的固体区域，玩家和敌人可以在上面站立。金色平台是终点。
• 游戏规则：
  • 游戏有3分钟（180秒）时间限制，时间耗尽则游戏结束。
  • 生命耗尽（小于等于0）则游戏结束。
  • 游戏结束后会记录分数，并展示历史最高分排名。

开发此游戏主要涉及以下技术和概念：

• HTML5 Canvas API：
  • 核心渲染技术，用于在网页上绘制所有游戏元素（玩家、敌人、背景等）。
  • 关键方法：`getContext('2d')`, `fillRect()`, `beginPath()`, `arc()`, `fillText()`。
• JavaScript (ES6+)：
  • 面向对象编程 (OOP)： 使用 `class` 定义游戏实体，如 `Player`, `Enemy`, `Item`，封装属性和行为。
  • 数组操作： 使用 `forEach`, `filter` 等方法管理游戏中的多个对象（如敌人数组、道具数组）。
  • 事件监听： `addEventListener` 监听键盘输入，实现玩家控制。
  • 性能优化： 使用 `requestAnimationFrame` 实现流畅的游戏循环。
  • `localStorage`： 用于在浏览器本地持久化存储玩家的最高分记录。
• 游戏开发核心概念：
  • 游戏循环 (Game Loop)： 包含 `update`（更新状态）和 `render`（绘制画面）两个核心部分。
  • 碰撞检测 (Collision Detection)： 使用轴对齐边界框（AABB）算法检测两个矩形是否重叠。
  • 物理模拟 (Physics Simulation)： 模拟重力、速度、加速度等物理效果。
  • 状态管理 (State Management)： 管理游戏的不同状态（游戏进行中、游戏结束、关卡完成）。
  • 用户界面 (UI) 设计： 绘制分数、生命值、剩余时间等游戏信息。
• Web Audio API (可选)： 用于在游戏中播放音效（如收集金币）。

开发这样一个游戏的典型步骤如下：

1. 需求分析与设计： 确定游戏类型、核心玩法、目标、关卡布局和游戏规则。
2. 环境搭建： 创建基础的 HTML 文件，设置 Canvas 元素和基本样式。
3. 创建游戏框架：
   • 编写游戏主类（如 `PixelHeroAdventure`）。
   • 实现基本的游戏循环 (`gameLoop`, `update`, `render`)。
4. 实现玩家角色：
   • 创建 `Player` 类，定义其属性（位置、大小、速度等）。
   • 实现 `update` 方法处理输入和物理。
   • 实现 `render` 方法将玩家绘制到画布上。
5. 实现平台与碰撞：
   • 定义平台数据。
   • 实现 AABB 碰撞检测函数。
   • 为玩家添加与平台的碰撞响应逻辑。
6. 添加敌人：
   • 创建 `Enemy` 类，实现其巡逻行为。
   • 实现玩家与敌人之间的碰撞检测和规则。
7. 开发道具系统：
   • 创建 `Item` 类，并为不同类型的道具定义收集效果 (`onCollect`)。
   • 实现玩家与道具的碰撞检测。
8. 丰富游戏玩法：
   • 实现冲刺、爆炸特效等高级功能。
   • 添加动态生成敌人和金币的逻辑。
9. 实现 UI 和游戏状态：
   • 编写 `renderUI` 方法绘制分数、生命值等信息。
   • 实现游戏结束和关卡完成的判断逻辑及界面。
   • 使用 `localStorage` 保存和读取最高分。
10. 测试、优化与发布： 反复测试，修复 bug，优化性能，最终部署。

以下是代码的整体结构概览，采用了清晰的模块化和职责分离原则：

<script>
    // 1. 游戏主类：负责统筹全局，管理游戏状态、对象和循环
    class PixelHeroAdventure {
        constructor() { ... }      // 初始化画布、属性、加载资源
        startGame() { ... }        // 开始/重置游戏
        gameLoop() { ... }         // 游戏主循环
        update(deltaTime) { ... }  // 更新所有游戏对象的状态
        render() { ... }           // 将所有对象绘制到画布
        checkCollisions() { ... }  // 处理所有碰撞逻辑
        isColliding(a, b) { ... }  // AABB碰撞检测函数
        // ... 其他辅助方法（如生成道具、保存分数、播放音效等）
    }

    // 2. 玩家类：封装玩家的属性和行为
    class Player {
        constructor(x, y, game) { ... }
        update(deltaTime) { ... }  // 更新位置、处理输入、应用物理
        handleInput() { ... }      // 专门处理键盘输入
        render(ctx) { ... }        // 绘制玩家
        resetPosition() { ... }    // 重置玩家位置和状态
    }

    // 3. 敌人类：封装敌人的属性和行为
    class Enemy {
        constructor(x, y, game) { ... }
        update(deltaTime) { ... }  // 更新巡逻行为
        render(ctx) { ... }        // 绘制敌人
    }

    // 4. 爆炸效果类：封装爆炸动画
    class Explosion {
        constructor(x, y, game) { ... }
        createParticles() { ... }  // 创建爆炸粒子
        update(deltaTime) { ... }  // 更新粒子
        render(ctx) { ... }        // 绘制爆炸效果
    }

    // 5. 道具类：封装道具的属性和行为
    class Item {
        constructor(x, y, type, game) { ... }
        update(deltaTime) { ... }  // 更新（如浮动动画）
        render(ctx) { ... }        // 绘制道具
        onCollect(player) { ... }  // 定义被收集时的效果
    }

    // 6. 游戏入口
    window.addEventListener('load', () => {
        const game = new PixelHeroAdventure(); // 实例化游戏
        // 添加键盘事件监听器...
    });
</script>