91 lines
6.6 KiB
Markdown
91 lines
6.6 KiB
Markdown
## 主题设定
|
||
|
||
**「星际文明探索者」** —— 一款以宇宙探索为核心主题的沉浸式交互网页游戏。玩家扮演一名星际探险家，驾驶先进的星际飞船在浩瀚的宇宙中穿梭，探索未知星球、收集星际资源、抵御宇宙威胁，并逐步揭开宇宙文明的神秘面纱。
|
||
|
||
---
|
||
|
||
## 核心功能需求
|
||
|
||
### 游戏机制设计
|
||
|
||
玩家控制一艘具有先进推进系统的星际飞船，在 procedurally generated（程序生成）的宇宙空间中自由移动。游戏应包含以下核心玩法：
|
||
|
||
**探索系统**：宇宙空间由数千颗恒星、行星、陨石带和星际尘埃组成，支持无限滚动或动态加载机制。每颗星球拥有独特的外观特征（颜色、大小、环系统、大气层效果），玩家可以操控飞船靠近星球进行扫描和分析，揭示星球的地质构成、是否有水资源、是否适宜居住等科学数据。
|
||
|
||
**资源采集**：玩家在探索过程中可以采集星际资源，包括稀有矿物、能量晶体和古老文明遗迹碎片。资源管理系统需要在界面上清晰展示当前载量和采集进度，同时提供升级飞船引擎、护盾和扫描仪等子系统的功能菜单。
|
||
|
||
**战斗系统**：宇宙中潜伏着各类威胁，包括自动防御无人机、太空海盗和流浪小行星。战斗采用即时制，玩家通过鼠标控制飞船瞄准，键盘控制移动和技能释放。战斗特效应包含激光束、等离子体爆炸、护盾能量波动等视觉反馈。
|
||
|
||
**进化成长**：飞船在战斗和探索中获得经验值，解锁新技能和装备。升级界面采用3D旋转展示飞船模型，玩家可以选择性强化推进系统（影响移动速度和加速度）、能量系统（影响护盾持续时间和武器威力）或扫描系统（影响资源发现概率和星球信息完整度）。
|
||
|
||
### 视觉设计规范
|
||
|
||
**整体美学**：采用深空蓝紫色调为主基调，配合高亮的星光效果和流线型的界面元素。所有UI元素需采用半透明磨砂玻璃效果，边缘带有微弱的发光描边，营造未来科技感。字体选用无衬线字体，部分标题使用带有渐变发光效果的定制字体。
|
||
|
||
**背景层**：使用 WebGL 或 Canvas 渲染动态星空背景，星星具有视差滚动效果，远处的星云采用多层半透明叠加营造景深感。偶尔出现的超新星爆发、脉冲星闪烁和流星雨增添动态氛围。
|
||
|
||
**粒子系统**：飞船引擎喷射的火焰、战斗爆炸效果、能量护盾激活时的涟漪、采集资源时的粒子汇聚效果均需要精心设计。粒子应具有物理运动特性（速度、加速度、生命周期、颜色渐变），总数在保持60fps流畅度的前提下尽可能密集。
|
||
|
||
**动画过渡**：所有界面切换、菜单弹出、按钮悬停均需配备平滑的动画过渡。推荐使用 CSS Transitions 配合 JavaScript 控制的动画曲线，避免生硬的跳变。飞船移动应具有惯性物理特性，加减速过程自然流畅。
|
||
|
||
---
|
||
|
||
## 技术实现要求
|
||
|
||
### 架构规范
|
||
|
||
整个项目必须整合为**单一 HTML 文件**（index.html），内部依次包含 `<style>` 标签定义的 CSS 样式和 `<script>` 标签定义的 JavaScript 逻辑。外部资源引用仅限 CDN 方式引入必要的第三方库。
|
||
|
||
### 第三方库引用（CDN）
|
||
|
||
必须且仅可从可靠 CDN（如 cdnjs、unpkg、jsdelivr）引入以下类型的库：
|
||
|
||
**图形渲染库**：可选择引入 Three.js 或 Pixi.js 用于复杂的3D场景渲染或2D高性能图形绘制。若选择 Three.js，需同时引入 OrbitControls（用于相机控制）和 GLTFLoader（用于加载3D模型，如果需要的话）。
|
||
|
||
**物理引擎库**：可选择引入 Matter.js 或 Cannon.js 用于碰撞检测和刚体物理模拟，特别是陨石撞击和飞船漂移效果。
|
||
|
||
**动画库**：可选择引入 GSAP 或 anime.js 用于复杂的时间轴动画控制，特别是UI元素入场动画和连击特效。
|
||
|
||
**音频处理库**：可选择引入 Howler.js 或 Tone.js 用于游戏音效和背景音乐的播放控制，支持空间音频效果更佳。
|
||
|
||
**粒子库**：可选择引入 tsparticles 或类似专用粒子引擎，用于大规模粒子效果的高效渲染。
|
||
|
||
### 代码质量标准
|
||
|
||
**模块化设计**：JavaScript 代码应采用模块化结构，至少包含以下核心模块——游戏主循环模块（Game Loop）、渲染引擎模块（Renderer）、输入处理模块（Input Handler）、实体管理系统（Entity Manager）、UI 界面模块（UI Manager）、数据持久化模块（Save/Load System）。各模块职责清晰，接口规范。
|
||
|
||
**性能优化**：对于 Canvas/WebGL 渲染的内容，需要实现对象池（Object Pool）管理频繁创建销毁的粒子和实体；采用空间分区（Spatial Partitioning）或四叉树（Quadtree）优化碰撞检测；使用 requestAnimationFrame 实现流畅的动画循环；在非活动状态自动降级渲染质量。
|
||
|
||
**响应式设计**：游戏界面需完美适配不同尺寸的视口，从移动端竖屏到桌面端宽屏均能正常显示和操作。关键 UI 元素在缩放过程中保持可点击区域足够大，重要信息不被遮挡。
|
||
|
||
**可访问性**：尽管是视觉为主的游戏，仍需提供基础的键盘操作支持，重要提示信息应配有文字说明，色彩对比度符合 WCAG 标准。
|
||
|
||
---
|
||
|
||
## 交付物说明
|
||
|
||
请生成完整的单一 HTML 文件代码，包含以下内容：
|
||
|
||
1. **完整的 HTML 结构**：语义化标签构建的游戏容器和 UI 界面
|
||
2. **精美的 CSS 样式**：符合上述视觉设计规范的样式定义，包含所有动画和过渡效果
|
||
3. **健壮的 JavaScript 逻辑**：实现完整的游戏功能，代码注释清晰，结构分明
|
||
4. **CDN 资源引入**：在文件头部正确引入所需的第三方库
|
||
5. **使用说明**：在页面某处或控制台输出简要的操作指南
|
||
|
||
---
|
||
|
||
## 评判标准（供测试参考）
|
||
|
||
评估生成代码时应关注以下维度：
|
||
|
||
**功能完整性**：游戏是否可正常运行？核心玩法是否都已实现？是否存在明显的逻辑漏洞或功能缺失？
|
||
|
||
**视觉表现力**：粒子效果是否精美？界面是否具有视觉冲击力？动画过渡是否流畅自然？是否有效利用了引入的图形库能力？
|
||
|
||
**代码质量**：代码结构是否清晰易读？是否有适当的错误处理？性能表现是否良好（可通过浏览器开发者工具监控）？
|
||
|
||
**创新亮点**：是否在基础需求之上增加了令人惊喜的创意元素？这些额外特性是否有效增强了用户体验？
|
||
|
||
---
|
||
|
||
请基于以上需求描述，生成一套完整的前端工程代码。 |