Spieleprogrammierung mit JavaScript & KAPLAY.js

Posted on by Julian Stock.

Während der vergangenen, kalten Wintertage habe ich ein wenig mit etwas Neuem herumexperimentiert: Der Spieleprogrammierung mit JavaScript & KAPLAY.js.

KAPLAY.js

KAPLAY ist der "Nachfolger" von Kaboom.js, welches nicht mehr weiterentwickelt wird. Mit wenig Aufwand kann man damit verschiedene Dinge erreichen. Ich habe mit einer Canvas-Bühne gestartet, verschiedene Sprites darauf angelegt und diese auf Tastendrücke reagieren lassen. Die Pfeiltasten dienten zur Bewegung, die Leertaste für "Springen", "Item aufnehmen / fallenlassen" oder "Pause". Mein Sohn war dabei ständiger Begleiter und wollte jeden Entwicklungsstand selbst ausprobieren, ihm konnte es gar nicht schnell genug gehen.

Test: Bewegung, Inventarsystem, Kollisionen

Da ich nicht nur mit den fertigen Sprites arbeiten wollte, habe ich mich ebenfalls ein wenig mit 2D Pixel Art auseinandergesetzt und mir ein paar eigene Grafiken angelegt. Diese lassen sich mit einem Programm wie z. B. LibreSprite auch gleich animieren, falls man ein .gif haben möchte oder man erstellt einen Sprite-Atlas und animiert die einzelnen Frames mit KAPLAY - passend zur Bewegung der Figur.

Julian

Auch hier wollte mein Sohn mitmischen und hat ein paar Grafiken angelegt, die ich einbinden sollte. Wir haben seinen Barkeeper für eine kleine Café-Szene verwendet und dem Ganzen ein paar Spielemechaniken spendiert:

Cafebar

DEMO: cafebar.julianstock.de

Es gibt eine Tür zum Öffnen/Schließen und ein Menü, über welches man die Bestellungen der Gäste anfertigen kann. Anschließend muss man per Drag+Drop die Mahlzeiten den Gästen zuweisen. Diese bedanken (oder beschweren) sich und verschwinden dann, nachdem sie bezahlt haben. Nichts Weltbewegendes, aber es funktioniert.

Da ich bis hierhin nur wild am Ausprobieren war, wollte ich es bei einem Folgeprojekt etwas strukturierter angehen lassen und wiederverwendbare Komponenten, ausgelagerten Code und Funktionen sowie TypeScript verwenden. Herausgekommen ist etwas Ähnliches, doch weitaus wart- und erweiterbar(er), als der vorige Versuch:

Cozy Coffee

DEMO: cozycoffee.julianstock.de

Hier gibt es ebenfalls eine Art "Tür", ein Menü zum Erweitern der möglichen Bestellungen, ein Trinkgeldsystem und Geister, wenn man seinen Laden nicht rechtzeitig schließt. Diese klauen einem dann Geld aus der Kasse. Auch hier stand der Spaß während der Entwicklung im Fokus und mein Sohn sollte (und wollte) alles möglichst schnell ausprobieren. Eingebettete Sounds habe ich mir lizenzfrei von Pixabay besorgt.

Grundsätzlich ist die Spieleprogrammierung auf dieser Basis sehr spannend. Mit JavaScript kann man immer mehr erreichen, es ist mittlerweile eine so universell einsetzbare Programmiersprache geworden, das hätte ich mir früher niemals denken können. Allerdings ist es als Solo-Entwickler super aufwändig, sich ein Konzept, die Grafiken und sämtliche Spielemechaniken auszudenken, weshalb es wohl erst einmal bei diesen paar Tests bleiben wird. Vorausgesetzt, mein Arbeitgeber möchte demnächst nicht noch einen weiteres Geschäftsfeld eröffnen 😬

Danke für's Lesen, bis zum nächsten Mal!


Julian Stock
Webentwickler aus Lübeck · 37 Jahre

Neu hinzugefügt

Social