Creates an educational link-ba…

# 力导向图逻辑谜题网页设计方案

一、玩法设计

• 核心规则：每关10个节点（部分为固定锚点，部分为自由点），玩家拖动节点，使“连线约束”全部满足后通关。
• 约束类型（由易到难组合）：
• 连线长度 ≈ 目标区间
• 两点间距离必须大于/小于某值
• 节点与固定锚点对齐（同水平/垂直）
• 图形角度约束（某夹角为直角等）
• 力导向原理：将约束转化为弹簧力（目标长度）、斥力（最小距离）、引力（对齐），物理模拟自动辅助拖拽，增加“手感”。

二、技术架构

• 纯前端单页应用，无需后端，适合 GitHub Pages。
• 文件结构：
• index.html（页面骨架）
• style.css（样式）
• physics.js（力模拟：Verlet积分或简单欧拉积分）
• levels.js（20关数据，声明式JSON）
• main.js（渲染+交互+判定）
• 渲染：优先用 Canvas（性能好）；也可用 SVG（方便事件绑定，10节点规模无压力）。
• 关卡数据示例：

```js

{

id: 1,

nodes: [{x,y,fixed}, ...], // 共10个

edges: [{a:0,b:1,range:[80,120]}, ...],

hint: "让所有红线长度接近100",

win: "constraints.length === 0"

}

```

三、交互与反馈

• 拖拽：鼠标/触摸双支持，拖动时该点受力暂停，松手后物理回弹。
• 实时反馈：满足的约束变绿，未满足的红色闪烁。
• 通关判定：所有约束满足且系统稳定（速度低于阈值）持续约0.5秒。
• 辅助：提示按钮、重置按钮、通关星级（按用时/重置次数）。

四、20关难度曲线

• 第1–5关：仅长度约束，3–4条边，教学引导。
• 第6–10关：加入最小距离/对齐约束。
• 第11–15关：混合约束+更多固定锚点。
• 第16–20关：角度约束+干扰约束（满足A会破坏B），需多步规划。

五、发布到 GitHub Pages

1. 创建仓库，将文件推送到 main 分支（或 gh-pages 分支）。

2. 仓库 Settings → Pages → 选择分支和根目录。

3. 访问 https://用户名.github.io/仓库名/ 即可玩。

4. 建议添加：移动端viewport适配、README使用说明。

六、注意事项

• 教学场景建议关闭外部依赖（不引CDN），全部本地文件，防校园网络问题。
• 10节点/关的规模性能完全没问题，物理迭代建议每帧4–8次。
• 关卡数据可由教师自行编辑JSON扩展难度。