Brauche Hilfe mit Schulprojekt

[Rolf B]

Hallo lenny099,

euer Memory ist als erstes Lernprogramm eine schöne Idee. Ich möchte noch ein paar Tipps beisteuern, wie ihr euren Code verbessern könnt.

1. Arrayzugriffe. Array-Indexe beginnen in Javascript bei 0. Es ist daher eigentlich ganz sinnvoll, wenn man den Rest des Programms auf dieser Vorgabe aufbaut, und nicht bei jedem Zugriff 1 subtrahiert. Das bedeutet in euerem Spielfeld dann auch, im click-Handler eine um 1 kleinere Zahl an choose zu übergeben.

2. Mischen der Karten. Einfach tausend mal zwei beliebige Karten vertauschen ist eine Möglichkeit. Bei 64 Karten (Standard-Memory) wird das aber nicht reichen. Eine bessere Idee ist es, wenn ihr Karten aus einer zufälligen Position aus dem Array "zieht"

var eingabeStapel = [ "kat.jpg", "kat.jpg", "teemo.jpg", "teemo.jpg", "blitz.jpg", "blitz.jpg", "yi.jpg", "yi.jpg", "garen.jpg", "garen.jpg", "yasuo.jpg", "yasuo.jpg",
		"vel.jpg", "vel.jpg", "annie.jpg", "annie.jpg" ];

// Beginne mit leerem KartenArray
var kartenArray = [];

// Bei 16 Karten: Schleife von 15 bis 0
for (var i=eingabeStapel.length-1; i>= 0; i--) {
   // Zufallszahl von 0 bis i
   var p = parseInt(Math.random() * i);
   // Ermittelte Karte ans kartenArray anhängen
   kartenArray.push(eingabeStapel[p]);
   // gezogene Karte durch letzte Karte im eingabeStapel überschreiben
   eingabeStapel[p] = eingabeStapel[i];
}

Auf diese Weise bekommt ihr auch eine Zufallsverteilung, braucht aber nur so viele Durchläufe wie ihr Karten habt. Der letzte Schritt in der Schleife, wo die wegkopierte Karte durch die letzte Karte des Eingabestapels überschrieben wird, löst das Problem dass es in JavaScript keine Funktion gibt, die mitten in einem Array einen Eintrag entfernt und die folgenden Einträge umnummeriert. Sowas kann man zwar nachbauen, das wäre aber langsam. Das Kopieren des letzten Eintrags füllt die entstandene Lücke ebenfalls, und weil i pro Durchlauf um 1 kleiner wird, wird der letzte Eintrag in den folgenden Durchläufen nicht mehr verwendet.

3. Zugriff auf die Bilder. document.images ist ungeeignet, weil darin JEDES Bild auf der Seite enthalten ist. Wenn ihr ein nettes Titelbild auf die Seite setzt, müsstet ihr die Zugriffe auf document.images anpassen. Sowas nennt man zerbrechlichen Code, und sowas möchte man vermeiden. Was ihr tun könnt, ist dies: Gebt der table ein id Attribut, damit ihr euer "Spielfeld" im JavaScript eindeutig identifizieren könnt. Nun verwendet die Funktion querySelectorAll, um alle <img> Elemente darin zu finden:

var spielfeld = document.getElementById("spielfeld");
var memoryBilder = spielfeld.querySelectorAll("img");

// Man kann das auch zu einer Zeile zusammenfassen:
var memoryBilder = document.getElementById("spielfeld").querySelectorAll("img");

querySelectorAll ist eine Funktion, die CSS Selektoren verwendet um HTML Elemente zu finden. "img" ist ein Selektor, der img-Elemente findet. Weil querySelectorAll auf dem Spielfeld-Element aufgerufen wird, sucht die Funktion nur die Bilder im Spielfeld.

Rolf