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( let i = 0; i < dino.length; i ++){
document.write(dino[i] + "<br>");
}
Array mit Werten versehen
let zahlen = [];
for (let 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. Dazu wird eine for-Schleife genutzt und die Variable i bei jedem Schleifendurchlauf um 1 erhöht. Dieser Wert i bekommt immer den gleichen Modulo Wert, beispielsweise 4. Dadurch entsteht eine Zahlenreihe von 0 bis 3, die sich ständig wiederholt.
i%4
Der Wert i mit Modulo 4 erzeugt die Werte:
0, 1, 2, 3, 0, 1, 2, 3, 0.....
Modulo gibt den Restbetrag einer Division zurück. 10%3 ergibt 1, denn 10 geteilt durch 3 ergibt 9 Rest 1.
Diesen Wert kann man mit einem immer gleichen Wert multiplizieren, um Positionswerte für die Horizontale zu erhalten.
Nun braucht man für die vertikale Positonierung, 4 mal einen gleichen Wert, dann 4 man einen etwas höheren Wert für die nächste Reihe und so weiter.
Nehmen wir an wir nehmen den Divisor 4 und teilen i bei jedem Schleifendurchlauf mit 4, so erhalten wir folgende Werte:
0, 0.25, 0.5, 0.75, 2, 2.25 , 2.5, 2.75, 3.....
Nehmen wir die Divisionswerte und kürzen diese mit Math.floor, für y Positionen und die Modulo Werte für x Positionen, haben wir ein Raster.
let output = document.getElementById("output");
for(let i=0; i < 12; i++){
output.innerHTML += Math.floor(i/4)+"<br>";
output.innerHTML += i%4 +"<br><br>"
}
Im folgenden Beispiel wurden Abstände zwischen den Elementen (xspace, yspace) mit den x und y Werten mulitpliziert
for(let i=0; i < 10; i++){
output2.innerHTML += (Math.floor(i/4))*yspace+" y ";
output2.innerHTML += (i%4)*xspace +"<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());
Beispiel Farbveränderung mit for-Schleife
