Spielbewegung
Mit der neuen Art, Komponenten zu zeichnen, die im Kapitel Spielrotation erklärt wird, sind die Bewegungen flexibler.
Wie bewegt man Objekte?
Fügen Sie speeddem Konstruktor eine Eigenschaft componenthinzu, die die aktuelle Geschwindigkeit der Komponente darstellt.
Nehmen Sie auch einige Änderungen an der newPos()Methode vor, um die Position der Komponente basierend auf speedund zu berechnen angle.
Standardmäßig zeigen die Komponenten nach oben, und wenn Sie die Geschwindigkeitseigenschaft auf 1 setzen, beginnt die Komponente, sich vorwärts zu bewegen.
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);
}
}
Kurven machen
Wir wollen auch links und rechts abbiegen können. Erstellen Sie eine neue Eigenschaft namens moveAngle, die den aktuellen Bewegungswert oder Rotationswinkel angibt. In der newPos()Methode berechnen Sie die
anglebasierend auf der moveAngleEigenschaft:
Beispiel
Setzen Sie die Eigenschaft 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);
}
}
Verwenden Sie die Tastatur
Wie bewegt sich das rote Quadrat bei Verwendung der Tastatur? Anstatt sich nach oben und unten und von einer Seite zur anderen zu bewegen, bewegt sich das rote Quadrat vorwärts, wenn Sie den Pfeil nach oben verwenden, und dreht sich nach links und rechts, wenn Sie die Pfeile nach links und rechts drücken.