通用运动模型

我们已知斜线为移动的距离$d$，$x$轴总偏移量为$dx$，$y$轴总偏移量为$dy$，在一帧当中，我们也知道能走的距离为$md$。那么作为一般的运动模型，该如何确定我们进行移动的方向呢？需要向夹角$\theta$的方向移动，这样我们移动的所有点都在直角三角形的斜边上，这是一个正确的移动模式。

从上图我们可以看到，需要求的就是$mdx$和$mdy$了。也就是$md$在$x$轴和$y$轴上的投影。我们可以简单思考确定物体移动方向的问题，夹角$\theta$决定了物体移动的方向。其中，$sin\theta =dy/d$，$cos\theta =dx/d$，若要沿相同角度出发，即两次的$\theta$相同，那么也应该有对应的$sin{\theta }_2$和$cos{\theta }_2$。
整个过程就是从结果反推过程：

1. 一个点是如何移动到目标位置的呢？向$theta$方向移动$md$。
2. 如何达到$md$呢？先朝$x$轴走一点，再朝$y$轴走一点。
3. 朝$x、y$走多少呢？具体计算…

简易版运动模型

当然，这是一个通用的运动模型，即在物体运动的动作空间为连续（360度随便走）时和离散时（如本项目：上右下左）都适用。我们可以想到，当我们的贪吃蛇向右走时，其实只有$y$轴（标准坐标系，非canvas）有移动，因此我们要移动的总距离$d$和每一帧移动距离$md$都只会分配到$y$轴上，该公式理论上恒成立$dy/d=1$（具体计算中可能有浮点数精度问题）。

有了这个想法，我们就可以实现一个仅适用本项目的离散版本的。

  update_move() {
    const distance = Math.sqrt(dx * dx + dy * dy);
    if (distance < this.eps) {
      this.cells[0] = this.next_cell;
      this.next_cell = null;
      this.status = "idle";
      this.direction = -1;

      if (!this.check_tail_increasing()) {
        this.cells.pop();
      }
    } else {
      const move_distance = this.speed * this.timedelta / 1000; 
      // 设置snake0
      if (this.id === 0) {
        if (this.direction === 0) this.cells[0].y -= move_distance;
        else if (this.direction === 1) this.cells[0].x += move_distance;
        else if (this.direction === 2) this.cells[0].y += move_distance;
        else if (this.direction === 3) this.cells[0].x -= move_distance;
      }
      // 设置snake1
      if (this.id === 1) {
        if (this.direction === 0) this.cells[0].y -= move_distance;
        else if (this.direction === 1) this.cells[0].x += move_distance;
        else if (this.direction === 2) this.cells[0].y += move_distance
        else if (this.direction === 3) this.cells[0].x -= move_distance;
      }
    }
  }

这段代码就是如果当前为移动状态，每一帧刷新时直接根据获取的direction添加固定方向的偏移量。注意上面是渲染cell，因此$(x,y)$会变成$(y,x)$因此当动作为$0$（向上）时，我们要给$y$减去偏移量而不是$x$。