【场景】：

由于 CodeTank 是一个 JS 的编程游戏，所以用户的代码都可以在 CodeTank 平台上执行，从而控制 tank 的个性化行为。

在 CodeTank 设计之初，主要需要实现的目标如下：

1. 自定义的坦克可以调用公用的 API，例如 fire，ahead 等控制坦克行为的 API。
2. 自定义的坦克可以实现自己的事件处理程序，在特定事件触发时提供自己的响应。
3. 自定义坦克管理属于自己的状态队列。

一、坦克结构组成：

坦克由三个基本部件组成：主体，炮管和雷达。

1. 主体：可进行移动或旋转动作。
2. 炮管：可进行旋转和开火动作，开火可控制子弹的能量范围。
3. 雷达：可进行旋转和探测敌人的动作。当坦克停止移动时，雷达会被关闭，玩家可以通过手动调用 scan方法开启雷达。

如果是涉及到游戏或动画的编程，我们很可能会用到几何变换。如果在大学过线性代数的话，我们就会知道，无论是 2d 还是 3d 的几何变换，矩阵都是实现线性变换的一个重要工具。任意线性变换都可以用矩阵表示为易于计算的一致形式，并且多个变换也可以很容易地通过矩阵的相乘连接在一起。

当我们进行游戏开发时，很多时候都需要用到一些几何知识，该文主要是抛砖引玉，通过一个 HTML5 的圈泡泡小游戏介绍下游戏开发中一些几何知识的运用。 游戏 demo 可以看这里：HTML5 圈泡泡小游戏 demo 游戏中一个最主要的操作就是通过鼠标的圈选，捕获选区内的小球并得分（或扣分）。我们一步步来分析这个操作。

Step1：画笔的形成。

首先是，怎样通过鼠标画出一个条条曲线？我们知道，HTML5 游戏的开发中，我们看到游戏里每个动作的更新，都是通过循环中每一帧对游戏元素属性的更新而形成的。因此我们只需要在每次帧更新的时候根据鼠标上一次更新时的位置与本次帧更新的位置画出一条线段，那么在游戏无数次的循环中，鼠标划过的位置就由 N 条线段连成一个轨迹，如果我们把线段都绘制出来，画布上就是一条条曲线或一个个圈。 因此我们也可以说，曲线是一条由多条线段首尾相连的线段组成的 。