9、利用 Canvas 和绘图 API 构建解缠游戏

利用 Canvas 和绘图 API 构建解缠游戏

在本文中，我们将深入探讨如何使用 Canvas 和绘图 API 构建一个解缠游戏。我们会逐步介绍从绘制直线和圆形，到实现鼠标交互，再到检测线交叉的整个过程。

1. 在每个圆形之间绘制直线

要在每个圆形之间绘制直线，可按以下步骤操作：
1. 打开之前在绘制圆形示例中使用的 index.html 文件。
2. 将页面中“在 Canvas 中绘制圆形”的表述改为“在 Canvas 中绘制直线”。
3. 打开 html5games.untangle.js JavaScript 文件。
4. 在现有的绘制圆形代码基础上添加绘制直线的代码，将原代码替换为以下内容：

function Circle(x,y,radius){
  this.x = x;
  this.y = y;
  this.radius = radius;
}
function Line(startPoint,endpoint, thickness) {
  this.startPoint = startPoint;
  this.endPoint = endPoint;
  this.thickness = thickness;
}
var untangleGame = {
  circles: [],
  thinLineThickness: 1,
  lines: []
};
function drawLine(ctx, x1, y1, x2, y2, thickness) {    
  ctx.be