JavaScript-Programmierung von Kopf bis Fuß

324 Kapitel 8

Das Spiel mit CSS ausstatten

Etwas Stil hinzufügen

Wenn Sie das Spiel jetzt laden (versuchen Sie das ruhig einmal),

befinden sich die meisten Elemente an der falschen Stelle und

haben die falsche Größe. Mit etwas CSS können wir aber alles

an seinen Platz rücken und die Dimensionen der Elemente

anpassen. Das gilt besonders für die Tabellenzellen, die ja direkt

über dem Raster der Spielfeldgrafik liegen sollen.

Damit die Elemente an der richtigen Stelle stehen, verwenden

wir CSS-Positionierung. Wir haben das »board«-<div> relativ

positioniert, wodurch Nachrichtenbereich, Tabelle und Formu-

lar an bestimmten Stellen innerhalb des »board«-<div> entspre-

chend unseren Vorstellungen positioniert werden können.

Wir beginnen mit dem »Nachrichtenbereich«. Das entsprechen-

de <div> befindet sich innerhalb des »board«-<div> und soll in

der linken oberen Ecke des Spielfelds positioniert werden:

body {

background-color: black;

}

div#board {

position: relative;

width: 1024px;

height: 863px;

margin: auto;

background: url("board.jpg") no-repeat;

}

div#messageArea {

position: absolute;

top: 0px;

left: 0px;

color: rgb(83, 175, 19);

}

Der Nachrichtenbereich

wird in der linken oberen

Ecke verankert.

Das »board«-<div> ist

relativ positioniert. Dadurch

können verschachtelte Elemente

im Verhältnis zu »board«

positioniert werden.

Der Nachrichtenbereich soll

in der linken oberen Ecke des

Spielfelds angezeigt werden.

 Bei »position: relative« ohne

weitere Angaben wie z. B. top

oder left behält ein Element seine

Position im Dokumentenuss bei,

schafft aber einen Kontext für die

Positionierung von verschachtelten

Elementen.

 »position: absolute« positioniert ein

Element abhängig vom nächsten

(absolut, relativ oder statisch)

positionierten Vorfahrenelement.

 Anhand der CSS-Eigenschaften

top und left kann der Abstand eines

Elements von seiner Standardposi-

tion angegeben werden.

Das messageArea-<div> ist im board-<div>

verschachtelt. Durch die relative Positionierung

von »board« können wir den Nachrichtenbereich

jeweils 0 Pixel von der linken und oberen Kante

des Spielfelds entfernt platzieren.

Punkt für Punkt

Sie sind hier � 325

Die Einzelteile zusammenfügen

body {

background-color: black;

}

div#board {

position: relative;

width: 1024px;

height: 863px;

margin: auto;

background: url("board.jpg") no-repeat;

}

div#messageArea {

position: absolute;

top: 0px;

left: 0px;

color: rgb(83, 175, 19);

}

table {

position: absolute;

left: 173px;

top: 98px;

border-spacing: 0px;

}

td {

width: 94px;

height: 94px;

}

form {

position: absolute;

bottom: 0px;

right: 0px;

padding: 15px;

background-color: rgb(83, 175, 19);

}

form input {

background-color: rgb(152, 207, 113);

border-color: rgb(83, 175, 19);

font-size: 1em;

}

Auf die gleiche Weise können wir auch die Tabelle und das Formular

im »board«-<div> platzieren. Hier verwenden wir ebenfalls die absolute

Positionierung, um die Elemente exakt an der gewünschten Stelle

einzupassen. Hier ist der Rest des CSS-Codes:

Wir verschieben die Tabelle um

1

73 Pixel nach rechts

(left = Abstand zur linken Kante) und 98 Pixel nach

unten (top = Abstand zur oberen Kante), damit sie

genau über der Rastergrafik liegt.

Jedes <td>-Element erhält eine feste Breite und

Höhe, damit die Tabellenzellen genau mit den Zellen

im Raster übereinstimmen.

Das <form>-Element wird in der rechten unteren

Ecke des Spielfelds positioniert. Dadurch werden

die Zahlen in dieser Ecke teilweise verdeckt (aber

Sie wissen ja, wie sie lauten). Außerdem bekommt

das <form>-Element passend zum Hintergrundbild

eine nette grüne Hintergrundfarbe.

Zum Schluss noch ein paar Stile, um die <input>-

Elemente an die visuelle Gestaltung des Spiels

anzupassen. Danach sind wir schon fertig!

326 Kapitel 8

CSS für Treffer und Fehlversuche

Eine Probefahrt

Es ist Zeit für einen weiteren Test. Geben Sie den bisherigen HTML- und CSS-Code

in Ihre HTML-Datei ein und laden Sie die Seite in Ihrem Browser. Sie sollte ungefähr

so aussehen:

Schritt 4: Treffer und Fehlversuche anzeigen

Das Spielfeld sieht schon gut aus, oder? Allerdings brauchen wir noch einen Weg,

um die Treffer und Fehlversuch auf dem Spielfeld anzuzeigen. Die Frage ist, wie wir

für jeden Rateversuche die Grafiken »ship.png« bzw. »miss.png« an der richtigen

Stelle im Spiel platzieren können. Es geht erst mal nur darum, Markup und Stile

richtig hinzubekommen. Danach verwenden wir die gleiche Technik im Code.

Wie können wir also »ship.png« oder »miss.png« auf dem Spielfeld anzeigen? Eine

einfache Methode besteht darin, das passende Bild per CSS als Hintergrund für

das entsprechende <td>-Element zu definieren. Hierfür erstellen wir zwei Klassen

namens »hit« (Treffer) und »miss« (Daneben). Wir binden die Bilder über die CSS-

Eigenschaft background ein. Dadurch erhalten Elemente mit der Klasse »hit« das

Hintergrundbild »ship-png«, während Elemente mit der Klasse »miss« die Grafik

»miss.png« zugewiesen bekommen. Der Code sieht so aus:

.hit {

background: url("ship.png") no-repeat center center;

}

.miss {

background: url("miss.png") no-repeat center center;

}

Obwohl unsichtbar,

befindet sich die Tabelle

genau über dem Raster.

Das Formular ist für

Eingaben bereit, auch

wenn ohne Code noch

nicht viel passiert.

ship.png

miss.png

Beide CSS-Regeln

platzieren ein

einzelnes zentriertes

Bild im gewählten

Element.

Ein Element mit der Klasse »hit« erhält das Bild »ship.png«. Lautet die Klasse »miss«,

verwenden wir stattdessen »miss.png« als Hintergrund.