超级马里奥
### 角色扮演 你是一位顶级的Web游戏开发专家，擅长使用 Kaboom.js 引擎快速构建游戏原型。你的任务是严格按照我的要求，一次性生成一个完整的、包含所有指定功能的平台跳跃游戏。 ### 核心目标 生成一个功能完整的迷你马里奥游戏。该游戏包含一个玩家、可收集的物品、一个敌人以及胜负条件。 ### 技术栈 * **基础:** `index.html`,...
效果展示
Prompt 快速复制
### 角色扮演
你是一位顶级的Web游戏开发专家，擅长使用 Kaboom.js 引擎快速构建游戏原型。你的任务是严格按照我的要求，一次性生成一个完整的、包含所有指定功能的平台跳跃游戏。
### 核心目标
生成一个功能完整的迷你马里奥游戏。该游戏包含一个玩家、可收集的物品、一个敌人以及胜负条件。
### 技术栈
* **基础:** `index.html`, `style.css`, `game.js`
* **游戏引擎:** **Kaboom.js** (必须通过CDN链接引入)
### 详细功能需求
请严格按照以下描述，生成三个文件的完整代码：
**1. 文件结构:**
* `index.html`: 游戏的主入口和画布容器。
* `style.css`: 基础页面样式。
* `game.js`: 所有的游戏逻辑。
**2. `index.html` 的要求:**
* 包含标准的HTML5结构。
* `<title>` 设置为 "Mini Mario"。
* 在 `<head>` 中引入 `style.css`。
* 在 `<body>` 结束前，通过CDN引入最新版的 **Kaboom.js**，并紧接着引入我们自己的 `game.js`。
* `<body>` 内应有一个容器元素，用于承载游戏画布。
**3. `style.css` 的要求:**
* 移除 `body` 的默认 `margin` 和 `padding`。
* 使用 Flexbox 或 Grid 布局，让游戏画布在浏览器窗口中水平和垂直居中。
* 设置一个深色的页面背景，以突出游戏画布。
**4. `game.js` 的核心逻辑要求:**
* **初始化:** 初始化 Kaboom，创建一个 800x600 的画布。
* **资源加载:** (可选，为简化，暂时不加载真实图片，全部用内置图形代替)
* **场景设计:**
* **主游戏场景 (`"game"`)**:
* **关卡布局:** 使用 `addLevel()` 函数，通过字符来定义关卡。
* `=` 代表地面/砖块。
* `$` 代表金币。
* `^` 代表敌人 (栗子怪)。
* `f` 代表终点旗杆。
* **玩家:**
* 创建一个名为 `player` 的对象。
* 外观为 40x40 的红色方块。
* 赋予其 `body()` 组件以实现重力和跳跃。
* **控制:**
* `左方向键`: 向左移动。
* `右方向键`: 向右移动。
* `空格键`: 跳跃 (只有当玩家在地面上时才能跳)。
* **敌人:**
* 所有被标记为 "goomba" 的敌人，默认会左右来回巡逻。
* **交互规则 (碰撞检测):**
* 当玩家碰到金币时，金币消失，分数增加10分。
* 当玩家碰到敌人侧面时，玩家死亡，游戏跳转到失败场景 (`"lose"`)。
* 当玩家从上方跳到敌人头上时 (通过 `player.isFalling()` 判断)，敌人消失，分数增加50分。
* 当玩家碰到旗杆时，游戏跳转到胜利场景 (`"win"`)。
* **UI:** 在屏幕左上角显示一个实时更新的分数标签。
* **失败场景 (`"lose"`)**:
* 显示 "Game Over" 字样。
* 显示最终得分。
* 显示提示 "Press Space to Restart" (按空格键重新开始)。
* 监听空格键，按下后重新加载主游戏场景。
* **胜利场景 (`"win"`)**:
* 显示 "You Win!" 字样。
* 显示最终得分。
* 显示提示 "Press Space to Restart"。
* 监听空格键，按下后重新加载主游戏场景。
* **游戏启动:** 默认启动主游戏场景 (`"game"`)。
### 执行指令
请现在根据上述所有要求，为 `index.html`、`style.css` 和 `game.js` 这三个文件生成完整的代码。请将每个文件的代码分别放在一个清晰标记的代码块中。