10、利用Canvas和绘图API构建解缠游戏及进阶优化

利用Canvas和绘图API构建解缠游戏及进阶优化

1. 解缠游戏基础构建

在构建解缠游戏时，首先要处理线的相交问题。一般形式下的交点仅表明两条线不平行且会在某点相交，但不能保证该交点在两条线段上。例如，存在交点不在两条线段之间的情况，此时两条线段不相交；而当交点在两条线段之间时，两条线段相交。所以，需要一个名为 isInBetween 的函数来判断给定值是否在起始值和结束值之间，以此检查方程得出的交点是否在要检查的两条线段之间。在得到线的相交结果后，绘制粗线来表示相交的线。

接下来，为游戏添加逻辑，将其变为一个解缠谜题游戏。具体操作步骤如下：
1. 打开 index.html 文件，设置标题：

<header>
  <h1>Untangle Puzzle Game in Canvas</h1>
</header>

2. 在 canvas 元素后添加代码，显示当前级别和进度：

<p>Puzzle <span id="level">0</span>, Completeness: <span id="progress">0</span>%</p>

3. 打开 html5game