Abschluss-Übung

Beschreibung

Als Abschlussübung für das Tutorial „JavaScript-BOM“ wird Schritt für Schritt die folgende kleine Anwendung entwickelt:

Das Spiel Single-Pong ist angelehnt an das legendäre und erste weltweit bekannte Viedeospiel „Pong“. Ziel des Spieles ist es, den orangenen Ball so lange wie möglich im Spiel zu halten. Berührt der Ball den oberen, unteren oder rechten Spielfeldrand, prallt der Ball im selben Winkel wieder ab. Berührt der Ball aber den linken Bildschirmrand, ist der Ball im Aus und das Spiel ist zu Ende. Mit dem Button „Start“ kann der orangene Ball verzögert gestartet werden. Mit dem Button „Stop“ kann das Spiel unerbrochen oder beendet werden. Mit den Button „hoch“ und „runter“ kann der Schläger nach oben und unten bewegt werden. Das Feld „Zeit“ zeigt die verstrichene Zeit eines Durchgangs und das Feld „Highscore“ die längste Zeit, die es ein Anwender geschafft hat, den Ball im Spiel zu behalten. Eine Besonderheit bei Single-Pong ist noch, dass der Anwender sich Anmelden kann, was bedeutet, dass der Name und der Highscore des Anwenders als Cookie gespeichert wird.

Schritt 1 – Die Struktur

Im ersten Schritt wird die Struktur der Anwendung, d. h. das Grundgerüst, in HTML erstellt. Dazu werden alle erforderlichen HTML-Elemente in einer Tabelle dargestellt:

HTML-Datei:

Das erste „div“-Element umschließt die gesamte Anwendung
Das zweite „div“-Element definiert den Kopf (header) der Anwendung mit dem Titel
Das dritte „div“-Element umschließt den Inhalt mit Button, Info-Feldern und Spielfeld
Der Rest ist Standard-HTML und relativ selbsterklärend

Ergebnis:

Schritt 2 – Das Style

Im zweiten Schritt wird das Style der Anwendung, d. h. die Formatierungen für die HTML-Elemente, in CSS erstellt. Dazu wird eine externe CSS-Datei verwendet, die im „head“-Bereich der HTML-Seite eingebunden wird:

CSS-Datei:

Mit der ersten CSS-Anweisung wird die Breite und ein Rahmen für die Anwendung definiert und mit „margin: auto“ die Anwendung im Browserfenster zentriert
In der zweiten CSS-Anweisung wird die Hintergrundfarbe, die Schriftfarbe, der Innenabstand, die Schriftgröße und Schriftstärke sowie eine zentrierte Darstellung der Schrift für den Kopf der Anwendung definiert
In der dritten CSS-Anweisung wird der Innenabstand des Inhaltsbereichs definiert
In der vierten CSS-Anweisung wird Breite, Höhe, Hintergrundfarbe und Rahmen des Spielfelds definiert, sowie eine relative Positionierung
Die Positionierung ist erforderlich, damit der Ball und der Schläger relativ zum Spielfeld bewegt werden können
Mit der fünften CSS-Anweisung wird Breite, Höhe, Rundung und Farbe des Balls festgelegt und mit „position: absolute“ eine Verschiebung innerhalb des Spielfelds ermöglicht
Mit der sechsten CSS-Anweisung werden die Abmessungen und Farbe des Schlägers definiert und mit „position: absolute“ die Verschiebung des Schlägers im Spielfeld ermöglicht
Die siebte CSS-Anweisung definiert einen zentrierte Darstellung des Inhalts der Tabelle und der Tabelle im Inhaltsteil
Die achte Anweisung definiert die Abmessungen der Button
Die neunte CSS-Anweisung legt fest, dass die beiden „span“-Elemente für die Zeit und den Heighscore wie Blockelemente Abmessungen haben sollen und 50 % der verfügbaren Breite ausfüllen

HTML-Datei:

Im „head“-Bereich der HTML-Datei wird die CSS-Datei eingebunden

Ergebnis:

Schritt 3 – Die Funktionalität

Im dritten Schritt wird die Funktionalität der Anwendung mit Hilfe von JavaScript implementiert. Für den JavaScript-Code wird ebenfalls eine externe Datei verwendet, die in den „head“-Bereich der HTML-Datei eingebunden wird.

Schritt 3.1 – Initialisierung und Schläger-Bewegung

JavaScript-Datei:

Mit der Funktion „Initialize()“ wird der Schläger und der Ball erstellt
Dazu wird zunächst mit „getElementById()“ eine Referenz auf das Spielfeld erstellt
Danach wird mit „createElement()“ ein „div“-Element mit dem Attribut „id“ erstellt und das Attribut auf den entsprechenden Wert gesetzt
Mit „style.top“ und „style.left“ wird das Element im Spielfeld positioniert und mit „appendChild()“ dem Spielfeld zugewiesen
Mit der Funktion „upWards()“ wird der Schläger nach oben und mit der Funktion „downWards()“ nach unten bewegt
Dabei wird zunächst die Position des Schlägers ermittelt und danach geprüft, ob der Schläger noch genügend Abstand zum Spielfeldrand hat und nur dann bewegt, wenn der Abstand noch ausreichend ist
Die Funktion „getNumPos()“ wandelt die Zeichenkette, die von „style.top“ zurückgeliefert wird in einen numerischen Wert um, mit dem der Abstand zum Spielfeldrand geprüft werden kann

HTML-Datei:

Im „head“-Bereich der HTML-Datei wird die JavaScript-Datei eingebunden
Im „script“-Bereich wird die Funktion „Initialize()“ aufgerufen, damit die Anwendung gleich beim Starten initialisiert wird

