Spieleprogrammierung mit P5.js – ein neuer Anlauf

Langjährige Leser des Schockwellenreiters erinnern sich eventuell, daß ich vor über zwei Jahren schon einmal einen Anlauf genommen hatte, ein Spiel in P5.js, dem JavaScript-Mode von Processing zu programmieren, dabei aber gewaltige Probleme mit den Pfeiltasten hatte, die ein Ruckeln des Browserfensters bewirkten. Nachdem mein Interesse an P5.js kürzlich erneut geweckt wurde, habe ich einen neuen Anlauf gewagt:

j oder 4: nach links
l oder 6: nach rechts
k oder 8: nach oben
m oder 5: nach unten

Um das Ergebnis vorwegzunehmen. Das Ruckeln bei den Pfeiltasten habe ich nicht wegbekommen und fast jeder Browser reagierte auch anders darauf (wenn jemand weiß, wie man die Tastatur exklusiv dem Canvas zuschustern kann, den bitte ich um eine Erklärung in meinen (Email-) Kommentaren). Auch die SPACE-Taste wird von den meisten Browsern abgefangen und sie stellen Seltsames damit an. Daher habe ich mich entschieden, den damals eingeschlagenen Weg fortzusetzen und nur »harmlose« Tasten anzusprechen. Für die Tasten j, l. k und m hatte ich mich damals für die Notebook-Besitzer entschieden, für die Besitzer einer Tastatur mit Ziffernblock habe ich heute die Tasten 4, 6, 8 und 5 hinzugenommen, die ähnlich bequem wie die Pfeiltasten zu erreichen sind.

Geplant ist ein kleiner Prototyp eines Rogue-likes, die 16x16 große Figur des Rogue habe ich dem freien (CC-BY-SA 3.0) Tileset DawnLike entnommen – es sind zwei Bilder, die jede halbe Sekunde ausgetauscht werden und so das leichte Zappeln bewirken.

Ansonsten ist das Skript ziemlich kurz, es passiert ja noch nicht viel:

let rogue0, rogue1;
let posx, posy;

function preload() {
    rogue0 = loadImage("images/rogue0.png");
    rogue1 = loadImage("images/rogue1.png");
    frameRate(30);
}

function setup() {
    let mcv = createCanvas(320, 240);
    mcv.parent("myCanvas");
    posx = 160
    posy = 112
}

function draw() {
    background("green");
	
    if ((frameCount % 30) < 15) {
        image(rogue0, posx, posy);
    }
    else {
        image(rogue1, posx, posy);
    }
}

function keyPressed() {
    if (((key === "j") || (key === "4")) && (posx > 0)) {
        posx = posx - 16;  // nach links
    } else if (((key === "l") || (key === "6")) && (posx < width-16)) {
        posx = posx + 16;  // nach rechts
    } else if (((key === "k") || (key === "8")) && (posy > 0)) {
        posy = posy - 16;  // nach oben
    } else if (((key === "m") || (key === "5")) && (posy < height-16)) {
        posy = posy + 16; // nach unten
    }
}

Der Rogue kann mit den Tasten nach links, nach rechts, nach oben und nach unten bewegt werden, aber er kann das Spielfeld nicht verlassen. Aber entgegen meinen früheren Versionen funktioniert das Skript nun unter macOS zumindest mit den Browsern Chrome, Firefox und Safari (andere Surfhilfen habe ich nicht auf meiner Festplatte). Das ist doch zumindest schon einmal ein guter Startpunkt für weitere Experimente. Still digging!

(Kommentieren)