一笔画 · One Stroke

🎮 在线试玩:https://clawbie.github.io/one-stroke/

一款网页端的「一笔画」触控解谜小游戏。在网格上画一条不抬手的线，水平/垂直正交连接，经过每个亮点恰好一次，连错了可原路退回撤销。

玩法本质是网格上的哈密顿路径问题。

玩法

• 画一条不抬手的线，经过棋盘上所有亮点
• 连线只能水平 / 垂直，不能斜向
• 每个点只能经过一次
• 连错了？原路退回即可撤销（松开手指后点走过的点也能回退）
• 部分关卡含方向限制格（紫色横/竖线）：经过该格时必须沿指定方向直行

特性

• 反向生成关卡：先构造合法路径再隐藏，保证每关都有解；Warnsdorff 贪心启发式加速生成（单关 ~6-9ms）
• 渐进难度：3×3 → 7×7，含障碍格、不规则棋盘、固定起点、方向限制格
• 选关：随时跳关测试
• 程序化音效：Web Audio API 合成，无需音频文件，可静音
• 卡关提示：高亮当前末尾的合法可走方向
• 深色主题 + 发光质感：呼吸脉冲、通关动画
• 进度本地保存（localStorage）

运行

纯原生 HTML / CSS / JS，无框架、无构建。

方式一（最简单）：双击 index.html 即可在浏览器中运行（file:// 可用）。

方式二（手机同 WiFi 访问）：

python3 -m http.server 8000
# 手机浏览器打开 http://<本机IP>:8000

项目结构

index.html        页面骨架（顶栏 + Canvas + 通关弹层）
styles.css        深色主题与界面质感
js/levels.js      难度阶梯 + configForLevel(index)
js/generator.js   关卡生成器 OS.generateLevel
js/audio.js       程序化音效 OS.SFX
js/game.js        渲染 / 交互 / 判定 / 进度 / 提示（主逻辑）
test/smoke.js     生成器冒烟测试：node test/smoke.js

测试

node test/smoke.js

覆盖前 30+ 关，校验每关解的合法性（无重复、正交连续、覆盖全部格、满足方向约束）。

技术栈

原生 HTML / CSS / JavaScript + Canvas 2D，Pointer Events 同时兼容鼠标与触摸。无任何运行时依赖。