Sie sind hier � 367
Die Einzelteile zusammenfügen
generateShip: function() {
var direction = Math.floor(Math.random() * 2);
var row;
var col;
if (direction === 1) {
row = Math.floor(Math.random() * this.boardSize);
col = Math.floor(Math.random() * (this.boardSize - this.shipLength));
} else {
row = Math.floor(Math.random() * (this.boardSize - this.shipLength));
col = Math.floor(Math.random() * this.boardSize);
}
var newShipLocations = [];
for (var i = 0; i < this.shipLength; i++) {
if (direction === 1) {
newShipLocations.push(row + "" + (col + i));
} else {
newShipLocations.push((row + i) + "" + col);
}
}
return newShipLocations;
},
Die generateShip-Methode fertigstellen
Jetzt müssen wir die neu erzeugten Schiffspositionen nur noch im Array
newShipLocations speichern.
Mit diesem Code erzeugen wir die
Startposition für ein Schiff.
Um den Code zu verallgemeinern,
haben wir die Zahl 3 (von der vorigen
Seite) durch this.shipLength ersetzt.
Auf diese Weise können die Schiffe
eine beliebige Länge haben.
Dies ist der Code für ein horizontales
Schiff. Sehen wir uns das Schritt für
Schritt an …
Per push fügen wir
die neue Position zu
newShipLocations hinzu.
Die Position ist ein
String aus der gerade
berechneten Startzeile …
… und der Spalte + i. Beim ersten Schleifendurch-
lauf hat i den Wert 0. Wir sind in der Startzeile.
In den nächsten beiden Runden rücken wir jeweils
um eine Zeile weiter. Die Werte im Array lauten
also beispielsweise »0
1
«, »02« und »03«.
Durch die runden Klammern wird dafür gesorgt, dass
der Wert von i zur Variablen col addiert wird, bevor
beides in einen String umgewandelt wird.
Und hier das Gleiche für
ein vertikales Schiff.
Diesmal inkrementieren wir jedoch
die Zahl der Zeile, indem wir
den Wert von row bei jedem
Schleifendurchlauf um i erhöhen.
Die Werte im Array sehen für ein vertikales
Schiff etwa so aus: »3
1
«, »4
1
«, »5
1
«.
Sobald das Array mit Schiffs-
positionen gefüllt ist, können
wir es an die aufrufende Funk-
tion (generateShipLocations)
zurückgeben.
Werden ein String und eine Zahl per
+ kombiniert, ist dies keine Addition,
sondern die Werte werden zu einem
String verbunden.
368 Kapitel 8
Die collision-Methode
collision: function(locations) {
for (var i = 0; i < this.numShips; i++) {
var ship = model.ships[i];
for (var j = 0; j < locations.length; j++) {
if (ship.locations.indexOf(locations[j]) >= 0) {
return true;
}
}
}
return false;
}
Kollisionen vermeiden!
Wir übergeben der collision-Methode ein Schiff, um zu überprüfen, ob sich seine
Positionen mit denen eines anderen Schiffs auf dem Spielfeld überschneiden.
Hierfür haben wir zwei for-Schleifen ineinander verschachtelt. Die äußere Schleife
iteriert über alle Schiffe im Model (model.ships). Die innere Schleife iteriert über
alle Positionen des aktuellen Schiffs und testet, ob diese bereits von einem auf dem
Spielfeld existierenden Schiff eingenommen werden.
locations ist ein Array mit den Positionen
eines neues Schiffs, das auf dem Spielfeld
platziert werden soll.
Für jedes Schiff auf dem Spielfeld …
… wird überprüft, ob sich eine Position
des neuen Schiffs mit den Koordinaten
aus dem locations-Array eines
vorhandenen Schiffs überschneidet.
Anhand von indexOf können wir testen,
ob eine Schiffsposition bereits existiert.
Ist der Index größer oder gleich 0, haben
wir eine vorhandene Position gefunden und
geben zur Bestätigung der Kollision true an
den aufrufenden Code zurück.
Die Verwendung von return in einer
verschachtelten Schleife stoppt die
Iteration beider Schleifen und der
umgebenden Funktion und gibt hier
true zurück.
Wenn wir hier landen, gab es keine
Überschneidung mit den vorhandenen
Positionen, und wir geben false (also
»keine Kollision«) zurück.
Den Aufruf der collision-
Methode sehen Sie auf
Seite 364.
Kopf-
nuss
Dieser Code enthält eine innere und eine äußere Schleife, mit denen wir
über alle Schiffe und Positionen iterieren und nach einer möglichen Kolli-
sion suchen. Für die äußere Schleife benutzen wir die Schleifenvariable i,
für die innere j. Warum werden hier zwei verschiedene Variablennamen
gebraucht?
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.
