
## 工具的选择
之前做过几个小游戏，一开始想的比较简单，而做到最后发现，这种像素游戏需要顾及的细节太多了，各种各样的状态维护起来非常麻烦。所以这次我决定不再硬肝原生 JS，而是选用更加适合阅读和维护的 `Typescript`，然后用 webpack 打包应用程序。安装依赖组件如下：
```sh
yarn add webpack webpack-cli \
    webpack-dev-server \
    typescript ts-loader \
    css-loader style-loader \
    node-sass sass-loader \
    file-loader \
    copy-webpack-plugin
```

这样一来就比较齐全了，打包和构建都交给 webpack 就好。

## 项目的架构
应用的结构如下图所示，针对每一帧的刷新和各种元素渲染，我们把它抽象为一个`模型-视图模式`或称`观察者模式`。当画面刷新时，`Subject` 会发出信号，通知每一个 `Observer`，`Observer` 更新自己内部的状态，如果状态改变，就更新对应的 Canvas 视图。

![观察者模式](/images/post/2020-02-19/observer.png)  
【手动画图 (T_T)】

在上述核心概念的基础上，还要加一层 Action 抽象，用来控制游戏动画的开始，暂停和结束，它负责向 `Subject` 提供画面刷新的信息，具体实现就是将 [`AnimationFrame`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame) 每一帧的 timestamp 发送给 `Subject` 接口，以提供刷新的状态和时间。

```typescript
interface ActionInterface {
  isRunning: boolean;
  start(): void;
  pause(): void;
  stop(): void;
}
```

到这里已经完成了应用的大框架。总结一下就是，游戏中出现的蛇、食物等元素，都属于 `Observer`，它们控制各自的状态、渲染和销毁的过程；而 `Subject` 则负责告诉 `Observer` 什么时候去做这些事情。
```
问：那 Subject 怎么知道的什么时候去做呢？  
答：Action 通知它的啊【斜眼笑】。
```

其实也没那么简单，subject在收到action通知的同时，要去检查每个observer的状态变化，只允许那些状态变更的观察者进行渲染。

## 手柄的角度换算
为了确定蛇的转向角，首先需要计算出手指相对于手柄圆心的角度，在这里，我们已经知道了 `ontouchmove` 给出的手指坐标，和固定的圆心坐标，那么也就可以计算出对边 A 和邻边 B 的长度。如下图所示：

![计算角度](/images/post/2020-02-19/atan.jpg)  

进一步，我们利用反正切函数 `Math.atan` 求出弧度，在乘以 `(180 / PI)`，即可算出夹角 a 的度数。同理，位于不同象限的角度，只要在这一公式的基础上，分别加上固定的角度值即可得到。

## 蛇的转向
蛇的转向并不是手指转到哪里，蛇头就会跟着转（一开始在这个部分绕了好久的弯路），而是有一个转向的过程，我们将如上所述的手柄角度记录为蛇头的目标角度，然后在每一帧里，蛇头都会向这个目标角度做轻微转向，直到与目标角度重合。这样一来，蛇的转向就不会太过直接，而是变得比较圆滑。

还有一点是，当转向时，由于速度不够快，往往会拐一个很大的弯，而原版游戏转弯的幅度很小。解决办法就是，在转向的过程中加速，我设置的原速度为 2 像素，在转向时，需要变成原来的 3 倍速，这个数值的幅度刚好，游戏体验也不会因为加速而受到影响。

关于转向时的坐标计算，首先我们已经知道了当前这一帧的转向角度，那么我们用这一角度乘以弧度制（PI / 180），在用得到的数值分别做 cos 和 sin 计算，分别得到了 x 和 y 的基础差值，然后分别乘以当前的速度，就得到了下一个坐标的距离。
```typescript
const RADIAN = (Math.PI / 180);
const nextX = speed * Math.cos(angle * RADIAN) + x;
const nextY = speed * Math.sin(angle * RADIAN) + y;
```

