(Fast) gelöst: Basic Side Scroller mit P5.js (Update, Worknote)

Manchmal genügt einfach ein Blick in die Dokumentation, um ein Problem zu beheben. So auch mein Problem mit den Tastaturereignisssen. Denn dazu steht in der Dokumentation zu keyPressed() explizit:

Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add return false to the end of the method.

Das ist es also: Nicht der Browser – wie ich gestern vermutet hatte – reicht die Events an JavaScript weiter, sondern JavaScript, also auch P5.js konsumieren sie zuerst und reichen sie dann an den Browser durch. Und genau das soll return false verhindern.

Meine Funktion keyPressed() sieht daher nun so aus:

function keyPressed() {
        let alien = aliens[0];
        if (((keyCode === UP_ARROW) || (key === " ")) && (alien.status == "walking")) {
                alien.vely = -6;
                alien.status = "jumping";
        }
        return false;
}

Und tatsächlich, sowohl die Leertaste wie auch der Pfeil nach oben funktionieren fast¹ wie gewünscht.

Nahezu den gleichen Passus habe ich auch bei den Maus- und bei den Touch-Events gefunden. Touch-Events! Daran hatte ich noch gar nicht gedacht. Denn natürlich kann man auf den Browsern der meisten Smartphones (und Tablets vermute ich auch) keine Tasten drücken. Also habe ich dem Progrämmchen noch ein touchStarted() spendiert:

function touchStarted() {
        alien.vely = -6;
        alien.status = "jumping";
        return false;
}

Damit sollte der kleine Alien auch auf einem Smartphone hüpfen können. Ich habe momentan leider keines zur Hand. Sobald ich wieder eines zwischen die Finger bekomme, werde ich das testen und mich gegebenenfalls berichtigen. Bis dahin: Still digging!

[Übrigens]: Es ist immer noch nicht möglich, Amazons JavaScript für die Widgets und P5.js gleichzeitig in einem Browserfenster laufen zu lassen. Amazons JavaScript hat eine andere Vorstellung von color als P5.js (Fehlermeldung: RGB is not a constructor). Und beides scheint im globalen Namensraum zu liegen. Daher habe ich auf den Seiten mit P5.js-JavaScripten Amazons Widgets rausgeschmissen. Und schon funzt wieder alles.

(Kommentieren)