Hauptinhalt
Kurs: Programmierung > Lerneinheit 4
Lektion 4: Einen Seitenscroller machen: Hüpfender BiberBiber-Zeichen
Zuerst bauen wir unseren Charakter, den hüpfenden Biber. Wir benutzen für die Beschreibung des Bibers objektorientiertes Design, wie in diesem Tutorial erklärt.
Wenn wir einen Spielcharakter erschaffen, sollten wir darüber nachdenken, welche Eigenschaften und Verhaltensweisen er haben sollte. Zum Beispiel sollte unser Biber seine Position x und y und die Anzahl der gesammelten Äste, der sticks, verfolgen können. Er braucht also zwei Verhaltensweisen: hop, bei dem er ein kleines Stück nach oben springt, und fall, bei dem er ein kleines Stück nach unten fällt.
So könnte dies als Objekt aussehen:
Dieses Programm ist allerdings nicht so gut darin, die verschiedenen Verhaltensweisen zu prüfen. Da es nicht animiert ist, können wir den Biber nur in einem Daseinszustand sehen. Fügen wir eine Funktion
draw
hinzu, damit wir den Biber abhängig von der Benutzerinteraktion verschiedene Dinge tun lassen können. Bei diesem Spiel wollen wir, dass der Biber immer dann springt, wenn der Benutzer die Leertaste drückt. Dies kann relativ einfach umgesetzt werden:draw = function() {
background(255, 255, 255);
if (keyIsPressed && key.code === 32) {
beaver.hop();
} else {
beaver.fall();
}
beaver.draw();
};
Dieser Code wirkt ziemlich effektiv. Wenn wir ihn aber ausführen würden, müssten wir ständig unsere Leertaste drücken, um zu verhindern, dass der Biber vom Canvas fällt und für immer verschwindet. Wir sollten die y-Werte auf einen vernünftigen Wert beschränken, um den Biber auf dem Bildschirm zu halten. Üblicherweise macht man das in Spielen, um die Charaktere in der "Spielwelt" zu halten. Wir könnten dies tun, indem wir innerhalb der Funktion "draw" den Befehl
constrain
mit einem entsprechenden min und max verwenden. this.y = constrain(this.y, 0, height-50);
Hier ist nun unser Programm mit einem Leertaste-gesteuerten hüpfenden und fallenden Biber. Spiel ein bisschen damit!
Willst du an der Diskussion teilnehmen?
Noch keine Beiträge.