Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Solution: Das Grundgerüst

Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Solution: Das Grundgerüst

“

♪ (Musik) ♪ Das hier ist jetzt nochmal das Spiel, Sie können es selber spielen. Die Datei heißt game.html, finden Sie in den Übungsdateien. Wir wollen uns aber mal den Quelltext dazu anschauen. Innerhalb von Visual Studio Code habe ich jetzt game.html geöffnet und hier neben den Zeilennummern, da sehen Sie so kleine Pfeile, und damit können Sie ganze Codeblöcke ein- und ausklappen. Das macht das Ganze einfach etwas übersichtlicher. Auf der obersten Ebene haben wir natürlich ein HTML-Dokument, damit das Ganze auch im Browser funktioniert, und dieses HTML-Dokument hat zwei Bereiche, nämlich ein Head und ein Body. Das ist von HTML vorgegeben. Innerhalb des Heads, da haben wir verschiedene Angaben, z.B. den Titel. Das ist das, was dann in der Browsertitelzeile angezeigt wird. Und wir haben einen Style, d.h., damit definieren wir die Farben und Positionen, also wir haben hier innerhalb von Style drei Bereiche. Wir haben Asteroiden, die sind rot, wir haben das Spacecraft blau, und wir haben das gesamte Spielfeld. Dieses Spielfeld hat hier vorne eine Raute, d.h., Sie können hier direkt mit der ID ansprechen. Die Umrandung, die ist ein Pixel breit durchgezogen und hat die Farbe Schwarz. Wir können hier auch den Hintergrund von Weiß auf Schwarz ändern, dann wird es ein richtiges Weltraumspiel. Und wir haben hier eine Breite und Höhe angegeben. Das Gleiche haben wir hier für spacecraft. Wir haben hier eine Breite und eine Höhe. Und dann haben wir hier noch ein border-radius. Das bedeutet, dass die Ecken abgerundet sind und zwar halb so groß, 50 %, wie das ganze Ding breit ist. So können wir aus einem rechteckigen Objekt ein rundes Objekt machen mit diesem border-radius. Und dann sagen wir noch position: absolute. Wir wollen es also ganz genau positionieren, und zwar am unteren Rand, also von unten ausgesehen des Spielfeldes - bottom: 0 und momentan liegt es ganz links, also in der linken unteren Ecke. Da ist das Raumschiff hier. Die Asteroiden sind ziemlich ähnlich. Sie sind etwas kleiner, sie haben eine Breite und Höhe von 20px und haben die Farbe Rot. Und das Ganze passiert hier eben in den style-Angaben. Das ist CSS, also wenn Sie sich für Webentwicklung interessieren, dann kommen Sie um CSS nicht drum herum. Dann schauen Sie bitte bei uns in der Bibliothek nach diesem Training, wie man CSS entwickelt und wie man mit CSS auch Webseiten definieren und gestalten kann. Das Ganze ist jetzt hier im head-Bereich. Wie gesagt, das soll uns momentan nicht weiter interessieren. Das haben Sie bisher auch noch nicht gelernt, aber das brauchen wir natürlich, um dieses Spiel programmieren zu können. Und innerhalb des Bodies, da haben wir nun unser Spielfeld, also dieses "id ist gleich field" ist genau das, was wir hier in den Styles haben mit diesem #field, also über diesen Wert hier können wir das direkt ansprechen, dieses field und wir haben hier unser script. Da ist unsere Programmierung drin. Und innerhalb des Spielfeldes sehen Sie nochmal drei Punkte, d.h., ich kann hier nochmal reinklicken, den Head mache ich mal zu, dass es übersichtlicher ist. Innerhalb des Spielfeldes, da haben wir unser spacecraft, also unser Raumschiff und unsere fünf Asteroiden, beginnend bei der Nummero 0. Die haben jeweils eine eindeutige ID, also die ist eindeutig, diese Nummerierung, und sie sind alle von der Klasse Asteroid, sodass sie alle gleich aussehen. Das ist das HTML-Grundgerüst. Das müssen wir jetzt mal so als gegeben hinnehmen, das hat jetzt mit der Programmierung noch nichts zu tun, aber wir werden uns jetzt im weiteren Verlauf genau die Programmierung anschauen, die innerhalb dieser script-Tags hier definiert ist.

Inhalt