javascript - 如何让小车按路径行驶

Question

我是 Canvas 游戏开发的初学者，我制作了一个简单的汽车游戏，现在汽车可以以对 Angular 线运动向目标移动，如下所示:

var Car = (function(_super) {
    __extends(Car, _super);

    function Car(position, target) {
      if (target === void 0) {
        target = null;
      }
      var _this = _super.call(this) || this;
      _this.position = position;
      _this.target = target;
      _this.hitCount = 0;
      _this.image = GameImage.getImage("hero");
      _this.speed = 9;
      Car.all.push(_this);
      return _this;
    }
    var hitCount=0;
    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;
  }

所以现在我需要按顺序移动汽车(比如左转右转然后到达目标)。这是移动汽车的最简单方法，无需对现有模式进行太多更改。 如果需要额外代码我的 pen of game 如有任何帮助，我们将不胜感激。

Answer 1

路径点路径跟随

要添加路径点路径跟随，您需要创建一个可以添加到汽车对象的路径数组。

路径对象保存路径点。路点被添加到路径的末尾，要获取下一个路点，您可以通过检查 path.hasWayPoints 并调用 path.nextWayPoint 来检查是否有可用的路点可以提供一个目标位置对象 path.nextWayPoint(position) 或让它创建一个 constposition = path.nextWayPoint()

您将汽车移动到当前目标，关闭时检查另一个路径点，如果有，则将 target.position 设置为下一个路径点。如果没有路径点，请执行您通常在目标处执行的操作。

路径对象

const path = {
    points : null,
    hasWayPoints : false,
    addPoint (point) {
       this.points.push({x : point.x, y : point.y}); // copy point as object comes
                                                     // from unknown source.
       this.hasWayPoints = true;
       return this;
    },
    nextWayPoint (retPoint = {}) {
       var p;
       if (this.points.length > 0) {
          p = this.points.shift(); 
          retPoint.x = p.x;
          retPoint.y = p.y;
          this.hasWayPoints = this.points.length > 0;
       }
       return retPoint;
    }    
}


function createPath () {
     return Object.assign({}, path, {points : []});
}

使用路径对象

在创建汽车的地方添加路径对象

_this.path = createPath();
if (target !== null) {
    _this.path.addPoint(target.position);
}

您添加更多路径点，如下所示(有 _this 和 this 太糟糕了)

this.path.addPoint({x : 100, y : 200});

当汽车接近目标时

// your code line 446
if (distance(this.position, this.target.position) < 10 && this.image == GameImage.getImage("hero") ) {

检查是否有路径点

    if (this.path.hasWayPoints) {
        this.path.nextWayPoint(this.target.position);
    } else {
        // your code from 447 - 457
    }

我让您为汽车的下一个目标添加新的路径点。

这是向代码添加路径点路径跟踪的最小非侵入性方法。