JavaScript-Programmierung von Kopf bis Fuß

Sie sind hier � 327

Die Einzelteile zusammenfügen

PraxistrainingPraxistraining

Schiff 1: A6, B6, C6

Schiff 2: C4, D4, E4

Schiff 3: B0, B1, B2

Und hier sind die Rateversuche:

A0, D4, F5, B2, C5, C6

Überprüfen Sie Ihre Antworten am Ende des Kapitels, bevor Sie

weiterlesen.

Bevor wir den Code für die Anzeige von Treffern und Fehlversuchen schreiben, wollen wir unsere

CSS-Fähigkeiten noch ein wenig trainieren. Ahmen Sie den Spielverlauf anhand der unten stehenden

Angaben nach, indem Sie die Klassen »hit« und »miss« manuell in Ihr Markup einbauen. Und

vergessen Sie nicht, wie üblich Ihre Antworten zu überprüfen!

Die Klassen hit und miss verwenden

<tr>

<td id="10"></td> <td id="11"></td> <td id="12"></td> <td id="13" class="hit"></td>

<td id="14"></td> <td id="15"></td> <td id="16"></td>

</tr>

Falls Sie es noch nicht getan haben, sollten Sie die Definitionen für hit

und miss jetzt in Ihren Code einbauen. Um zu zeigen, wie die Klassen

verwendet werden, machen wir ein kleines Experiment: Stellen Sie

sich vor, an den Koordinaten B3, B4 und B5 befindet sich ein Schiff,

und der Spieler tippt auf »B3«. Das ist ein Treffer! An Position B3 soll

jetzt die Grafik »ship.png« angezeigt werden. Hierfür muss zunächst

zunächst das »B« in die Zahl 1 übersetzt werden (denn A entspricht 0,

B gehört zu 1 usw.). Dann suchen wir das <td>-Element mit der ID 13

in der Tabelle und weisen ihm die Klasse »hit« zu, wie hier:

Wird die Seite neu geladen, erscheint an Position B3 ein Schiff auf

dem Spielfeld.

Was wir sehen, wenn das Element mit

der ID »

13« die Klasse »hit«

zugewiesen bekommt.

Vergessen Sie nicht, die Klassen

hit und miss in Ihren CSS-Code

einzubauen.

Nach dieser Übung müssen

Sie die Klassen wieder

aus den <td>-Elementen

entfernen, damit Sie ein

leeres Spielfeld haben, wenn

wir mit dem Programmieren

anfangen.

Nicht vergessen: Die Buchstaben müssen in

die entsprechenden Zahlen, von A = 0 bis

G = 6, übersetzt werden.

Hier erhält das <td>-Element die Klasse »hit«.

328 Kapitel 8

Fragen zum Spiel

F:

Ich dachte, es wäre nicht erlaubt,

nur Zahlen als id-Attribute in unserer

Tabelle zu benutzen. Geht das doch?

A: Ja. In HTML5 dürfen IDs für Elemente

komplett aus Zahlen bestehen. Solange

das id-Attribut keine Leerzeichen enthält,

ist alles in Ordnung. Und für das »Schiffe

versenken«-Spiel passt das wunderbar,

da sich die Positionen in der Tabelle leicht

finden lassen. Außerdem können wir schnell

und einfach auf das <td>-Element an dieser

Position zugreifen.

F:

Wenn ich das richtig verstehe,

benutzen wir die <td>-Elemente als Zellen

im Spielfeldraster, wobei die Zellen über

das class-Attribut als getroffen oder

verfehlt markiert werden, richtig?

A: Genau. Das Ganze besteht aus

verschiedenen Bausteinen: Wir haben

ein Hintergrundbild mit einem Raster, das

vor allem gut aussieht. Darüber liegt die

HTML-Tabelle. Zudem benutzen wir die

Klassen »hit« und »miss«, um bei Bedarf

ein Hintergrundbild in den passenden

Tabellenzellen zu platzieren. Das passiert

komplett im Code, sobald wir den Elementen

dynamisch eine Klasse zuweisen können.

F:

Anscheinend müssen wir

Buchstaben, wie in »A6« in Zahlen wie

»06« übersetzen. Macht JavaScript das

automatisch?

A: Nein, das müssen wir selbst tun. Das

sollte dank Ihres Wissens über Arrays aber

recht schnell und einfach gehen. Dazu gleich

mehr.

F:

Ich bin nicht sicher, ob ich noch

genau weiß, wie die CSS-Positionierung

funktioniert.

A: Mithilfe der CSS-Eigenschaft position

können Elemente an einer bestimmten

Stelle im Dokument platziert werden. Bei der

relativen Positionierung wird ein Element

zunächst an seinem normalen Platz im

Seitenfluss belassen und gegebenenfalls

von dort aus verschoben. Außerdem schafft

die relative Positionierung einen neuen

»Positionierungskontext« für verschachtelte

Elemente. Durch die Definition von

»position: absolute« für die Tabelle, den

Nachrichtenbereich und das Formular

können wir diese an genau definierten

Stellen im Spielfeld (<div id="board">)

einpassen. Allgemein gilt das nächste

umgebende Element mit position: relative,

position: absolute oder position: fixed als

Positionierungskontext, ansonsten das

<body>-Element.

Nähere Informationen hierzu finden Sie in

Kapitel 11 von HTML und CSS von Kopf bis

Fuß.

F:

Ich habe gelernt, dass das <form>-

Element zum Abschicken ein action-

Attribut benötigt. Warum fehlt das hier?

A: Das action-Attribut wird hier nicht

gebraucht, da die Formulareingaben nicht

an einen Server geschickt, sondern direkt im

Browser mit JavaScript verarbeitet werden.

Dafür implementieren wir einen Event-

Handler, der auf das Anklicken des Buttons

reagiert. Alles Weitere erledigen wir im Code

– auch das Auslesen der Benutzereingaben

im Formular. Beachten Sie, dass der Wert

des type-Attributs des Buttons hier »button«

lautet. Bei der Datenübermittlung an ein

PHP- oder ein anderes serverseitiges

Programm bräuchten wir stattdessen den

Wert »submit«. Auf dieses Thema werden

wir später in diesem Kapitel noch genauer

eingehen.

Es gibt keine

Dummen Fragen