JavaScript-Programmierung von Kopf bis Fuß

Sie sind hier � 355

Die Einzelteile zusammenfügen

 Rateversuche des Spielers (wie »A0« oder »B1«)

entgegennehmen und verarbeiten.

 Die Anzahl der Rateversuche mitverfolgen.

 Das Model anweisen, sich selbst basierend auf dem letzten

Rateversuch zu aktualisieren.

 Feststellen, wann das Spiel vorbei ist (also alle Schiffe

versenkt sind).

Die Helferfunktion

parseGuess ist fertig. Jetzt können wir den

Controller implementieren. Dafür bauen wir erst einmal die

parseGuess-Funktion in den bestehenden Controller-Code ein:

Währenddessen im Controller …

var controller = {

guesses: 0,

processGuess: function(guess) {

var location = parseGuess(guess);

if (location) {

}

}

};

Damit haben wir die erste Aufgabe für den Controller erledigt.

Mal sehen, was noch übrig ist:

Wir benutzen parseGuess für die

Validierung des Rateversuchs.

Sofern der Rückgabewert nicht

null ist, wissen wir, dass ein gültiges

location-Objekt übergeben wurde.

Nicht vergessen: null

ist ein falsey-Wert.

Und hier kommt der übrige

Controller-Code hin.

Damit befassen

wir uns als

Nächstes.

Der nächste Punkt auf unserer Liste ist einfach: Um die Anzahl der Rate-

versuche zu überwachen, reicht es, die Eigenschaft guesses bei jedem

Rateversuch um eins zu erhöhen. Spieler, die ungültige Eingaben vornehmen,

sollen nicht betraft werden.

Danach weisen wir das Model an, sich anhand der Benutzereingabe durch

einen Aufruf der fire-Methode selbst zu aktualisieren. Schließlich geht es

bei dem Rateversuch darum, eines der Schiffe zu treffen. Wir wissen, dass die

fire-Methode einen String bestehend aus Zeile und Spalte übernimmt, der

uns netterweise von parseGuess erzeugt wird. Wie angenehm und praktisch.

Und damit ist es Zeit für den nächsten Schritt …

Rateversuche zählen und feuern

356 Kapitel 8

Wann ist das Spiel vorbei?

var controller = {

guesses: 0,

processGuess: function(guess) {

var location = parseGuess(guess);

if (location) {

this.guesses++;

var hit = model.fire(location);

}

}

};

var controller = {

guesses: 0,

processGuess: function(guess) {

var location = parseGuess(guess);

if (location) {

this.guesses++;

var hit = model.fire(location);

if (hit && model.shipsSunk === model.numShips) {

view.displayMessage("Sie haben mit " + this.guesses + "

Versuchen alle Schiffe versenkt.");

}

}

}

};

Hat der Spieler einen

gültigen Rateversuch

eingegeben, wird der Wert

von guesses inkrementiert.

Dann werden Zeile und Spalte als String an

die fire-Methode übergeben. Wurde ein Schiff

getroffen, ist ihr Rückgabewert true.

Jetzt müssen wir nur noch feststellen, ob das Spiel vorbei ist. Das ist der Fall, wenn alle

drei Schiffe versenkt wurden. Also überprüfen wir bei jedem Treffer anhand der Methode

model.shipsSunk die Zahl der versenkten Schiffe. Wurden drei Schiffe versenkt, ist das

Spiel zu Ende. Um den Code etwas zu verallgemeinern, wird die Zahl 3 nicht hartkodiert,

sondern wir benutzen den Wert der Eigenschaft model.numShips. Dadurch muss dieser

Code nicht angepasst werden, falls Sie die Anzahl der Schiffe später etwa auf 2 oder 4

ändern möchten. Der Code wird trotzdem korrekt funktionieren.

Game over?

Ergab der Rateversuch einen Treffer

und die Anzahl der versenkten Schiffe

entspricht der Zahl der Schiffe im

Spiel, erhält der Spieler die Meldung,

dass alle Schiffe versenkt wurden.

Wir zeigen dem Spieler, wie viele Versuche

nötig waren, um alle Schiffe zu versenken.

Wir benutzen hier guesses als Eigenschaft

des »this«-Objekts, also des Controllers.

Die Anweisung this.guesses++

erhöht den Wert von guesses

um eins. Das funktiert analog

zu i++ in Schleifen.

Gibt der Spieler eine

falsche Position ein, wird

er nicht bestraft. Der

Versuch wird nicht gezählt.

Sie sind hier � 357

Die Einzelteile zusammenfügen

Eine Probefahrt

Stellen Sie sicher, dass Sie den gesamten Code für den Controller in die Datei »battle-

ship.js« übertragen haben. Dann können Sie ein paar Funktionsaufrufe hinzufügen,

um den Controller zu testen. Laden Sie »battleship.html« neu und beobachten Sie

die Treffer und Fehlversuche auf dem Spielfeld. Ist alles am rechten Platz? (Unsere

Version finden Sie in der Datei »battleship_tester.js«.)

Zwar informieren wir den Spieler, dass alle Schiffe versenkt

wurden, trotzdem ist es immer noch möglich, Rateversuche

einzugeben. Was würden Sie tun, um das zu verhindern?

controller.processGuess("A0");

controller.processGuess("A6");

controller.processGuess("B6");

controller.processGuess("C6");

controller.processGuess("C4");

controller.processGuess("D4");

controller.processGuess("E4");

controller.processGuess("B0");

controller.processGuess("B1");

controller.processGuess("B2");

Wir rufen die Methode processGuess

auf und übergeben die Rateversuche im

»Schiffe versenken«-Format.

Auch jetzt müssen Sie den vorigen Testcode entfernen oder

auskommentieren, um die hier gezeigten Ergebnisse zu erhalten.

Wie das funktioniert, sehen Sie in battleship_tester.js.

Kopf-

nuss