c't 7/2019
S. 184
Know-how
Einstieg in processing.js
Aufmacherbild
Bild: Albert Hulm

Programmieren im Browser

Spieleprogrammierung ganz einfach – mit einem Ballspiel in Processing.js

Mit Processing.js programmieren Sie mit wenigen Codezeilen kleine Animationen und Spiele direkt im Browser. Da Sie dafür nichts installieren müssen, eignet sich das perfekt für den Einstieg in die Spieleprogrammierung mit JavaScript. Freunde brauchen nur einen Link, um Ihre Spiele auszuprobieren und weiterzuentwickeln.

Wie wäre es, Freunde und Verwandte einmal mit einem selbst geschriebenen Spiel zu überraschen? Das geht erstaunlich leicht mit Processing.js, kurz: p5js. Auf der Webseite können Sie direkt im Browser coden und ohne Installation einfache 2D-Spiele programmieren. Um unser Spiel nachzubauen, müssen Sie einen Account anlegen und sich anmelden. p5js läuft mit jedem aktuellen Browser unter allen gängigen Betriebssystemen und ist kostenlos.

Zum Kasten: Der c’t-Tipp für Kinder und Eltern

Wie man mit p5js programmiert, zeigen wir am Beispiel eines einfachen Spiels. In dem saust ein Ball über den Bildschirm und prallt an den Spielfeldbegrenzungen ab. Die Aufgabe besteht darin, den Ball mit dem Mauszeiger zu schnappen. Verfehlt ein Mausklick den Ball, verliert der Spieler ein Leben. Für jeden Treffer gibt es einen Punkt. Je mehr Punkte der Spieler sammelt, umso schneller flitzt der Ball. Beim Abprall, Treffer und Fehlklick spielt das Spiel jeweils einen Soundeffekt ab. Das Spiel endet, wenn alle Leben verbraucht sind.