Hier ist eine Version des klassischen Memory-Spiels, mit der Besucher Ihrer Webseite Bilder in einem Raster mit JavaScript abgleichen können.
Bereitstellung der Bilder
Sie müssen die Bilder bereitstellen, können jedoch mit diesem Skript beliebige Bilder verwenden, sofern Sie die Rechte zur Verwendung im Web besitzen. Sie müssen sie auch auf 60 x 60 Pixel ändern, bevor Sie beginnen.
Sie benötigen ein Bild für die Rückseite der "Karten" und fünfzehn für die "Vorderseite".
Stellen Sie sicher, dass die Bilddateien so klein wie möglich sind. Andernfalls kann das Laden des Spiels zu lange dauern. Mit dieser Version habe ich das Skript auf 30 Karten beschränkt, da alle Bilder das Laden der Seite erheblich verlangsamen. Je mehr Karten und Bilder die Seite hat, desto langsamer wird die Seite geladen. Dies ist möglicherweise kein Problem für Personen mit guten Breitbandverbindungen, aber Personen mit langsameren Verbindungen können durch die dafür erforderliche Zeit frustriert werden.
Was ist das Konzentrationsgedächtnisspiel?
Wenn Sie dieses Spiel noch nicht gespielt haben, sind die Regeln sehr einfach. Es gibt 30 Felder oder Karten. Jede Karte hat eines von 15 Bildern, wobei kein Bild mehr als zweimal erscheint - dies sind die Paare, die abgeglichen werden.
Die Karten beginnen "verdeckt" und verbergen die Bilder auf den 15 Paaren.
Ziel ist es, alle passenden Paare in möglichst kurzer Zeit aufzutauchen.
Das Spiel beginnt damit, dass Sie eine Karte und dann eine zweite auswählen. Wenn sie ein Match sind, bleiben sie offen; Wenn sie nicht übereinstimmen, werden die beiden Karten verdeckt umgedreht. Während Sie spielen, müssen Sie sich auf Ihr Gedächtnis früherer Karten und deren Positionen verlassen, um erfolgreiche Spiele zu erzielen.
Wie diese Version der Konzentration funktioniert
In dieser JavaScript-Version des Spiels wählen Sie Karten aus, indem Sie darauf klicken. Wenn die beiden von Ihnen ausgewählten übereinstimmen, bleiben sie sichtbar. Wenn dies nicht der Fall ist, verschwinden sie nach etwa einer Sekunde wieder.
Unten befindet sich ein Zeitzähler, der angibt, wie lange Sie brauchen, um alle Paare abzugleichen.
Wenn Sie von vorne beginnen möchten, drücken Sie einfach die Zählertaste. Das gesamte Tableau wird neu gemischt und Sie können erneut beginnen.
Die in diesem Beispiel verwendeten Bilder werden nicht mit dem Skript geliefert. Wie bereits erwähnt, müssen Sie Ihre eigenen Bilder bereitstellen. Wenn Sie keine Bilder für dieses Skript haben und keine eigenen erstellen können, können Sie nach geeigneten Cliparts suchen, die kostenlos verwendet werden können.
Hinzufügen des Spiels zu Ihrer Webseite
Das Skript für das Memory-Spiel wird in fünf Schritten zu Ihrer Webseite hinzugefügt.
Schritt 1: Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit dem Namen memoryh.js.
// Konzentrationsgedächtnisspiel mit Bildern - Head Script
// Copyright Stephen Chapman, 28. Februar 2006, 24. Dezember 2009
// Sie dürfen dieses Skript kopieren, sofern Sie den Copyright-Hinweis behalten
var back = 'back.gif';
var tile = ['img0.gif', 'img1.gif', 'img2.gif', 'img3.gif', 'img4.gif', 'img5.gif',
'img6.gif', 'img7.gif', 'img8.gif', 'img9.gif', 'img10.gif', 'img11.gif',
'img12.gif', 'img13.gif', 'img14.gif'];
Funktion randOrd (a, b) {return (Math.round (Math.random ()) - 0.5);} var im = []; zum
(var i = 0; i <15; i ++) {im [i] = neues Bild (); im [i] .src = Kachel [i]; Kachel [i] =
''; Kachel [i + 15] =
tile [i];} function displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'height = "60" alt = "back" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = start; Funktion start () {for (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
); cntr (); tid = setInterval ('cntr ()', 1000);} Funktion cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Value =
min + ':' + (sec <10? '0': '') + sec; tmr ++;} function disp (sel) {if (tno> 1)
{clearTimeout (cid); conceal ();} document.getElementById ('t' + sel) .innerHTML =
Kachel [sel]; if (tno == 0) ch1 = sel; sonst {ch2 = sel; cid = setTimeout ('conceal ()',
900);} tno ++;} function conceal () {tno = 0; if (Kachel [ch1]! = Kachel [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; if (cnt> = 15)
clearInterval (tid);}
Sie ersetzen die Bilddateinamen für zurück und Fliese mit den Dateinamen Ihrer Bilder.
Denken Sie daran, Ihre Bilder in Ihrem Grafikprogramm so zu bearbeiten, dass sie alle 60 Pixel im Quadrat sind, damit das Laden nicht zu lange dauert (Die kombinierte Größe der 16 für mein Beispiel verwendeten Bilder beträgt nur 4758 Byte, sodass Sie kein Problem damit haben sollten, die Gesamtsumme unter zu halten 10k).
Schritt 2: Wählen Sie den folgenden Code aus und kopieren Sie ihn in eine Datei mit dem Namen memory.css.
.blk {Breite: 70px; Höhe: 70px; Überlauf versteckt;}
Schritt 3: Fügen Sie den folgenden Code in den Kopfbereich des HTML-Dokuments Ihrer Webseite ein, um die beiden gerade erstellten Dateien aufzurufen.
Schritt 4: Wählen Sie den folgenden Code aus, kopieren Sie ihn und speichern Sie ihn in einer Datei mit dem Namen memoryb.js.
// Konzentrationsgedächtnisspiel mit Bildern - Körperskript
// Copyright Stephen Chapman, 28. Februar 2006, 24. Dezember 2009
// Sie dürfen dieses Skript kopieren, sofern Sie den Copyright-Hinweis behalten
document.write (''); für (var b =
0; b <= 4; b ++) {document.write ('id = "t '+ ((5 * a) + b) +'">');} document.write (' ');} document.write ('
Schritt 5: Jetzt müssen Sie nur noch das Spiel auf Ihrer Webseite hinzufügen, wo es angezeigt werden soll, indem Sie den folgenden Code in Ihr HTML-Dokument einfügen.