P5Play


Ein Computer-Spiel zu programmieren ist eine sehr anspruchsvolle Aufgabe und es wird immer schwieriger ein interessantes Spiel zu erschaffen, da die Computerspieler durch schöne Grafiken und schnelle Interaktion heute ziemlich verwöhnt sind. Du als Anfänger kannst aber sehr viel über das Programmieren lernen, wenn du versuchst ein interaktives Spiel lebendig werden zu lassen.

Wir verwenden in diesem Kapitel die p5.play-Bibliothek. Diese Bibliothek bietet uns viele Methoden, die das Programmieren eines interaktiven Spiels erleichtern.

  • Das Spiel sollte erkennen, wenn Objekte sich berühren (Collision-Detection)
  • Die Spielfiguren sollen sich bewegen (Geschwindigkeit, Richtung,...)
  • Spielfiguren sollten sich bei Bewegungen verändern (Animationen)
  • Das Spiel soll mit Maus und Tastatur gesteuert werden können
  • ...

Bevor du dich mit den folgenden Beispielen beschäftigst, wäre es ziemlich hilfreich, dass du zuerst den Programmierkurs und die p5js-Grundlagen durcharbeitest.

Eines der berühmtesten Spiele der Computergeschichte (Pong) siehst du im folgenden Beispiel, das mit Hilfe von p5 und p5.play programmiert wurde:

Klicke oben links auf das Datei-Symbol (Files), dann siehst du die Dateien, die verwendet werden, um das Spiel zum Laufen zu bringen.

  • index.html: Diese Datei beschreibt die Internetseite auf der das Spiel angezeigt wird. Es werden alle Bibliotheken geladen, welche Methoden bereitstellen, die beim Spiel verwendet werden.
  • p5.dom.min.js: In dieser Bibliothek sind Methoden, mit denen Schaltflächen, Schieberegler,... zur Steuerung in das Spiel eingefügt werden können (z.B. ein Spiel-Menü).
  • p5.min.js: Mit dieser Bibliothek werden die grafischen Elemente des Spiels erzeugt (Kreise, Rechtecke, ...) und deren animierte Veränderung während des Spieablaufs ermöglicht (Frames).
  • p5.play.js: Diese Bibliothek ermöglicht die Steuerung der Spiel-Objekte durch den Spieler und die Interktion der Spiel-Objekte untereinander. Das ist unsere "Spiel-Engine".
  • script.js: In dieser Datei steht das Programm, mit dem das Spiel programmiert wird. Das ist die Datei, die du dir ausdenkst.
  • style.css: Mit dieser Datei kannst du die Internetseite gestalten, in die das Spiel eingebettet wird. Diese Datei ist im Moment leer, da wir nur das Spiel auf dem Bildschirm sehen.

Damit du weisst welche Befehle die für die Programmierung zur Verfügung stehen, gibt es zwei Quellen für p5.js und p5.play:

Wenn du ernsthaft programmieren möchtest, wäre es sinnvoll dir solche Befehls-Referenzen einmal durchzulesen, damit du weisst, welche Befehle du beim Programmieren verwenden kannst. Und da solche Referenzen immer in Englisch sind, solltest du keine Angst vor der englischen Sprache haben, sondern dich z.B. mit Hilfe des Google-Translators durch die englischen Texte kämpfen.