Sie sind hier � 333
Die Einzelteile zusammenfügen
var view = {
displayMessage: function(msg) {
var messageArea = document.getElementById("messageArea");
messageArea.innerHTML = msg;
},
displayHit: function(location) {
},
displayMiss: function(location) {
}
};
Öffnen Sie jetzt die noch leere Datei »battleship.js« und bauen Sie das view-Objekt ein:
Die Methode displayMessage übernimmt ein
Argument. Den Parameter nennen wir msg.
Hier holen wir uns das
messageArea-Element
aus der Seite …
…und aktualisieren den Text von messageArea
per innerHTML mit dem Inhalt von msg.
Bevor wir den Code testen, wollen wir noch die anderen zwei
Methoden schreiben. Sie sind nicht besonders kompliziert,
außerdem können wir das Objekt so als Ganzes testen.
Die Funktionsweise von displayHit und displayMiss
Nur zur Erinnerung: Damit ein Bild auf dem Spielfeld angezeigt werden
kann, müssen wir der entsprechenden Tabellenzelle die Klasse »hit« oder
»miss« zuweisen. Im ersten Fall wird das Bild »ship.png« angezeigt, im
zweiten »miss.png«.
<tr>
<td id="10"></td> <td class="hit" id="11"></td> <td id="12"></td> ...
</tr>
Im Code benutzen wir das DOM, um auf ein <td>-Element
zuzugreifen. Über die Elementmethode setAttribute können
wir ihm dann die Klasse »hit« oder »miss« zuweisen, wodurch
das entsprechende Bild im Browser angezeigt wird.
Das geht so:
Übernehmen Sie einen ID-String aus zwei Zahlen, der
die Position für Treffer oder Fehlversuch wiedergibt.
Benutzen Sie das DOM, um auf das Element mit der
passenden ID zuzugreifen.
In displayHit erhält das class-Attribut des
Elements den Wert »hit«, in displayMiss ist es
stattdessen »miss«.
Wir können die Darstellung verändern,
indem wir dem <td>-Element die Klasse
»hit« oder »miss« zuweisen. Jetzt
müssen wir das nur noch im Code machen.
334 Kapitel 8
Den View implementieren
Hier benutzen wir die aus der
Benutzereingabe erzeugte ID, um das
richtige Element zu aktualisieren …
var view = {
displayMessage: function(msg) {
var messageArea = document.getElementById("messageArea");
messageArea.innerHTML = msg;
},
displayHit: function(location) {
var cell = document.getElementById(location);
cell.setAttribute("class", "hit");
},
displayMiss: function(location) {
var cell = document.getElementById(location);
cell.setAttribute("class", "miss");
}
};
… und setzen dann die Klasse
des Elements auf "hit".
Genauso gehen wir auch bei displayMiss vor. Nur wird
hier die Klasse "miss" benutzt, wodurch das Bild
»miss.png« in das Element eingefügt wird.
Der Wert von location bezieht sich auf eine
Zeile und Spalte im Raster und deckt sich
mit der ID eines <td>-Elements.
Jetzt können Sie den neuen Code für displayHit und displayMiss in Ihre Datei »battleship.js« einbauen.
displayHit und displayMiss implementieren
Die Methoden displayHit und displayMiss übernehmen beide die Position eines
Treffers bzw. Fehlversuchs als Argument (den Parameter nennen wir location). Die
Position sollte mit der ID einer Tabellenzelle (<td>) in der HTML-Tabelle für das
Spielfeld übereinstimmen. Zuerst besorgen wir uns mit der Methode getElementById
eine Referenz auf das Element. Hier ein Versuch mit der displayHit-Methode:
Jetzt wollen wir diesen Code in das View-Objekt einbauen. Im gleichen Zug
schreiben wir auch die Methode
displayMiss:
Dann setzen wir das class-Attribut des
Elements auf "hit", wodurch das Bild des
Schiffs in das <td>-Element eingefügt wird.
displayHit: function(location) {
var cell = document.getElementById(location);
},
Jetzt wollen wir der Zelle die Klasse »hit« zuweisen. Dafür nutzen wir die Methode
setAttribute, wie hier gezeigt:
displayHit: function(location) {
var cell = document.getElementById(location);
cell.setAttribute("class", "hit");
},
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.
