javascript - JavaScript 多元素对象移动

Question

我试图移动具有不同车身元素及其属性的整个汽车对象，但所有元素都以不同的速度移动，而不是整辆车以一种速度移动。

对此的任何帮助都会很棒。

我还使用随机数值作为速度。

这是代码：

class Car {
  constructor(p) {
    //moving everything 
    this.direction = p.direction || 1;

    //wheel constructor
    this.x = p.x || 130;
    this.y = p.y || 160;
    this.wheelSize = p.wheelSize || 15;
    this.WHcolour = p.WHcolour || "black";

    //body constructor
    this.carW = p.carW || 130;
    this.carH = p.carH || 50;
    this.Ccolour = p.Ccolour || "red";
    //window constructor 
    this.windowW = p.windowW || 25;
    this.windowH = p.windowH || 15;
    this.Wcolour = p.Wcolour || "blue";

    //car number 
    this.carNum = p.carNum || 1;
  }
  
  draw() {
    //draw wheel 1
    cxt.beginPath();
    cxt.arc(this.x, this.y, this.wheelSize, 0, 2 * Math.PI);
    cxt.fillStyle = this.WHcolour;
    cxt.fill();
    //draw wheel 2
    cxt.beginPath();

    cxt.arc(this.x * 1.8, this.y, this.wheelSize, 0, 2 * Math.PI);
    cxt.fillStyle = this.WHcolour;
    cxt.fill();
    //draw body 
    cxt.beginPath();
    cxt.rect(this.x * 0.9, this.y * 0.65, this.carW, this.carH);
    cxt.fillStyle = this.Ccolour
    cxt.fill();
    //draw window1  
    cxt.beginPath();
    cxt.rect(this.x * 1.615, this.y * 0.69, this.windowW, this.windowH);
    cxt.fillStyle = this.Wcolour;
    cxt.fill();
    //draw window 2
    cxt.beginPath();
    cxt.rect(this.x * 1.0461, this.y * 0.69, this.windowW * 2.4, this.windowH);
    cxt.fillStyle = this.Wcolour;
    cxt.fill();
  }

  move() {
    //velocity increasment
    //wheels
    this.x += this.direction;
    //body
  }
}

function createCar() {
  while (cars.length < 1) {
    let c = new Car({
      //wheels
      WHcolour: "black",
      x: 130, y: 160, wheelSize: 15,
      //body
      carW: 130, carH: 50, Ccolour: "yellow",
      //windows
      windowW: 25, windowH: 15, Wcolour: "blue",
      //car number 
      carNum: 1,
    });
    cars.push(c)
  }
}

标签： javascripthtml5-canvas

Answer 1

您不能在运动的同一轴上进行乘法运算，您可以通过添加偏移量使零件彼此相对，因为您构建更复杂的对象乘法运算可用于您将从汽车发射的东西，例如火箭将相对于汽车的位置加速。

这是你的代码工作

class Car {
  constructor(p) {
    //moving everything 
    this.direction = p.direction || 1;

    //wheel constructor
    this.x = p.x || 130;
    this.y = p.y || 160;
    this.wheelSize = p.wheelSize || 15;
    this.WHcolour = p.WHcolour || "black";

    //body constructor
    this.carW = p.carW || 130;
    this.carH = p.carH || 50;
    this.Ccolour = p.Ccolour || "red";
    //window constructor 
    this.windowW = p.windowW || 25;
    this.windowH = p.windowH || 15;
    this.Wcolour = p.Wcolour || "blue";

    //car number 
    this.carNum = p.carNum || 1;
  }
  
  draw() {
    //draw wheel 1
    cxt.beginPath();
    cxt.arc(this.x, this.y, this.wheelSize, 0, 2 * Math.PI);
    cxt.fillStyle = this.WHcolour;
    cxt.fill();
    //draw wheel 2
    cxt.beginPath();
    cxt.arc(this.x + 90, this.y, this.wheelSize, 0, 2 * Math.PI);
    cxt.fillStyle = this.WHcolour;
    cxt.fill();
    //draw body 
    cxt.beginPath();
    cxt.rect(this.x - 20 , this.y * 0.65, this.carW, this.carH);
    cxt.fillStyle = this.Ccolour
    cxt.fill();
    //draw window1  
    cxt.beginPath();
    cxt.rect(this.x + 70, this.y * 0.69, this.windowW, this.windowH);
    cxt.fillStyle = this.Wcolour;
    cxt.fill();
    //draw window 2
    cxt.beginPath();
    cxt.rect(this.x - 10, this.y * 0.69, this.windowW * 2.4, this.windowH);
    cxt.fillStyle = this.Wcolour;
    cxt.fill();
  }

  move() {
    //velocity increasment
    //wheels
    this.x += this.direction;
    //body
  }
}

function createCar() {
  while (cars.length < 1) {
    let c = new Car({
      //wheels
      WHcolour: "black",
      x: 130, y: 160, wheelSize: 15,
      //body
      carW: 130, carH: 50, Ccolour: "yellow",
      //windows
      windowW: 25, windowH: 15, Wcolour: "blue",
      //car number 
      carNum: 1,
    });
    cars.push(c)
  }
}

function move() {
  cxt.clearRect(0,0, 800,800)
  for (i = 0; i < cars.length; i++) {
    cars[i].draw()
    cars[i].move()
  }
}

let canvas = document.createElement("canvas");
canvas.width = canvas.height = 800;
let cxt = canvas.getContext('2d');
document.body.appendChild(canvas);

var cars = []
createCar()
setInterval(move, 100);