一笔画是图论科普中一个著名的问题，它起源于柯尼斯堡七桥问题科普。数学家欧拉在他1736年发表的论文《柯尼斯堡的七桥》中不仅解决了七桥问题，也提出了一笔画定理，顺带解决了一笔画问题。用图论的术语来说，对于一个给定的连通图科普存在一条恰好包含所有线段并且没有重复的路径，这条路径就是「一笔画」。

寻找连通图这条路径的过程就是「一笔画」的游戏过程，如下：

一笔画

游戏的实现

「一笔画」的实现不复杂，笔者把实现过程分成两步：

  1. 底图绘制
  2. 交互绘制

「底图绘制」把连通图以「点线」的形式显示在画布上，是游戏最容易实现的部分；「交互绘制」是用户绘制解题路径的过程，这个过程会主要是处理点与点动态成线的逻辑。

底图绘制

「一笔画」是多关卡的游戏模式，笔者决定把关卡（连通图）的定制以一个配置接口的形式对外暴露。对外暴露关卡接口需要有一套描述连通图形状的规范，而在笔者面前有两个选项：

  • 点记法
  • 线记法

举个连通图 —— 五角星为例来说一下这两个选项。

五角星

点记法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
levels: [
	// 当前关卡
	{
        
		name: "五角星",
		coords: [
			{
        x: Ax, y: Ay},
			{
        x: Bx, y: By},
			{
        x: Cx, y: Cy},
			{
        x: Dx, y: Dy},
			{
        x: Ex, y: Ey},
			{
        x: Ax, y: Ay}
		]
	}
	...
]

线记法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
 
levels: [
	// 当前关卡
	{
        
		name: "五角星",
		lines: [
			{
        x1: Ax, y1: Ay, x2: Bx, y2: By},
			{
        x1: Bx, y1: By, x2: Cx, y2: Cy},
			{
        x1: Cx, y1: Cy, x2: Dx, y2: Dy},
			{
        x1: Dx, y1: Dy, x2: Ex, y2: Ey},
			{
        x1: Ex, y1: Ey, x2: Ax, y2: Ay}
		]
	}
]

「点记法」记录关卡通关的一个答案，即端点要按一定的顺序存放到数组 coords中，它是有序性的记录。「线记法」通过两点描述连通图的线段，它是无序的记录。「点记法」最大的优势是表现更简洁，但它必须记录一个通关答案，笔者只是关卡的搬运工不是关卡创造者，所以笔者最终选择了「线记法」。：）

交互绘制

在画布上绘