星尘漂流者 (Stardust Drifter)

一个基于 HTML5 Canvas 的简单 2D 物理游戏。

简介

在浩瀚的宇宙中，驾驶你的飞船，利用引力奇点的力量收集散落的星尘。点击屏幕创建引力奇点，引导飞船移动，收集所有星尘以完成阶段挑战。

游戏玩法

1. 开始: 游戏加载后自动开始，飞船位于屏幕中心。
2. 控制:
   • 创建引力奇点: 在画布上点击任意位置，会在点击点创建一个临时的引力奇点。
   • 暂停/继续: 点击右上角的“暂停”按钮，或按空格键，可以暂停或继续游戏。
3. 目标:
   • 收集画布上所有的发光星尘。
   • 收集完所有星尘后，游戏会自动进入下一阶段，并生成新的一批星尘。
   • 每收集一个星尘，得分增加10分。
4. 物理:
   • 飞船具有惯性。
   • 引力奇点会对飞船产生引力。
   • 引力的大小与距离的平方成反比。

文件结构

• index.html: 游戏的主页面。
• script.js: 包含所有游戏逻辑，包括飞船控制、星尘生成、引力计算和游戏循环。
• style.css: 游戏的样式文件，包括画布的星空背景和UI按钮样式。
• test_script.js: 一个简单的测试脚本，用于验证 Canvas 和 JS 是否正常工作。(未被 index.html 引用)

运行

只需在现代浏览器中打开 index.html 文件即可开始游戏。

代码说明

• script.js:
  • 使用 requestAnimationFrame 实现流畅的动画循环。
  • 飞船、星尘和引力奇点是主要的游戏对象。
  • 通过监听 click 事件在画布上创建引力奇点。
  • 通过简单的物理公式计算引力对飞船的影响。
  • 包含基本的调试日志功能（通过 DEBUG 常量控制）。

开发

这是一个纯前端项目，无需构建步骤。直接修改 .html, .css, .js 文件即可。

用于创建该项目的提示词参考

我需要你帮我创建一个名为‘星尘漂流者’的太空小游戏的完整核心原型。第一阶段目标是实现独特的引力操控玩法。

具体要求如下：

项目结构: 创建 index.html, style.css, 和 script.js。HTML中包含一个全屏的 。CSS负责将画布背景设为带有动画闪烁星星的深邃宇宙（例如，背景色 #0a0a1a 加上多个随机分布、有透明度动画的小白点）。

核心对象: 在 script.js 中，创建一个持续的游戏循环 (requestAnimationFrame)。在画布中央绘制一艘有明确朝向的玩家飞船（例如带尾翼的三角形）。飞船需要具备位置、速度和加速度等物理属性。

核心玩法——引力奇点: 实现游戏的主要操控方式。监听用户的鼠标点击事件，在点击位置生成一个可见的、持续2-3秒后自动消失的圆形“引力奇点”。当此奇点存在时，它会对飞船产生一个吸引力，该引力的大小与飞船到奇点距离的平方成反比。根据这个引力持续更新飞船的加速度和速度，使其在没有引力作用时能保持惯性飞行。最终效果是，玩家通过在飞船前方不断点击来“牵引”飞船在宇宙中航行。”

请在上阶段代码的基础上添加：

游戏目标 (星尘收集): 创建一个 Stardust 类，并在游戏开始时在画布内随机散布20个星尘实例作为收集物。实现碰撞检测逻辑，当飞船靠近星尘时，该星尘消失，并在界面UI上实时更新玩家的得分。当所有星尘被收集完毕，显示“阶段完成！”的提示，并重新生成更多星尘进入下一阶段。

障碍与风险 (陨石带): 创建一个 Asteroid 类，其实例拥有随机的位置、大小和缓慢的漂移/自转速度。在场景中生成5到8个陨石作为障碍物。

胜负条件: 同样实现飞船与陨石的碰撞检测。一旦飞船碰到任何一个陨石，游戏循环立即停止，并在屏幕中央显示“游戏结束”信息以及最终得分，同时提供一个“重新开始”的按钮，点击后可以重置游戏状态并开始新的一局。