Question

我是帆布游戏开发的初学者，我做了一个简单的汽车游戏，现在汽车可以像下面这样的对角线运动朝目标移动：

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来检查是否有可用的路径点，您可以提供目标位置对象{{1}或者让它创建一个path.nextWayPoint(position)

当你仔细检查另一个航路点时，你将汽车移动到当前目标，如果有一个设置了target.position到下一个航路点。如果没有方法可以做你通常在目标上做的事情。

路径对象

const position = path.nextWayPoint()

使用路径对象

在创建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 : []}); }的位置添加路径对象

Car

你添加了更多的航点，如下所示（对于_this和this这一点非常糟糕）

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

当this.path.addPoint({x : 100, y : 200});接近目标时

Car

检查是否有路点

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

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

这是在代码后面添加路径点路径的最小非侵入方式。

如何使汽车在一条路上行驶

1 个答案:

路径对象

使用路径对象