同一個問題，不只一種答案。

請使用 HTML 前端技術，製作一個模擬太陽系的網頁，相關程式請集中在一個 html 檔案內

製作一個單頁式的HTML，內容是模擬地球與月球運行的系統，要使用前端的3D技術來製作

Create a single-page HTML that dynamically demonstrates, in 3D, the most common model of a black hole in outer space. Simulate the motion trajectories of other celestial bodies under its gravitational influence. Add a feature that allows the user to launch an object toward the black hole, showing how the object moves and is affected as it approaches. Simulate gravitational interactions and physical behavior between the black hole and celestial bodies so that users can intuitively observe the dynamic demonstration.

Please follow these principles:
- Begin with a concise checklist (3-7 bullets) of what you will do; only describe conceptual steps.
- After each major technical implementation or interaction design step, briefly verify the result and decide whether to self-correct.
- If you need to import external 3D rendering tools (such as three.js), first give a short explanation of their purpose and necessary parameters.
- If there are insurmountable technical limitations, clearly state them and suggest alternative approaches.

Use a design style with a strong cyberpunk tech aesthetic to create a front-end single-page HTML website that simulates the interface and functions of a communication app (such as a chat application). Only front-end display and interactions are required, no back-end support.

Before starting, provide a concise checklist (3-7 items) outlining the main subtasks to be completed, then proceed to actually design and implement the page. After completing each step, perform a self-check of the results; if there are issues, immediately fix them before continuing.

You are a senior web game engineer. Build a playable First-Person Shooter (FPS) MVP using Three.js, inspired by the feel of modern military FPS games, but do not use any copyrighted names, characters, maps, or assets. Use only original/simple visuals (solid colors, primitives) and minimal placeholder audio.

## Core Constraint

* Deliver everything in ONE single HTML file (including all JavaScript and CSS inside the same file).
* No external assets (no textures/models/sounds). If you need audio, generate simple tones via WebAudio.
* You may load Three.js via CDN import (module) or include it inline if you prefer, but the final deliverable must still be a single HTML file.

## MVP Goals (Must Be Playable)

### 1) First-person controls

* Pointer Lock mouse look (yaw/pitch with pitch clamp)
* WASD movement, Shift sprint, Space jump
* Gravity + ground detection
* Basic collision (player capsule/box vs level boxes/AABBs; no heavy physics engine)
* Sprint FOV kick (slight FOV increase while sprinting)

### 2) Weapon + shooting

* Left-click shoots (semi-auto is fine; optional full-auto)
* Hitscan using Raycaster
* Recoil (small camera kick + weapon sway/bob)
* Minimal muzzle flash (sprite/particle) + hit spark + simple bullet hole mark (can be simplified)
* Ammo system: magazine + reserve ammo, R to reload (reload time, simple tween-based animation)
* HUD: crosshair, ammo, health

### 3) Enemy AI (minimum fun)

* Spawn 5–10 enemies (capsules/boxes)
* Simple finite state machine: Patrol → Chase → Attack → Dead
* Vision/range detection
* Enemies can shoot back (hitscan or simple projectiles)
* Damage + death feedback (color flash, shrink/fall, etc.)

### 4) Level + interaction

* Small training arena built from primitives: floor, walls, cover boxes, ramps/platforms
* Collision & bounds (no walking through walls; no falling out of the world)
* Optional: pickups (health/ammo)

### 5) Systems & quality

* Target 60 FPS: keep it lightweight (limit shadows, simple geometry, reuse objects)
* Centralized tunables (player speed, recoil, AI vision, etc.)
* Restart/reset flow (if player dies or falls out of bounds, press a key to reset)

## Architecture Requirement (within one HTML)

Even though it is a single HTML file, structure the code clearly using sections/classes:

* Config (tunable constants)
* Core (renderer, scene, main loop, timing)
* World (level builder, collision shapes)
* Player (controller, camera, movement, collision)
* Weapons (ammo, recoil, fire logic, FX)
* AI (enemy entity + FSM)
* UI (HUD update)
  Keep functions small and readable; avoid a monolithic 1000-line function.

## Deliverables

1. A single runnable HTML file (copy/paste into index.html and open).
2. At the top of the HTML, include a short README comment:

   * How to run
   * Key bindings
   * Feature checklist
3. Implement in phases in your output (but still culminating in one final HTML):

   * Phase 1: scene + pointer lock + movement
   * Phase 2: gravity + jump + collision
   * Phase 3: weapon + shooting + HUD
   * Phase 4: enemy AI + damage/death
   * Phase 5: polish (sprint FOV, recoil feel, FX, reset)

## Acceptance Criteria (Must Pass All)

* Mouse locks and look works; WASD moves; Shift sprints; Space jumps
* Left click shoots and damages enemies; enemies chase and attack back
* HUD shows crosshair/ammo/health; R reload works
* Player cannot pass through walls/boxes; falling out triggers reset or respawn

## Output Format

* Output ONLY the final single HTML in one code block.
* No TODOs that prevent running.
* Ensure it runs in a modern browser without additional build steps.