Mit der neuen Art und Weise der Zeichnung Komponenten, erklärt im Spiel Rotation Kapitel sind die Bewegungen flexibler.
Wie Objekte verschieben?
Hinzufügen einer speed Eigenschaft auf die component Konstruktors, die die aktuelle Geschwindigkeit des Bauteils darstellt.
Sind auch einige Änderungen in der newPos() Methode, um die Position des Bauteils zu berechnen, basierend auf speed und angle .
Standardmäßig werden mit Blick auf die Komponenten nach oben und durch die Geschwindigkeit Eigenschaft auf 1 gesetzt wird, wird die Komponente Start vorwärts bewegt.
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);
}
}
Versuch es selber " Herstellung Turns
Wir wollen auch in der Lage sein, nach links und nach rechts abzubiegen machen. Machen Sie eine neue Eigenschaft namens moveAngle , die den aktuellen Bewegungswert oder Drehwinkel anzeigt. In den newPos() Methode berechnen den angle auf der Grundlage der moveAngle Eigenschaft:
Beispiel
Stellen Sie die moveangle Eigenschaft auf 1, und sehen, 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);
}
}
Versuch es selber " Verwenden Sie die Tastatur
Wie bewegt sich das rote Quadrat, wenn die Tastatur? Statt nach oben und unten und von einer Seite zur anderen bewegt sich der rote Platz nach vorne , wenn Sie die Verwendung "up" nach "up" Pfeil und biegt nach links und rechts , wenn die Pfeile links und rechts drücken.