For-Schleifen wozu man sie braucht
For Schleifen sind im Zusammenhang mit Arrays sehr wichtig. Man kann Arrays auslesen oder ein Array mit Werten füllen. Desweiteren kann man For-Schleifen nutzen um x-y Positionierungen zu definieren oder um die Reihenfolge eines Arrays zu mischen, beispielsweise für ein Kartenspiel.
Array auslesen
var dino =["T-Rex", "Brontosaurus", "Veloceraptor", "Stegosaurus", "Diplodocus"];
for( var i = 0; i < dino.length; i ++){
document.write(dino[i] + "<br>");
}
Array mit Werten versehen
var zahlen = [];
for (i = 0; i < 10; i ++){
zahlen[i] = i;
}
Positionswerte
Man kann eine For-Schleife nutzen um Elemente zu positionieren.
Das folgende Beispiel kann man dazu nutzen Objekte in Reihen und Spalten auf der Seite anzuordnen.
In diesem theoretischen Beispiel werden die Objekte in mehren Reihen angeordnet, bis die Anzahl der vorgegebenen Reihen voll ist. Das wird über Modulo erreicht. Modulo gibt den Restbetrag einer Division zurück. 10%3 ergibt 1, denn 10 geteilt durch 3 ergibt 9 Rest 1. Sobald der Restbetrag 0 ist, also die Anzahl der Spalten erreicht ist, wird die Variable "row" um einen erhöht wird. So erhält man Werte für Reihen und Spalten, womit man Anordnungen auf der Bühne erzeugen kann. Die Gesamtanzahl sollte möglichst durch die Anzahl der Spalten teilbar sein.
Beachte, den Startwert von row = -1; Damit row und col bei 0 beginnen, row wird schon beim ersten Schleifenaufruf um 1 erhöht. row++
var anzahl = 25;
var colCount = 5;
var col = 0;
var row = -1;
for(var i = 0; i < anzahl; i++)
{
if (i%colCount == 0){
row++;
}
col = i%colCount;
document.write("row: "+row+" Col: "+col);
}
Im folgenden Beispiel wurden Abstände zwischen den Elementen (xspace, yspace) und ein Abstand vom linken Rand und von der Oberkante hinzugefügt (distLeft, distTop),
var count = 8;
var colCount = 4;
var col = 0;
var row = -1;
var xspace = 100;
var yspace = 20;
var distTop = 100;
var distLeft = 50;
for (var i = 0; i < count; i++) {
if (i % colCount == 0) {
row++;
}
col = i % colCount;
document.write("xpos: "+ (col * xspace + distLeft)+ " ypos: " + (row * yspace + distTop)+"<br>");
}
Im vorigen Beispiel werden die Objekte zuerst in einer Reihe angeordnet. Dann folgt die nächste Reihe. Möchte man zuerst von oben nach unten anordnen und dann die nächste Spalte beginnen, muss einfach nur row und col vertauschen.
document.write("xpos: "+ (row * xspace + distLeft)+ " ypos: " + (col * yspace + distTop)+"<br>");
Mischen
Wenn man ein Kartenspiel mischen will, kommt es darauf an Zufallszahlen zu generieren, die nicht 2 mal vorkommen dürfen. Wie man das macht wird hier erklärt.
var count = 8;
var tempPos = [];
var mixArray = [];
for (i = 0; i < count; i++) {
tempPos[i] = i;
}
for (i = 0; i < count; i++) {
var zuZa = Math.floor(Math.random() * tempPos.length);
mixArray[i] = tempPos[zuZa];
tempPos.splice(zuZa, 1);
}
console.log(mixArray);
Das Array tempPos bekommt in einer for-Schleife die Werte von 0 bis count zugewiesen. Die Indexwerte und die zugewiesenen Werte sind identisch.
In der zweiten for-Schleife wird eine Zufallszahl wird aus der Länge des tempPos Arrays ermittelt.
Mit dieser Zufallszahl wird ein Index des tempPos Arrays angesprochen und dessen Wert dem Array mixArray zugewiesen.
Anschließend wird das Element aus dem tempPos Array gelöscht. Dadurch kann die zugwiesene Zahl nicht ein zweites mal erscheinen. Beim nächsten Schleifendurchlauf ist das tempPos kürzer, denn es wurde ja ein Element gelöscht. Aus dieser Arraylänge wird wieder eine Zufallszahl generiert.
Die Indexwerte und die zugewiesenen Werte sind nicht mehr identisch, sobald das erste Element gelöscht wurde.
Beispiel:
var tempPos = [0,1,2,3,4]; zuZa = 2;
tempPos[zuZa] = 2.
tempPos.splice(zuZa, 1);Nachdem das Element gelöscht ist sähe tempPos so aus;
var tempPos = [0,1,3,4];
Wenn zuZa wiederum 2 wäre, würde diesmal die Zahl 3 zugewiesen.
Mischen komplex
In diesem Beispiel wurde das vorige Beispiel optimiert.
Nehmen wir an es gäbe ein Spiel, in dem Elemente in einer bestimmten Reihenfolge angeordnet werden müssen. Am Anfang des Spiels sollen die Elemente gemischt werden, aber so dass keines der Element an der richtigen Stelle liegt.
Die Spielelemente werden in einem Array card gespeichert. Jedes Element besitzt das Objekt pos , dessen Wert eine zufällige Postion als Ganzzahl enthalten soll. Dieser Wert wird in der Funktion shuffle gemischt. (Es ist für dieses Beispiel nicht unbedingt nötig ein Array mit Objekten zu versehen)
Beim zufälligen Positionieren darf es nicht vorkommen, dass der Wert pos der id des Arrays entspricht.
Beispielsweise card[2] = 2; sollte nicht vorkommen.
Das wird erreicht, indem man in die for Schleife eine while Schleife einbaut.
Diese wird sooft ausgeführt bis die Bedingung false ist.
Die Bedinung ist, dass die id und der zufällige tempPos Wert gleich ist.
Es gibt nur ein Problem bei der Sache. Nehmen wir an der tempPos Wert 7 befindet sich am Ende.
Es wäre der einzige Wert, der noch im tempPos Array vorhanden ist. Dann wäre card[7].pos = 7;
und die while Schleife könnte nicht stoppen.
In dem Fall bleibt nur die Möglichkeit, die komplette Funktion shuffle zu wiederholen.
if (i == 7 && rndPos == 7)shuffle();
Hier gibt es aber noch ein Problem. Das break bewirkt nur dass die while Schleife gestoppt wird
aber nicht die for-Schleife, die Anweisung card[i].pos = i; würde einen Fehler
erzeugen, da tempPos[rndNmb] nicht zur Verfügung steht.
Für diesen speziellen Fall wurde die Anweisung in eine try catch Anweisung eingefügt und der Fehler abgefangen.
var count = 8; //Anzahl der Elemente
var card = [count];//Spielelemente oder Karten
for (var i = 0; i < count; i++){
card[i] = {};
card[i].pos = i;
}
shuffle();
function shuffle() {
var tempPos = [];
for (i = 0; i < count; i++) {
tempPos[i] = i;
}
for (i = 0; i < count; i++) {
var rndNmb = i;
var rndPos = i;
while (i == rndPos) {
var rndNmb = Math.floor(Math.random() * tempPos.length);
var rndPos = tempPos[rndNmb];
if (i == 7 && rndPos == 7) {
shuffle();
break;
}
}
try {
card[i].pos = (tempPos[rndNmb]);
tempPos.splice(rndNmb, 1);
} catch (err) {
console.log("Error");
}
}
showCards();
}
function showCards(){
document.write(card.length+"
");
for(var i = 0; i < count; i++){
document.write(card[i].pos);
}
}
Spielergebnis überprüfen
Hier ein Beispiel für eine Überprüfung eines Spielergebnisses, bei dem verschiedene Aufgaben gelöst werden müssen. Das könnten Karten sein, die an die richtige Stelle gelegt werden müssen, oder Fragen, die mit richtig oder falsch beantwortet werden. Nehmen wir an, diese Ergebnisse würden in dem Array ergebnis gespeichert.
Wenn in dem Array ergebnis irgendeine Variable false ist,
gibt die Funktion false zurück, ansonsten gibt sie true zurück
var ergebnis = [true, false, true, true, true, true];
function solved() {
for (var i = 0; i < ergebnis.length; i++) {
if (!ergebnis[i]) {
return false;
break;
}
}
return true;
}
console.log(solved());
