Spiel-Bewegung

Durch die Nutzung der neuen Methode zur Zeichnung von Komponenten, die im Kapitel 'Spielrotation' erläutert wird, wird die Bewegung jetzt flexibler.

Wie bewegt man ein Objekt?

in component eine Geschwindigkeit Attribut, das die aktuelle Geschwindigkeit des Komponenten darstellt, zu ändern.

und newPos() Methoden geändert werden, um Geschwindigkeit und Winkel berechnet werden, um die Position des Komponenten zu bestimmen.

Standardmäßig ist das Komponentengesicht nach oben gerichtet, indem Geschwindigkeit Attribut auf 1 gesetzt wird, beginnt das Komponent beginnt mit dem Vorwärtsbewegung.

Beispiel

function component(width, height, color, x, y) {
  this.gamearea = gamearea;
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.speed = 1;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  }
  this.newPos = function() {
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  }
}

Probieren Sie es selbst aus

Wenden

Wir hoffen auch, dass wir links und rechts drehen können. Erstellen Sie eine Funktion namens moveAngle neuen Attribut, das die aktuelle Bewegungs- oder Drehwinkelwerte anzeigt. In newPos() in der Methode moveAngle Berechnung Winkel:

Beispiel

Setzen Sie den Attribut moveangle auf 1 und sehen Sie, was passiert:

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.moveAngle = 1;
  this.speed = 1;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  }
  this.newPos = function() {
    this.angle += this.moveAngle * Math.PI / 180;
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  }
}

Probieren Sie es selbst aus

Verwenden Sie die Tastatur

Wie bewegt sich der rote Block, wenn man die Tastatur verwendet? Wenn Sie den Pfeil 'Hoch' verwenden, bewegt sich der rote Block nicht nach oben und unten, sondern bewegt sich von einer Seite zur anderen und bewegt sich nach vorne, und dreht sich links und rechts, wenn Sie die Pfeiltasten 'Links' und 'Rechts' verwenden.

Beispiel

Probieren Sie es selbst aus

Stellen Sie sicher, dass das Spielareal fokussiert ist, und verwenden Sie dann die Pfeiltasten, um den roten Block zu bewegen.