Menü
c't Magazin

Einstieg in Processing.js: Spieleprogrammierung ganz einfach

Mit Processing.js programmieren Sie mit wenigen Codezeilen kleine Animationen und Spiele direkt im Browser – der perfekte Einstieg in die Spieleprogrammierung.

vorlesen Drucken Kommentare lesen 1 Beitrag
Einstieg in processing.js: Spieleprogrammierung ganz einfach

(Bild: Albert Hulm)

Inhaltsverzeichnis

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.

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.

Processing-Profis, die die c't-Artikel "Malen nach Zahlen" und "Frische Werkzeuge für Processing-Künstler" gelesen haben, wird manches bekannt vorkommen. p5js ist die JavaScript-Variante von Processing. Unser Beispiel setzt nur grundlegende Kenntnisse von JavaScript voraus.

Immer mehr Wissen. Das digitale Abo für IT und Technik.

  • Zugriff auf alle Inhalte von heise+
  • exklusive Tests, Ratgeber & Hintergründe: unabhängig, kritisch fundiert
  • c't, iX, Technology Review, Mac & i, Make, c't Fotografie direkt im Browser lesen
  • einmal anmelden – auf allen Geräten lesen - jederzeit kündbar
  • erster Monat gratis, danach monatlich 9,95 €
  • Wöchentlicher Newsletter mit persönlichen Leseempfehlungen des Chefredakteurs
GRATIS-Monat beginnen Jetzt GRATIS-Monat beginnen Mehr Informationen zu heise+