Ergebnis:

Schritt 3.2 – Ball Starten, Stoppen und Umlenken

Im nächsten Schritt bekommen die beiden Button „Start“ und „Stop“ ihre Funktionalität. Wird der „Start“-Button angeklickt, startet die Bewegung des Balls verzögert. Berührt des Ball eine der Seiten, wird er umgelenkt. Wird der „Stop“-Button angeklickt, wird die Ballbewegung gestoppt und es erscheint ein Dialog mit der Frage, ob das Spiel beendet werden soll. Wird im Dialog „OK“ angeklickt, wird das Spiel beendet, indem Ball und Schläger gelöscht und erneut initialisiert werden. Wird der „Abbrechen“-Button angeklickt, wird die Ballbewegung fortgesetzt.

JavaScript-Datei:

Zeile 3: Deklaration der globalen Variablen für die Bewegung des Balls in X- und Y-Richtung
Zeile 5: Deklaration der globalen Variablen für das Intervall und den Timer

Zeilen 27-30: Beendet die Verzögerung und das Intervall für die Ballbewegung
Zeilen 32-36: Löscht den Schläger und den Ball aus dem Spielfeld
Zeilen 38-50: Veränderung der Ballposition und Umlenken des Balls bei Erreichen des Spielfeldrands
Zeile 39: Referenz auf den Ball
Zeilen 40-41: X- und Y-Koordinate des Balls ermitteln
Zeilen 42-43: X- und Y-Koordinate des Balls verändern
Zeilen 44-47: Variable für die Ballbewegung negieren, beim erreichen des Spielfeldrands
Zeilen 48-49: Neue X- und Y-Koordinate des Balls setzen
Zeilen 52-54: Startet das Intervall für die Ballbewegung
Zeilen 56-59: Stoppt die Ballbewegung und startet die Startfunktion des Balls verzögert
Zeilen 61-69: Stoppt die Ballbewegung und öffnet eine Abfrage zum Beenden des Spiels
Zeile 62: Stoppt die Ballbewegung
Zeile 63: Abfrage, ob das Spiel beendet werden soll
Zeilen 64-67: Ist das Ergebnis der Abfrage „true“, werden Ball und Schläger gelöscht und neu initialisiert
Zeile 68: Ansonsten wird die Ballbewegung erneut gestartet

Ergebnis:

Schritt 3.3 – Ball-Schläger-Kollision und Ball im Aus

Im nächsten Schritt wird geprüft, ob der Ball mit dem Schläger kollidiert und dann umgelenkt. Berührt der Ball den linken Rand und kollidiert nicht mit dem Schläger, ist der Ball im Aus und das Spiel ist zu Ende.

JavaScript-Datei:

Zeile 5: Anzahl an Durchläufen, bis die Ball-Schläger-Kollision erneut geprüft wird
Zeilen 24-25: Zurücksetzen der globalen Variablen für die X- und Y-Ausrichtung des Balls

Zeilen 31-44: Prüfen der Ball-Schläger-Kollision sowie umlenken des Balls und zurücksetzen des Verzögerungsfaktors bei Kollision

Zeilen 56-61: Meldung, dass der Ball im Aus ist, löschen von Schläger und Ball und neu initialisieren des Spiels
Zeilen 62-66: Ball anhalten und verzögert das Spiel beenden
Zeile 70: Verweis auf den Schläger in der Variablen „racket“ speichern
Zeile 75: Verzögerungsfaktor herunterzählen bis er 0 ist
Zeile 76: Berührt der Ball den linken Rand, ist das Spiel verloren
Zeile 80: Ist der Verzögerungsfaktor kleiner 1 wird die Ball-Schläger-Kollision geprüft

Ergebnis:

Schritt 3.4 – Spielzeit und Highscore

Im vorletzten Schritt wird die Spielzeit erfasst und ausgegeben. Außerdem wird bei Spielende geprüft, ob die Spielzeit größer ist als der Highscore und wenn ja, der Highscore entsprechend angepasst.

JavaScript-Datei:

Zeile 9: Deklariert die globale Variable für die Startzeit des Spiels

Zeilen 47-55: Ermittelt die Differenz aus der übergebenen Zeitangabe und der Startzeit, extrahiert die Sekunden und Minuten und setzt das Feld „Zeit“
Zeilen 67-72: Wandelt eine Zeichenkette einer Zeitangabe in eine Zahl in der Einheit Sekunden um
Zeilen 73-82: Prüft, ob die Spielzeit größer als der Highscore ist und setzt den Higscore auf die Spielzeit, wenn diese größer ist

Zeile 87: Führt bei Spielende die Prüfung des Highscores aus
Zeile 111: Setzt das Feld „Zeit“ auf die aktuelle Spielzeit
Zeile 119: Initialisiert die globale Variable für die Startzeit auf die aktuelle Zeit

Ergebnis:

Schritt 3.5 – An- und Abmelden

JavaScript-Datei:

Zeilen 10-14: Prüfen, ob das Cookie „username“ existiert
Zeilen 15-21: Extrahieren des Wertw eines Cookies aus der Cookie-Zeichenkette
Zeilen 22-34: Prüfen, ob der Anwender angemeldet ist und setzen von Name und Highscore in den entsprechenden Feldern

Zeilen 54-60: Abfrage des Namens des Anwenders und speichern von Name und initialen Highscore als Cookie
Zeilen 61-70: Sicherheitsabfrage und löschen von Benutzername und Highscore bei Bestätigung