Builds a single-file web game …

# 单文件3D拼图游戏：量子拓扑环

设计思路

• 核心玩法：10块环形碎片（不同颜色/缺口角度）散落在场景中，玩家点选碎片，用鼠标拖动使其绕自身轴旋转，当角度与凹槽匹配时自动吸附到位并得分。
• 计分规则：一次对准得100分，用时越短加成越高；全部完成显示胜利面板。
• 视觉：深色太空背景+发光材质，吸附时高亮闪光。

完整代码（保存为 .html 直接打开）

```html

<!DOCTYPE html><html><head><meta charset="utf-8">

<title>量子拓扑环拼图</title>

<style>body{margin:0;overflow:hidden;background:#05060f;font-family:sans-serif}

#ui{position:fixed;top:10px;left:10px;color:#7df;user-select:none}

#win{position:fixed;inset:0;display:none;color:#fff;font-size:28px;

display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6)}</style>

</head><body>

<div id="ui">得分：<span id="sc">0</span> ｜ 时间：<span id="tm">0</span>s</div>

<div id="win" style="flex">🎉 完成！最终得分 <span id="fs"></span></div>

<script type="module">

import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';

const scene=new THREE.Scene();scene.background=new THREE.Color(0x05060f);

scene.add(new THREE.AmbientLight(0x334455));

const light=new THREE.PointLight(0xffffff,2);light.position.set(5,5,5);scene.add(light);

const cam=new THREE.PerspectiveCamera(55,innerWidth/innerHeight,.1,100);

cam.position.set(0,6,12);cam.lookAt(0,0,0);

const renderer=new THREE.WebGLRenderer({antialias:true});

renderer.setSize(innerWidth,innerHeight);document.body.appendChild(renderer.domElement);

// 中央目标：10个凹槽环

const slots=[],pieces=[],N=10,colors=[0xff4d4d,0xffa64d,0xffe84d,0x9dff4d,0x4dffa6,0x4de8ff,0x4d9dff,0x8a4dff,0xff4de8,0xff4d80];

for(let i=0;i<N;i++){

const a=i/N*Math.PI*2;

const s=new THREE.Mesh(new THREE.TorusGeometry(3+i*.25,.12,12,60),

new THREE.MeshBasi