Javascript 如何使汽车在道路上行驶

我正在用javascript开发一个动画，其中一辆汽车朝着一个人移动并拾取，但目前我只是沿着对角线方向行驶，而不是沿着下面代码的人

Car.prototype.main = function() {
      var angle = angleBetweenTwoPoints(this.target.position, this.position);
      var cos = Math.cos(degreeToRadian(angle)) * -1;
      var sin = Math.sin(degreeToRadian(angle));
      var _this = _super.call(this) || this;
      this.angle = angle;
      this.position.x += cos * this.speed;
      this.position.y -= sin * this.speed;
      if (distance(this.position, this.target.position) < 10 && this.image == GameImage.getImage("hero") ) {
        this.target.position.x = Math.random() * mainCanvas.width;
        this.target.position.y = Math.random() * mainCanvas.height;
        this.hitCount++;
        console.log(hitCount);
        ctx.fillText("points : " + hitCount, 32, 32);
         this.changeImage = true;
          _this.speed = 3;
        this.changeImageTime = Date.now() + 600; //0.5 sec from now.

        this.image = (this.image == GameImage.getImage("hero"))? GameImage.getImage("hero_other") : GameImage.getImage("hero");

      }

      if(this.changeImage){
      if(Date.now() > this.changeImageTime){
        this.changeImage = false;
        _this.speed = 9;
        this.image = (this.image == GameImage.getImage("hero_other"))? GameImage.getImage("hero") : GameImage.getImage("hero_other");
      }
    }


    };
    return Car;
  }(Actor));

Car.prototype.main=函数（）{
变量角度=两点之间的角度（this.target.position，this.position）；
var cos=数学cos（度弧度（角度））*-1；
var sin=数学sin（度弧度（角度））；
var _this=_super.call（this）| this；
这个角度=角度；
this.position.x+=cos*this.speed；
this.position.y-=sin*this.speed；
if（距离（this.position，this.target.position）<10&&this.image==GameImage.getImage（“英雄”））{
this.target.position.x=Math.random（）*maincavus.width；
this.target.position.y=Math.random（）*maincavas.height；
这个.hitCount++；
控制台日志（命中率）；
ctx.fillText（“点数：”+hitCount，32,32）；
this.changeImage=true；
_这个速度=3；
this.changeMageTime=Date.now（）+600；//0.5秒后。
this.image=（this.image==GameImage.getImage（“英雄”）？GameImage.getImage（“英雄”）：GameImage.getImage（“英雄”）；
}
if（this.changeImage）{
if（Date.now（）>this.changeMageTime）{
this.changeImage=false；
_这个速度=9；
this.image=（this.image==GameImage.getImage（“hero_other”）？GameImage.getImage（“hero”）：GameImage.getImage（“hero_other”）；
}
}
};
返回车；
}（演员）；

但是我想沿着一条路径走。当你点击图像时，我也创建了一些网格，它记录在控制台上，它是哪一个网格。但是我无法在路径中移动汽车。为了完全理解动画，我在

如有任何帮助，请排队等候。 对于航路点路径跟踪，您使用一种称为队列的数组类型。顾名思义，队列包含需要使用的项目，特别是它们需要按照到达的顺序使用。队列上的第一个对象是输出的第一个对象（除非按入队列）

在javascript中，使用数组很容易实现队列

const path = {
    points : [],
    currentPos : null,
    dist : 0,
    totalDistMoved : 0,
    atEnd : false,
    addPoint(x,y) { 
        if(this.currentPos === null){ 
           this.currentPos = { x :0,y : 0};
           this.dist = 0; 
           this.totalDistMoved = 0;
        }
        this.points.push({x,y}) ;
    },
    moveAlong(dist){
        if(dist > 0){
           if(this.points.length > 1){ 
              var x = this.points[1].x - this.points[0].x;
              var y = this.points[1].y - this.points[0].y;
              var len = Math.sqrt(x*x+y*y) ;
              if(len - this.dist < dist){  
                 this.points.shift(); 
                 dist -= (len - this.dist);
                 this.totalDistMoved += (len - this.dist);
                 this.dist = 0; 
                 this.moveAlong(dist); 
                 return;
              }
              const frac =  this.dist + dist / len;
              this.currentPos.x = this.points[0].x + x * frac;
              this.currentPos.y = this.points[0].y + y * frac;
              this.dist += dist;
              this.totalDistMoved += dist;
          }else{
              this.currentPos.x = this.points[0].x;
              this.currentPos.y = this.points[0].y;
              this.dist = 0;
              this.atEnd = true;
          }
        }
     }
  }

然后，为动画的每一步获得一段距离

 path.moveAlong(10); // move ten pixels

并使用当前位置

 ctx.drawImage(car,path.currentPos.x,path.currentPos.y);

你知道你已经走到了路的尽头

  if(path.atEnd) {
        // you have arrived
  }

任何时候，你都知道自己已经走了多远

  path.totalDistMoved       

这适用于仅向前播放的动画。它将忽略负距离，因为当您通过这些点时，它们会被丢弃

如果您希望重用路径对象，或者如果正在添加航路点，则需要进行一些修改

一个简单的例子。 物体以恒定的速度前进。单击页面以添加更多航路点

const ctx=canvas.getContext（“2d”）；
requestAnimationFrame（主循环）；
函数主循环（时间）{
gTime=！gTime？时间：gTime；
fTime=时间-gTime；
gTime=时间；
if（canvas.width！==innerWidth | | canvas.height！==innerHeight）{
canvas.width=内部宽度；
canvas.height=内部高度；
}否则{
setTransform（1,0,0,1,0,0）；
clearRect（0,0，canvas.width，canvas.height）；
}
如果（鼠标按钮）{
如果（！点）{
点={x:0，y:0}；
路径.添加点（点）；
}
point.x=mouse.x；
point.y=mouse.y；
}否则{
如果（点）{point=null}
}
ctx.beginPath（）；
var i=0；
而（i0）{
如果（this.points.length>1）{
var x=this.points[1].x-this.points[0].x；
var y=this.points[1].y-this.points[0].y；
var len=数学sqrt（x*x+y*y）；
如果（len-this.distAlong  path.totalDistMoved