If you're seeing this message, it means we're having trouble loading external resources on our website.

Wenn du hinter einem Webfilter bist, stelle sicher, dass die Domänen *. kastatic.org und *. kasandbox.org nicht blockiert sind.

Hauptinhalt

Waldgebiet

Dieses Spiel ist ein klassischer "Side-Scroller" in 2D. Dies bedeutet, dass wir von der Seite darauf schauen und der Charakter sich nur vorwärts oder seitwärts durch das Spiel bewegen kann. Wir wollen unseren Charakter aber immer in der Mitte des Bildschirms sehen. Daher simulieren wir die sichtbare Bewegung des Charakters, indem wir in Wirklichkeit den Hintergrund am Charakter vorbei bewegen. Es ist ein Trick, aber es funktioniert!
Zu Beginn zeichnen wir einfach die Teile, die sich nicht bewegen werden, also den blauen Himmel und den braunen Grund:
draw = function() {
    background(227, 254, 255);
    fill(130, 79, 43);
    rect(0, height*0{,}90, width, height*0{,}10);
    // ...
}
Um nun das Side-Scrolling umzusetzen, fügen wir Gras hinzu, indem wir das Bild für Gras aus der Bilder-Bibliothek verwenden. Eine Möglichkeit, die bewegte Umgebung zu erschaffen, ist so zu tun, als wäre unser Canvas 3000 Pixel breit (also so breit wie unser ganzes Level), dann so viele Grasblöcke zu zeichnen, dass sie 3000 Pixel füllen, und sie jedes Mal weiterzubewegen. Das wäre allerdings nicht sehr effizient, und Effizienz ist uns bei der Spieleprogrammierung sehr wichtig. Stattdessen werden wir die Gras-Images als "Kacheln" benutzen, die immer wieder nahtlos aneinandergelegt werden. Wir zeichnen nur so viele, wie wir benötigen, um den 400-Pixel-Bildschirm zu füllen. Wenn eine Kachel von der linken Seite des Bildschirms fällt, packen wir sie sofort wieder auf die rechte Seite des Bildschirms, und das machen wir immer wieder und wieder.
Dafür brauchen wir zunächst ein Array unserer Anfangsposition für die Grasblöcke.
var grassXs = [];
for (var i = 0; i < 25; i++) {
    grassXs.push(i*20);
}
Dann zeichnen wir innerhalb unserer "draw"-Schleife jeden einzelnen Block.
for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0{,}85, 20, 20);
}
Das sieht für eine statische Szene schon gut aus, aber sie muss sich noch bewegen! Wir können von jeder Gras-Position jedes Mal eins subtrahieren und sie 1 Pixel nach links verschieben.
for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0{,}85, 20, 20);
    grassXs[i] -= 1;
}
Jetzt bewegt sich das Gras zwar, aber es wird immer weiter verschwinden, je mehr die x-Werte ins Negative gehen. Beachte, dass wir eine Kachel auf der rechten Seite des Canvas wiederverwenden wollen, sobald sie über den linken Rand fällt. Dafür prüfen wir, ob sie schon weit genug über den Bildschirmrand gerutscht ist (du weißt bestimmt noch, dass unsere Bilder vom linken unteren Rand aus gezeichnet werden), und setzen entsprechend unseren x-Wert für die if-Bedingung auf die Canvas-Breite:
for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0{,}85, 20, 20);
    grassXs[i] -= 1;
    if (grassXs[i] <= -20) {
        grassXs[i] = width;
    }
}
Alles in allem sehen wir nun einen Biber, der sich zu bewegen scheint, während er springt. Magie!
OK, jetzt haben wir einen Biber, der durch eine seitlich scrollende Umgebung hüpft. Aber es gibt dort für den Biber noch nichts zu tun! Wir müssen noch die Äste hinzufügen, nach denen der Biber springen kann, um sie zu sammeln.
Denken wir erst mal darüber nach, wie wir die Äste programmieren könnten:
  • Jeder Ast hat eine x- und eine y-Position. Wir wollen, dass die x-Positionen über einen bestimmen Wert verteilt werden (der vielleicht konstant ist oder in einem Bereich liegt), und wir wollen, dass die y-Positionen innerhalb eines Bereichs zufällig ausgewählt werden. Entsprechend muss der Benutzer den Biber dann hüpfen und fallen lassen.
  • Die Äste sollten sich zwar genauso sichtbar bewegen wie das Gras, aber sie sollen sich im Gegensatz dazu nicht wiederholen. Wenn ein Ast einmal vom Bildschirm verschwunden ist, ist er für immer verschwunden.
  • Es sollte eine festgelegte Anzahl an Ästen pro Level geben, und ab einem bestimmten Moment sollte es keine neuen mehr geben.
Es gibt viele Arten, wie wir unsere Äste programmieren könnten, die aber relativ komplex sind. Daher modellieren wir sie mithilfe eines Objekts, so wie unseren Biber-Charakter:
var Stick = function(x, y) {
    this.x = x;
    this.y = y;
};

Stick.prototype.draw = function() {
    fill(89, 71, 0);
    rect(this.x, this.y, 5, 40);
};
Bevor unser Spiel nun startet (nach der Initialisierung des Bibers) legen wir ein Array von 40 Ästen an, mit einem konstanten Offset und einem zufälligen y:
var sticks = [];
for (var i = 0; i < 40; i++) {  
    sticks.push(new Stick(i * 40 + 300, random(20, 260)));
}
Jetzt können wir die Stöcke genauso wie das Gras zeichnen, aber ohne die Wiederholung der Bilder:
for (var i = 0; i < sticks.length; i++) {
    sticks[i].draw();
    sticks[i].x -= 1;
}
Hier ist das Spiel mit den Ästen, die mit unserem Code gezeichnet werden. Versuche, nach ihnen zu springen! Was passiert? Nichts! Darum kümmern wir uns gleich...

Willst du an der Diskussion teilnehmen?

Noch keine Beiträge.
Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.