## 蛇身运动
我们之前所说的转向、速度都是针对蛇头的，蛇身没有这些概念，实际上，蛇身是又一连串相同的圆环组成的队列，它们只是重复蛇头走过的路径而已。当蛇头移动时，会将每一帧的坐标 push 到一个队列中，蛇身从这个队列取出坐标，然后移动过去。当最后一截蛇身移动之后，就会将多余的坐标清除。

这一部分说起来简单，但做起来还是比较麻烦的，首先就是当我们增加一截蛇身时，它的初始化位置是不好确定的，因为最后一截蛇身已将后续的坐标清除了，所以没有坐标给新增的蛇身去跑，我的解决方案是，先将新增的一截蛇身转变为最后一截，与原来的最后一截坐标重合，但不移动；我们为这个蛇身设置一个 mask 数值，每一帧都减少这个 mask 值，当它变为 0 时才开始渲染和移动。这样，即连接了蛇尾，又可以将它渲染在正确的位置了。

## 蛇头的第一视角
第一视角这个点，由于没有经验，一开始完全陷入了懵逼状态，其实一旦转过弯来还是很简单的，有种恍然大悟的感觉。

只要在每一帧，将其他元素的 x，y 坐标减去蛇头 x，y 坐标的移动差值就行了。说起来很绕，就是本来蛇头应该往左走1像素，那现在我们让蛇头原地不动，将其他元素（蛇身、地图等）在自身移动的基础上额外往右移 1 像素就行了... 很智障吧哈哈哈哈。

## 蛇头的旋转
蛇头的原画是个 canvas 对象，我在初始化的时候用 canvas 圆圈画的，然后将它当成图片保存为变量，目的是避免每次都要渲染这么复杂的东西。虽然这样省了性能，但遇到一个问题，蛇头在转向的时候也应该旋转的，这个如何实现呢？

我的解决办法是利用一个离屏 canvas，将蛇头在那个canvas 上进行旋转，然后在将离屏 canvas 覆盖到原来蛇头的位置。如下图所示，我们先用 `translate` 将画布的坐标偏移到蛇头的圆心处，然后利用 `rotate` 方法进行旋转。

![旋转](/images/post/2020-02-19/transform.jpg)  

```javascript
const halfSize = SNAKE_SIZE / 2;
offscreenContext.translate(halfSize, halfSize);
offscreenContext.rotate(angle * RADIAN);
```

最后将离屏 canvas 的图像覆盖到蛇头的位置即可。

## 食物的碰撞检测
我定义的地图大小是 1200 X 1200，里面分布着固定 120 个食物点，如果不加优化，每一帧需要与蛇头做 120 次碰撞检测，这个计算量是惊人的，因为每一帧的间隔只有 16 毫秒，对性能影响很大（其实我在移动版 chrome 上测试过毫无卡顿，而其他任何浏览器都不行，google 大佬还是强啊）。

针对这个问题，我首先想到的是`四叉树`解决方案，但总觉得大材小用了，于是我采取了一个比较简单的做法：将地图纵向分割为 12 份，每份 100 像素，也就是12个以 x 坐标值为 key 的数组。

![碰撞](/images/post/2020-02-19/pengzhuang.jpg)  

将食物坐标分别保存在对应的数组中，每次移动时，首先算出蛇头位于地图的哪个部分（哪个数组中），看下面的公式：
```javascript
/** @var TREE_SIZE 地图所分成的份数（这里是 12） */
const key = Math.floor(x / TREE_SIZE) * TREE_SIZE;
```
之后还需要判断压线的情况，如果蛇头压线，那么就要将压到的那一侧也加入到碰撞检测的队伍中去。也就是，最坏情况下，可能需要检测 2 个数组中坐标（这种算法不太严谨，但很实用）。

## 总结
麻雀虽小，五脏俱全，看似很简单的一个小游戏，做到能玩的程度也需要运用各种技术，花费很大的经历，顿时对游戏开发者肃然起敬啊哈哈。


javascript连雨不知春去，一晴方觉夏深。

Canvas 小游戏【贪吃蛇大作战】的制作

制作 H5 小游戏【跳跃涂鸦】