Die Zeichenfläche
Die Grundlage unseres Spiels ist eine Zeichenfläche, auf der wir die Elemente unseres Spiels platzieren und animieren können.
Last updated
Was this helpful?
Die Grundlage unseres Spiels ist eine Zeichenfläche, auf der wir die Elemente unseres Spiels platzieren und animieren können.
Last updated
Was this helpful?
In dieser Lektion erstellen wir die Zeichenfläche für unser Spiel. Auf dieser Zeichenfläche werden sich später alle Figuren bewegen und die Level mit allen Facetten gezeichnet.
Wir führen die Funktion createCanvas() zum Erzeugen der Zeichenfläche ein.
Wir lernen, wie wir die Zeichenfläche mit der parent()-Funktion verschieben können.
Wir setzen den Hintergrund unserer Zeichenfläche mit background().
Wir lernen Funktionen kennen und erläutern die Funktion setup() und ihre Rolle.
Seit der Version 5 des HTML-Standards gibt es für das Zeichnen und Animieren ein eigenes HTML-Element. Es trägt den Namen Canvas, was zu Deutsch "Leinwand" bedeutet, und wird auch mit dem entsprechend benannten HTML-Tag <canvas> auf Webseiten eingefügt. Wir verwenden ein Canvas für die Zeichenfläche unseres Pacman-Spiels.
Die Funktion createCanvas() fügt das <canvas>-Element einfach an das Ende des HTML-Dokuments an. Das ist in den meisten Fällen nicht der Ort, wo die Zeichenfläche erscheinen soll. Auch in unserem Fall nicht. Da wir bereits eine Struktur in unserem HTML-Dokument haben und in dieser einen Platz für die Spielfläche reserviert haben, wollen wir das <canvas>-Element auch dorthin verschieben.
Wir können ein Element in einem HTML-Dokument verschieben, indem wir ihm ein anderes Elternelement zuweisen. Dabei machen wir uns die Baumstruktur eines HTML-Dokuments zunutze. p5.js bietet dafür eine Funktion parent(), der wir die ID des neuen Elternelements übergeben müssen. Voraussetzung ist, dass wir bei der Erzeugung des Canvas-Elements eine Referenz auf einer Variable gespeichert haben:
Der Hintergrund in Pacmans Welt ist normalerweise schwarz. Auch das können wir mithilfe der p5.js-Bibliothek mit einer Zeile Code erledigen. Die Funktion background() benötigt von uns eine Farbangabe, z. B. als hexadezimalen RGB-Code, und setzt anschließend den Hintergrund des aktiven Elements auf diese Farbe:
setup()In dieser Lektion lernen wir die ersten 3 Funktionen der kennen:
Für die Entwicklung unseres Spiels verwenden wir die JavaScript-Bibliothek , die uns viele nützliche Funktionen für die Programmierung von animierten und interaktiven Anwendungen, wozu auch Spiele gehören, bereitstellt. Auch für die Erstellung eines Canvas-Elements wird durch p5.js vereinfacht. Mit der Funktion createCanvas() können wir mit einer Zeile Code eine Zeichenfläche auf unserer Webseite erzeugen. Zusätzlich übergeben wir der Funktion die Dimensionierung (Größe) unserer Spielfläche. Diese soll 800 x 600 Pixel betragen:
