360 Kapitel 8
Den Controller testen
Jetzt können wir die Einzelteile endlich zusammensetzen. Wir haben
einen Controller, der schon ganz heiß darauf ist, einen Rateversuch des
Spielers entgegenzunehmen. Jetzt müssen wir nur noch die Eingaben
übergeben. Also nichts wie los:
Die Eingaben an den Controller übergeben
function handleFireButton() {
var guessInput = document.getElementById("guessInput");
var guess = guessInput.value;
controller.processGuess(guess);
guessInput.value = "";
}
Probefahrt
Das ist hier schon mehr als ein Testlauf. Sie können endlich richtig spielen!
Stellen Sie sicher, dass der gesamte Code in »battleship.js« übertragen
wurde, und rufen Sie dann »battleship.html« im Browser auf. Vergessen
Sie nicht, dass die Positionen der Schiffe noch hartkodiert sind. Sie sollten
das Spiel also leicht gewinnen können. Unten finden Sie die dafür nötigen
Spielzüge. Trotzdem sollten Sie Ihren Code sorgfältig testen. Geben Sie
Fehlversuche, ungültige und schlichtweg falsche Rateversuche ein.
A6
B6
C6
C4
D4
E4
B0
B1
B2
Das hier sind die Rateversu-
che, um das Spiel zu gewin-
nen. Sie können in beliebiger
Reihenfolge eingegeben
werden. Werfen Sie die Werte
ruhig etwas durcheinander.
Geben Sie zwischendurch auch
ungültige Werte ein. Treffen
Sie absichtlich daneben. Das
ist alles Teil der Tests für
die Qualitätssicherung (QA)
des Spiels.
Sobald der Rateversuch des Spielers an
den Controller übergeben ist, sollte alles
andere wie von selbst funktionieren!
Diese kleine Zeile setzt das input-Element des Formulars
auf einen leeren String zurück. So müssen Sie den Text
nicht manuell auswählen und löschen, um einen neuen Wert
einzugeben. Das wäre wirklich ziemlich lästig.
Sie sind hier � 361
Die Einzelteile zusammenfügen
Seriöses Programmieren
Finden Sie es auch ein bisschen holperig, für jeden Rateversuch den Feuer!-
Button anklicken zu müssen? Das funktioniert, keine Frage, aber es ist langsam
und unbequem. Es wäre wesentlich einfacher, wenn Sie einfach die RETURN-
Taste drücken könnten, oder? Hier ein bisschen Code, um mit dem Betätigen der
RETURN-Taste umzugehen:
function handleKeyPress(e) {
var fireButton = document.getElementById("fireButton");
if (e.keyCode === 13) {
fireButton.click();
return false;
}
}
Einen neuen Handler für
Tastatureingaben einrichten.
function init() {
var fireButton = document.getElementById("fireButton");
fireButton.onclick = handleFireButton;
var guessInput = document.getElementById("guessInput");
guessInput.onkeypress = handleKeyPress;
}
Aktualisieren Sie Ihre init-Funktion, indem Sie die Funktion handleKeyPress
ergänzen. Laden Sie die Seite neu und lassen Sie das Spiel beginnen!
Hier ist die Handler-Funktion, die
aufgerufen wird, sobald innerhalb des
Formulars eine Taste gedrückt wird.
Der Browser übergibt dem Handler
ein Event-Objekt. Dieses enthält die
Informationen darüber, welche Taste
gedrückt wurde.
Sobald Sie die RETURN-Taste drücken,
erhält die keyCode-Eigenschaft des
Events den Wert
1
3. In diesem Fall soll
sich der Feuer!-Button verhalten, als sei
er angeklickt worden, was wir mit dessen
click-Methode realisieren (hierdurch
gaukeln wir dem Button quasi vor, er sei
angeklickt worden).
Außerdem geben wir false zurück, damit das
Formular nicht versehentlich noch andere Dinge
tut (z. B. versucht, sich selbst abzuschicken)
362 Kapitel 8
Die Positionen für die Schiffe planen
Was fehlt noch? Oh ja, Mist,
die hartkodierten Schiffe!
A
B
C
D
E
F
G
0 1 2 3 4 5 6
Schiff
Schiff
Schiff
Schiff
Die Schiffe
dürfen sich nicht
überschneiden.
Hier wird ein
Schiff platziert.
Die Schiffe
können vertikal
oder horizontal
platziert werden.
Und hier noch eins.
Das hier wird aber nicht funktionieren,
da sich zwei Schiffe überschneiden.
Diese Position müssen wir überdenken.
Hier ist eine dritte
Schiffsposition, die
funktioniert.
Inzwischen haben wir aus ein bisschen HTML, ein paar Bildern
und etwa 100 Zeilen Code ein ziemlich cooles browserbasiertes Spiel
entwickelt. Eine Sache stört aber noch: Die Schiffe werden immer
an der gleichen Position platziert. Uns fehlt noch der Code, mit dem
die Schiffe beim Starten des Spiel zufällig platziert werden (ansonsten
würde das Spiel schnell ziemlich langweilig werden).
Vorher sollten Sie noch wissen, dass wir diesen Code etwas zügiger
abhandeln. Sie können den Code mittlerweile deutlich besser und
schneller nachvollziehen als noch vor ein paar Kapiteln. Außerdem gibt
es hier nicht viel Neues. Auf folgende Dinge müssen Sie achten:
Sie sind hier � 363
Die Einzelteile zusammenfügen
Füge das neue Schiff dem
Array ships hinzu.
Erzeuge eine zufällige
Ausrichtung (horizontal oder
vertikal) für das neue Schiff.
Erzeuge eine zufällige
Position für ein Schiff.
Führe eine Schleife
über die Anzahl der zu
erzeugenden Schiffe aus.
Überprüfe, ob die Position
des neuen Schiffs sich mit
existierenden Schiffen
überschneidet.
Codemagneten
Der Algorithmus zum Erzeugen der Schiffspositionen ist an der Kühlschranktür durcheinander-
geraten. Können Sie die Magneten an den richtigen Platz rücken, damit der Algorithmus wieder
funktioniert? Überprüfen Sie Ihre Antwort am Ende des Kapitels, bevor Sie weiterlesen.
Ein Algorithmus ist einfach ein
anderes Wort für eine Reihe
von Schritten zum Lösen eines
Problems.
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.
