c't 8/2018
S. 164
Praxis
Spiele in JavaScript
Aufmacherbild

Fliegende Objekte

Mini-Browser-Spiel mit der JavaScript-Bibliothek p5.js entwickeln

Programmiereinsteigern fehlt es oft an anschaulichen Beispielen, um ihr Wissen zu vertiefen. Mit dem JavaScript-Framework p5.js schreiben auch Anfänger einen funktionierenden Nachbau des Handy-Spiels Flappy Bird und lernen nebenbei die Grundlagen objektorientierter Programmierung.

Die Idee der objektorientierten Programmierung ist Einsteigern nicht leicht zu vermitteln. Ersetzt man die abstrakten Objekte durch konkrete Gegenstände, erscheinen die Grundbegriffe Klasse, Objekt, Variable und Methode plötzlich ganz logisch: Reale Gegenstände (Objekte) haben Eigenschaften (Variablen), die man verändern und auslesen möchte (über Methoden). Sehr einfach funktioniert das Programmieren mit grafischen Objekten mit dem JavaScript-Framework p5.js, das die Programmierung nach Aussage der Entwickler auch Künstlern, Designern, Pädagogen und Anfängern zugänglich macht. Programme, die mit p5.js entstehen, haben eine einfache Struktur und mit optionalen Zusatzbibliotheken entstehen auch anspruchsvollere Anwendungen. Mit wenigen Zeilen Code schreiben Sie einen Nachbau des beliebten Handy-Spiels Flappy Bird.

Um mit dem Programmieren zu beginnen, brauchen Sie nur einen Texteditor wie beispielsweise Notepad++ oder Atom und einen Browser. Google Chrome und der Internet Explorer unter Windows weigern sich, lokale JavaScript-Elemente auszuführen, die nicht von einem Webserver ausgeliefert wurden. Wer zum Ausprobieren keinen Webserver starten möchte, sollte daher Firefox einsetzen. Erstellen Sie in einem leeren Ordner die Datei index.html mit folgendem Inhalt: