Tutorial: Basic Side Scroller mit P5.js (Teil 3)

Das kleine, rosa Alien meines kleinen P5.js-Side-Scroller Tutorials (Teil 1, Teil 2) kann jetzt doch auf mobilen Devices hüpfen – zumindest auf meinem kleinen Nokia 2 mit Android (andere Geräte besitze ich nicht, auf denen ich das testen könnte). Was hatte ich übersehen? Bedingt durch den Blockscope der Deklaration mit let kannte mein Programm die Variable alien einfach nicht (man merkt, ich fremdel noch ein wenig mit JavaScript 🤓). Nachdem ich der Funktion touchStarted() die Variable bekannt gemacht hatte, hüpfte das Alien bei jedem Tippen mit dem Finger fröhlich über den Bildschirm meines Smartphones:

function touchStarted() {
        let alien = aliens[0];
        if (alien.status == "walking") {
                alien.vely = -5;
                alien.status = "jumping";
        }
        // return false;
}

Das return false mußte ich allerdings auskommentieren, denn da touchStarted() auf dem Desktop auch alle Mausklicks abfängt, konnte ich mit der Maus nicht mehr navigieren oder auf Links klicken. Hier muß man also den Mausklick oder das Tippen mit der Fingerspitze schon an den Browser durchreichen.

Was habe ich sonst noch geändert? Der Funktion keyPressed() habe ich einen Notstart mit der Taste s spendiert, das gibt mir die Möglichkeit, das Programm anzuhalten, um Screenshots wie obigen anzufertigen:

function keyPressed() {
        let alien = aliens[0];
        if (((keyCode === UP_ARROW) || (key === " ")) && (alien.status == "walking")) {
                alien.vely = -5;
                alien.status = "jumping";
        }
        // Für Screenshots
        else if (key === "s") {
                noLoop();
        }
        return false;
}

Auf dem Desktop könnt Ihr also nun das Alien auf drei verschiedene Weisen zum Hüpfen bringen. Einmal mit der Pfeiltaste nach oben, dann mit der Leertaste und schließlich mit einem Mausklick. Sucht Euch aus, was Euch am Besten gefällt.

Dann habe ich als eine kleine Verbeugung gegenüber Daniel Shiffman – wie Freitag angekündigt – das Aussehen des Spiels dem Coding Train angepaßt. Dafür habe ich nicht nur die Farben verändert (der Himmel (also der Hintergrund) bekam #95e0f5 zugewiesen), die großen Hügel (Halbkreise) bekamen ein leichtes Lila (#c666e6) und die kleinen Hügel im Vordergrund ein dunkleres Lila (#9757a5) verpaßt. Der Fußboden, auf dem das Alien läuft, wurde – na, ich würde sagen – dunkelgraublau (#817ac6), aber ich bin ziemlich farbenblind, daher nagelt mich nicht fest.

Dann sahen die Wolken auf den Screenshots von Daniel Shiffmans Bildschrimhintergrund anders aus, als die Wolken, die ich ursprünglich vorgesehen hatte, daher habe ich die Klasse Clouds komplett neu geschrieben:

class Cloud {
        
        constructor(x, s) {
                this.xpos = x;
                this.ypos = 150;
                this.step = s;
        }
        
        update() {
                this.xpos += this.step;
                if (this.xpos <= -300) {
                        this.xpos = width + 100;
                }
        }
        
        show() {
                fill("#ffffff");
                arc(this.xpos, this.ypos, 200, 200, PI, TWO_PI);
                arc(this.xpos + 150, this.ypos, 150, 150, PI, TWO_PI);
        }
}

Das sieht dann schon mehr nach Shiffmans Desktop-Hintergrund aus.

Und zu guter Letzt habe ich der Spielewelt noch Hindernisse spendiert, damit das Alien auch etwas zu Darüberhüfen hat:

class Obstacle {
        
        constructor(x, y) {
                this.xpos = x;
                this.ypos = y;
                this.im1 = fence;
                this.im2 = fencebroken;
                this.im = this.im1;
                this.step = -2.5;
        }
        
        update() {
                this.xpos += this.step;
                if (this.xpos <= -(obstacleWidth + random(240*obstacleWidth))) {
                        if (random() < 0.75) {
                                this.im = this.im1;
                        } else {
                                this.im = this.im2;
                        }
                        this.xpos = width + obstacleWidth;
                }
        }
        
        show() {
                image(this.im, this.xpos, this.ypos);
        }
}

Das ist einmal ein normaler Zaun und zum Zweiten ein zerbrochenenr Zaun. Der zerbrochene Zaun ersetzt den normalen Zaun mit einer Wahrscheinlichkeit von 25 Prozent. Ich habe es mir einfach gemacht und es ist immer nur ein Hindernis sichtbar. Erst wenn es links aus dem Bildschirm verschwunden ist, wird rechts ein neues Hindernis erzeugt. Die Bilder entstammen – wie so oft – aus dem freien, schier unerschöpflichen Fundes von Kenney.nl:

Natürlich mußten in der setup()-Funktion die Hindernisse erzeugt

        obstacles.push(new Obstacle(width + obstacleWidth, 340))

und in der draw()-Funktion bewegt werden:

        // Obstacles
        for (let obstacle of obstacles) {
                obstacle.update();
                obstacle.show();
        }

Die Bilder habe ich in der preload()-Funktion geladen, um sicherzustellen, daß sie alle vorhanden sind, bevor setup() aufgerufen wird.

Als nächstes möchte ich eine Kollisionserkennung implementieren und dem Spiel einen Punktezähler spendieren. Und noch ist es zu einfach zu spielen. Mir schwebt daher vor, die Hindernisse mit wachsendem Punktestand zu beschleunigen, um es das Spiel mit wachsender Erfahrung des Spielers schwieriger zu gestalten. Aber eigentlich programmiere ich das alles ja nur, um mir P5.js und JavaScript beizubringen. Also schaun wir mal, was die Zukunft bringt.

Den kompletten Quellcode dieser Version könnt Ihr meinem GitHub-Repositorium entnehmen.

Über Ergänzungen oder Tips, was ich besser machen könnte, würde ich mich in meinen (Email-) Kommentaren freuen. Still digging!

(Kommentieren)