贪吃蛇身匀速运动模型

贪吃蛇身匀速运动模型

引用

CSDN

1.

https://m.blog.csdn.net/qq_52127701/article/details/146105653

在开发贪吃蛇游戏时，实现蛇身的匀速运动是一个关键的技术问题。本文将介绍一种基于数学模型的解决方案，包括通用运动模型和针对贪吃蛇游戏的简易版运动模型。

通用运动模型

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

从上图我们可以看到，需要求的就是mdx和mdy了。也就是md在x轴和y轴上的投影。我们可以简单思考确定物体移动方向的问题，夹角θ决定了物体移动的方向。其中，sinθ = dy/d，cosθ = dx/d，若要沿相同角度出发，即两次的θ相同，那么也应该有对应的sinθ2和cosθ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。