352 Kapitel 8
Den Rateversuch parsen
function parseGuess(guess) {
var alphabet = ["A", "B", "C", "D", "E", "F", "G"];
if (guess === null || guess.length !== 2) {
alert("Hoppla, das ist nicht auf dem Spielfeld.");
} else {
var firstChar = guess.charAt(0);
var row = alphabet.indexOf(firstChar);
}
}
Wir haben einen soliden Plan für die Programmierung. Also los:
Die parseGuess-Methode implementieren
1
Wir beginnen mit Schritt 1 und 2. Hier müssen wir nur den Rate-
versuch übernehmen und validieren. Für den Anfang benutzen wir
folgende Bedingungen: Der String ist gültig, wenn er nicht null ist
und aus genau zwei Zeichen besteht.
2
function parseGuess(guess) {
if (guess === null || guess.length !== 2) {
alert("Bitte geben Sie einen Buchstaben und eine Zahl
auf dem Spielfeld ein.");
}
}
Der Rateversuch wird an den Parameter guess übergeben.
Danach testen wir auf null und stellen sicher,
dass der String aus zwei Zeichen besteht.
Ansonsten informieren
wir den Spieler.
3
Mithilfe eines Helfer-Arrays mit den Buchstaben A bis F konvertie-
ren wir den Buchstaben in eine Zahl. Anhand der indexOf- Methode
können wir den Index des Buchstabens ermitteln, wie hier:
Ein Array mit den gültigen Buchstaben.
Das erste Zeichen des
Rateversuchs auslesen.
Mithilfe von indexOf erhalten wir eine Zahl zwischen
0 und 6, die auf einen Buchstaben passt. Testen Sie die
Funktionsweise ruhig einmal mit ein paar eigenen Beispielen.
Sie sind hier � 353
Die Einzelteile zusammenfügen
4
5
Jetzt können wir testen, ob es sich bei den Zeichen des Rateversuchs
um zwei Zahlen zwischen 0 und 6 handelt (d. h., wir haben gültige
Positionen auf dem Spielfeld).
function parseGuess(guess) {
var alphabet = ["A", "B", "C", "D", "E", "F", "G"];
if (guess === null || guess.length !== 2) {
alert("Bitte geben Sie einen Buchstaben und eine Zahl
auf dem Spielfeld ein.");
} else {
var firstChar = guess.charAt(0);
var row = alphabet.indexOf(firstChar);
var column = guess.charAt(1);
if (isNaN(row) || isNaN(column)) {
alert("Hoppla, das ist nicht auf dem Spielfeld.");
} else if (row < 0 || row >= model.boardSize ||
column < 0 || column >= model.boardSize) {
alert("Hoppla, das ist nicht auf dem Spielfeld.");
}
}
}
Das zweite Zeichen im String, das
die Spalte angibt, wird ausgelesen.
Anhand der Funktion isNAN
überprüfen wir, ob Zeile und Spalte
tatsächlich numerische Werte sind.
Außerdem überprüfen wir, ob die
Zahlen zwischen 0 und 6 liegen.
Wir verallgemeinern hier sogar noch mehr.
Anstatt die Zahl 6 hartzukodieren, holen wir
uns die Spielfeldgröße für den Vergleich vom
Model.
Anstatt den Wert 6 als Obergrenze für Zeilen- und Spaltenlänge
hartzukodieren, haben wir die Eigenschaft boardSize des Models
benutzt. Welchen Vorteil hat das Ihrer Meinung nach auf lange Sicht?
Wie Sie sehen, kommt die Typumwandlung
hier ziemlich oft zum Einsatz! column ist
ein String. Um zu testen, ob der Wert
zwischen 0 und 6 liegt, verlassen wir uns
auf die automatische Konvertierung.
Kopf-
nuss
354 Kapitel 8
Die parseGuess-Funktion fertigstellen
function parseGuess(guess) {
var alphabet = ["A", "B", "C", "D", "E", "F", "G"];
if (guess === null || guess.length !== 2) {
alert("Bitte geben Sie einen Buchstaben und eine Zahl auf dem Spielfeld ein.");
} else {
var firstChar = guess.charAt(0);
var row = alphabet.indexOf(firstChar);
var column = guess.charAt(1);
if (isNaN(row) || isNaN(column)) {
alert("Hoppla, das ist nicht auf dem Spielfeld.");
} else if (row < 0 || row >= model.boardSize ||
column < 0 || column >= model.boardSize) {
alert("Hoppla, das ist nicht auf dem Spielfeld.");
} else {
return row + column;
}
}
return null;
}
6
Und dies ist das letzte Codestück für die parseGuess-Funktion.
Schlägt ein Teil der Eingabeüberprüfung fehl, geben wir null zurück.
Ansonsten werden Zeile und Spalte des Rateversuchs zurückgegeben.
An diesem Punkt sieht alles
gut aus, und wir können Zeile
und Spalte zurückgeben.
Wenn wir hier landen, ist unterwegs
ein Test fehlgeschlagen, und es wird
null zurückgegeben.
Probefahrt
Bauen Sie den neuen Code in »battleship.js« ein und fügen Sie
die folgenden Funktionsaufrufe hinzu:
console.log(parseGuess("A0"));
console.log(parseGuess("B6"));
console.log(parseGuess("G3"));
console.log(parseGuess("H0"));
console.log(parseGuess("A7"));
Laden Sie »battleship.html« neu und sehen Sie sich das Kon-
solenfenster an. Die Ergebnisse (und möglicherweise die eine
oder andere alert-Meldung) sollten jetzt angezeigt werden.
JavaScript-Konsole
00
16
63
null
null
Damit wir einen
String zurückgeben
können, werden
Zeile und Spalte
miteinander
verbunden. Auch
hier kommt die
Typumwandlung zum
Einsatz: Die Zeile ist
eine Zahl, während
die Spalte ein String
ist. Das Ergebnis ist
ein String.
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.
