Hauptinhalt
Programmierung
Kurs: Programmierung > Lerneinheit 4
Lesson 4: Einen Seitenscroller machen: Hüpfender BiberKollisionen mit Ästen
Nun haben wir schon einen hüpfenden Biber und die angezeigten Äste. Es muss nur noch beides zusammenkommen. Wir würden gern wissen, wenn ein Biber es schafft, genau auf einen Ast zu springen, um dies als erfolgreich gesammelten Ast zu zählen. Wir müssen als für die beiden Objekte eine einfache Kollisionsprüfung durchführen. Wir können diese Funktionalität an verschiedenen Orten programmieren. Da sie zwei Objekte verwendet entweder als globale Funktion, als Methode auf dem Ast-Objekt, oder als Methode auf dem Biber-Objekt. Bleiben wir erst mal beim Biber:
Beaver.prototype.checkForStickGrab = function(stick) {
// wenn Biber auf Ast, tu etwas
};In dieser Funktion müssen wir zuerst eine Bedingung schreiben, die wahr ist, wenn der Biber und der Ast kollidieren, und ansonsten falsch. Wir können dies komplex oder strikt umsetzen, zum Beispiel abhängig von der Position der Hand des Bibers, aber halten wir es erstmal ganz einfach. Sie sollten kollidieren wenn:
- Die zentrale x-Position des Astes zwischen den zwei Seiten des Bibers liegt.
- Die zentrale y-Position des Astes zwischen der Ober- und der Unterseite des Bibers liegt.
Der Ast wird mithilfe des Befehls
rect gezeichnet, was üblicherweise bedeutet, dass seine Eigenschaften für x und y seine Koordinaten für die linke obere Ecke darstellen. Um jedoch unsere Kollisionsberechnung zu vereinfachen, können wir auf einen Modus umschalten, bei dem das rect von der Mitte aus gezeichnet wird.rectMode(CENTER);
rect(this.x, this.y, 5, 40);Das Bild für den Biber wird auch standardmäßig von der linken oberen Ecke aus gezeichnet, aber wir bleiben bei diesem Modus, weil unsere Berechnungen damit gut funktionieren. Um die erste Bedingung für die x-Position zu prüfen, können wir folgende Prüfung durchführen, bei der bestimmt wird, ob stick.x größer oder gleich der linken Seite (x) des Bibers und kleiner oder gleich der rechten Seite (x + 40) des Bibers ist.
stick.x >= this.x && stick.x <= (this.x + 40)Um die y-Position zu prüfen, können wir eine ähnliche Prüfung durchführen, bei der wir erfahren, ob stick.y größer oder gleich der Oberseite des Bibers (y) und kleiner oder gleich der Unterseite des Bibers (y + 40) ist.
stick.y >= this.y && stick.y <= (this.y + 40)Nun, was sollen wir eigentlich tun, wenn wir eine Kollision zwischen dem Biber und dem Ast erkannt haben? Wir wollen den Ast vom Bildschirm entfernen, um weitere Kollisionen zu verhindern. Eine einfache Art, dies zu tun, ist den Ast vom Bildschirm zu schieben, indem seine y-Koordinate geändert wird.
stick.y = -400;Gleichzeitig wollen wir speichern, wie viele Äste der Biber "geschnappt" hat, wir wollen also die interne "sticks"-Eigenschaft heraufzählen:
this.sticks++;Am Ende müssen wir diese Methode zum richtigen Zeitpunkt aufrufen. Vielleicht immer direkt, nachdem wir jeden Ast zeichnen?
for (var i = 0; i < sticks.length; i++) {
sticks[i].draw();
beaver.checkForStickGrab(sticks[i]);
sticks[i].x -= 1;
}Hier ist das komplette Programm. Schau es dir an, wenn du über die Äste springst, verschwinden sie!
Willst du an der Diskussion teilnehmen?
Noch keine Beiträge.