Concentration

So funktioniert das Script

Das Script besteht aus fünf Bausteinen: dem Aufbau des Spielfelds, dem Mischen der Paare, dem Aufdecken einer Karte, dem Vergleich zweier aufgedeckter Karten und der mitlaufenden Uhr. Der Spielstand steckt in zwei Listen — map merkt sich, welches Motiv auf welchem Platz liegt, und user, welche Plätze bereits gelöst sind.

const map = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, /* ... */ 18, 18];

Das ist das gesamte Spielfeld in einer Zeile: 36 Plätze, auf denen jede der 18 Bildnummern genau zweimal vorkommt. Der Platz mit der Nummer 0 ist das Feld links oben, Nummer 35 das rechts unten. Zu jeder Nummer gehört eine Bilddatei — image7.gif ist das Motiv 7, und image0.gif ist die Rückseite, die bei einer verdeckten Karte zu sehen ist.

for (let z = 0; z < 5; z++) {
  for (let x = 0; x <= 35; x++) {
    temparray[0] = Math.floor(Math.random() * 36);
    temparray[1] = map[temparray[0]];
    temparray[2] = map[x];
    map[x] = temparray[1];
    map[temparray[0]] = temparray[2];
  }
}

So wird gemischt: Jeder Platz x tauscht seinen Inhalt mit einem zufällig gezogenen zweiten Platz. Weil man beim Tauschen den ersten Wert überschreiben würde, wird er vorher in temparray zwischengeparkt — dasselbe Prinzip wie beim Umfüllen zweier Gläser mit einem dritten als Zwischenstation. Das Ganze läuft fünfmal über das komplette Brett, damit die Karten wirklich gut durchmischt sind.

const knopf = document.createElement("button");
const bild = document.createElement("img");
bild.src = bilderpfad + "image0.gif";
knopf.appendChild(bild);
knopf.addEventListener("click", function () {
  showimage(n);
});
brett.appendChild(knopf);

Das Spielfeld entsteht erst beim Laden der Seite. Für jeden der 36 Plätze baut das Script einen Knopf mit einem Bild darin und hängt ihn in das Raster ein. Die Zählvariable n der Schleife wandert dabei in die Klick-Funktion — jeder Knopf weiß dadurch, welchen Platz er vertritt. Das Original erzeugte diese Kacheln noch mit document.write; das funktioniert nur, solange die Seite gerade geladen wird, und ist deshalb längst aus der Mode.

if (ctr === 0) {
  ctr++;
  clickarray[0] = but;
  oktoclick = true;
} else {
  clickarray[1] = but;
  ctr = 0;
  setTimeout(returntoold, 600);
}

ctr zählt, ob es die erste oder die zweite Karte eines Zuges ist, und clickarray merkt sich die beiden Plätze. Nach der zweiten Karte übernimmt setTimeout: Es wartet 600 Millisekunden, bevor verglichen wird — genau diese kurze Pause braucht ihr, um das zweite Motiv überhaupt zu sehen. Wer mehr Bedenkzeit möchte, setzt hier eine größere Zahl ein.

if (map[clickarray[0]] === map[clickarray[1]]) {
  if (user[clickarray[0]] === 0 && user[clickarray[1]] === 0) { finished++; }
  user[clickarray[0]] = 1;
  user[clickarray[1]] = 1;
}

Hier fällt die Entscheidung: Tragen beide Plätze dieselbe Motivnummer, ist ein Paar gefunden. In user werden die beiden Plätze mit einer 1 als gelöst vermerkt — deshalb dreht das Script sie später nicht mehr zurück auf die Rückseite. finished zählt die gefundenen Paare; bei 18 ist das Brett leer geräumt, die Zeit wird angezeigt und eine neue Runde beginnt.

oktoclick = false;

Diese eine Variable verhindert Durcheinander: Während die 600 Millisekunden laufen, steht sie auf false, und showimage() ignoriert jeden weiteren Klick. Ohne diese Sperre könnte man drei oder vier Karten gleichzeitig aufdecken und das Spiel würde beim Vergleichen die falschen Plätze erwischen.

min = Math.floor(ticker / 60);
sec = (ticker - (min * 60)) + "";
if (sec.length === 1) { sec = "0" + sec; }
id = setTimeout(runclk, 1000);

Die Uhr zählt schlicht Sekunden in ticker und rechnet daraus Minuten und Sekunden aus. Das Anhängen von "" macht aus der Zahl einen Text, damit sich die Länge prüfen lässt — bei einer einstelligen Sekundenzahl wird eine Null vorangestellt, sonst stünde dort 1:7 statt 1:07. Am Ende ruft sich die Funktion über setTimeout nach einer Sekunde selbst wieder auf; die Nummer dieser Zeitschaltung liegt in id, damit ein neues Spiel die alte Uhr mit clearTimeout anhalten kann.