320 Kapitel 8
Den HTML-Code für das Spiel planen
1
Zu Beginn konzentrieren wir uns auf den
Hintergrund des Spiels. Als Hintergrundfarbe
für die Grafik wählen wir Schwarz. Dann
platzieren wir das Bild in der Seite.
2
Als Nächstes erstellen wir eine HTML-
Tabelle und legen sie über das Hinter-
grundbild. Jede Tabellenzelle steht für
eine Zelle im Spielraster.
3
Im Anschluss bauen wir ein HTML-
Formular zur Eingabe der Ratever-
suche durch die Spieler, z. B. »A4«,
ein. Außerdem integrieren wir einen
Bereich zur Anzeige von Meldungen
wie »Schiff versenkt!«.
Die HTML-Seite erstellen: Überblick
Hier ist der Plan für die Erstellung der »Schiffe versenken«-HTML-Seite:
Zum Schluss finden wir heraus, wie
wir die Tabelle benutzen können,
um die Bilder des Schiffs oder der
»Daneben«-Grafik im Spielfeld anzei-
gen können.
4
Ein HTML-Formular
für Spielereingaben.
Im Hintergrund platzieren
wir ein Bild, das dem
Spiel seine coole, grüne,
radarartige Atmosphäre
verleiht.
Der Hintergrund
wird mit einer
HTML-Tabelle
überlagert. Sie
stellt das eigentliche
Spielfeld bereit.
Diese Bilder
werden bei Bedarf
in der Tabelle
angezeigt.
Schritt 1: Die HTML-
Grundstruktur
Zuerst brauchen wir eine HTML-Seite. Wir
beginnen mit einem einfachen HTML5-
kompatiblen Dokument. Außerdem fügen wir
ein paar Stile für das Hintergrundbild ein. Im
<body>-Element der Seite steht ein einzelnes
<div>-Element. Dieses enthält das Spielraster.
Auf der folgenden Seite finden Sie den für den
Anfang nötigen HTML- und CSS-Code.
Etwas eingerostet?
Wenn Ihre HTML- und
CSS-Kenntnisse etwas ein-
gerostet sind, wird Ihnen
HTML & CSS von Kopf bis
Fuß ein guter Begleiter für
dieses Buch sein.
Entspannen
Sie sich
Entspannen
Sie sich
Sie sind hier � 321
Die Einzelteile zusammenfügen
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Schiffe versenken</title>
<style>
body {
background-color: black;
}
div#board {
position: relative;
width: 1024px;
height: 863px;
margin: auto;
background: url("board.jpg") no-repeat;
}
</style>
</head>
<body>
<div id="board">
</div>
<script src="battleship.js"></script>
</body>
</html>
Eine einfache HTML-Seite.
Das Spielfeld soll horizontal zentriert werden.
Daher definieren wir eine Breite von
1
024px
(entsprechend der Breite von board.jpg) und
setzen die Außenabstände auf auto.
Der Hintergrund der Seite
soll schwarz sein.
Hier integrieren wir die Grafik
»board.jpg« als Hintergrund für
das »board«-<div> in die Seite.
Das <div> wird relativ positioniert,
damit im nächsten Schritt die
Tabelle korrekt darin platzieren
werden kann.
Hier hinein kommt die
Tabelle für das Spielfeld
und das Formular für die
Benutzereingaben.
So sieht die Webseite
im Moment aus …
Probefahrt
Speichern Sie den oben stehenden Code in einer Datei namens »battleship.html«
(oder laden Sie sich den Beispielcode für dieses Buch unter http://examples.oreilly.de/
german_examples/hfjavascriptprogger/Beispielcode.zip herunter). Danach können Sie
die Datei in Ihrem Browser testen. Hier ist unser Ergebnis:
Unser Code kommt in die Datei
»battleship.js«. Legen Sie die
Datei ruhig jetzt schon an.
322 Kapitel 8
Den HTML-Code für das Spiel bauen
Schritt 2: Die Tabelle erstellen
<div id="board">
<table>
<tr>
<td id="00"></td><td id="01"></td><td id="02"></td><td id="03">
</td><td id="04"></td> <td id="05"></td><td id="06"></td>
</tr>
<tr>
<td id="10"></td><td id="11"></td><td id="12"></td><td id="13"></td>
<td id="14"></td> <td id="15"></td><td id="16"></td>
</tr>
...
<tr>
<td id="60"></td><td id="61"></td><td id="62"></td><td id="63"></td>
<td id="64"></td><td id="65"></td><td id="66"></td>
</tr>
</table>
</div>
Es folgt die Tabelle. Sie überlagert das visuelle Raster im Hintergrundbild und stellt den
Bereich zur Verfügung, in dem während des Spiels die Grafiken für Treffer und Fehlversuche
platziert werden. Jede Tabellenzelle (<td>-Element) liegt genau über einer Rasterzelle des
Hintergrundbilds. Und hier kommt der Trick: Wir geben jeder Zelle ihre eigene ID, damit
wir Sie später mit CSS und JavaScript verändern können. Wir wollen einmal sehen, wie die
IDs angelegt werden, und dann den HTML-Code für die Tabelle einbauen:
Jede Zelle im Raster
entspricht einem <td>-
Element in der Tabelle.
Jede ID steht für die
Position einer Zelle im
Raster. Die Zelle in der
linken oberen Ecke erhält die
ID »00«, die Zelle rechts
unten bekommt »66«.
Im Spiel werden die Zeilen durch
Buchstaben (A, B, C usw.) gekennzeichnet.
Für unsere IDs ersetzen wir die
Buchstaben durch die entsprechenden
Zahlen (0,
1
, 2 usw.). Die erste Zeile
im Raster ist also Zeile 0 (für A), die
letzte ist Zeile 6 (für G).
Diese Zelle hat
die ID »66«
Hier ist der HTML-Code für die Tabelle. Fügen Sie ihn zwischen den <div>-Tags ein:
Wir platzieren die Tabelle innerhalb des »spielfeld«-<div>.
Stellen Sie sicher, dass
jedes <td>-Element
entsprechend seiner Zeile
und Spalte im Raster die
korrekte ID bekommt.
Um ein paar Bäume zu retten, stehen
hier nicht alle Zeilen. Sie können sie
selbstständig in die Datei eintragen.
Für diese Zelle
gilt id="06".
Get JavaScript-Programmierung von Kopf bis Fuß now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
