拼图挑战 (Puzzle Challenge)

创作故事

拼图挑战 v2 是一款真正的拖拽式拼图游戏。碎片散落在桌面上，你需要将它们拖拽到正确位置，靠近目标时自动吸附入位，伴随清脆的音效和触感反馈。

游戏使用 Pointer Events 统一处理鼠标和触控输入，支持捏合缩放、拖拽平移，在手机和电脑上都有流畅的体验。大网格下自动显示小地图辅助导航。

难度等级

阶段	关卡	网格	总格数
入门	1-2	2×2 ~ 3×3	4 ~ 9
初级	3-4	4×4 ~ 5×5	16 ~ 25
中级	5-6	6×6 ~ 8×8	36 ~ 64
高级	7-8	10×10 ~ 12×12	100 ~ 144
专家	9-10	15×15 ~ 20×20	225 ~ 400
大师	11-12	25×25 ~ 30×30	625 ~ 900
传说	13	40×40	1,600
终极	14	50×50	2,500

核心玩法

• 拖拽放置: 点击/触摸碎片拖拽到目标位置
• 磁吸吸附: 靠近正确位置时自动吸附，伴随音效和震动
• 散件桌面: 碎片随机散落在拼图区域周围
• 半透明底图: 可开启参考底图辅助拼图
• 预览窗口: 右上角显示完整原图
• 小地图: 大网格下自动显示，点击快速导航

操作指南

操作	电脑	手机
拖拽碎片	鼠标按住拖动	单指按住拖动
平移画布	拖拽空白处	单指拖空白处
缩放	鼠标滚轮	双指捏合
适配屏幕	点击”适配”按钮	点击”适配”按钮

技术细节

• 渲染: Canvas 2D，视口裁剪优化
• 输入: Pointer Events 统一鼠标/触控/手写笔
• 吸附: 距离阈值检测 + 缩放弹跳动画
• 音效: Web Audio API 合成吸附音和胜利音
• 震动: navigator.vibrate 触感反馈
• 适配: 响应式布局 + devicePixelRatio 高清渲染
• 文件: 单文件 HTML，约 500 行代码