Computerwissenschaften

Fügen Sie die Spielkonzentration einer Webseite mit JavaScript hinzu

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 die Größe 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 benötigte 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. 

// Concentration Memory Game with Images - Head Script
// copyright Stephen Chapman, 28th February 2006, 24th December 2009
// you may copy this script provided that you retain the copyright notice

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'];

function randOrd(a, b){return (Math.round(Math.random())-0.5);} var im=[]; for
(var i=0; i < 15; i++) {im[i]=new Image(); im[i].src=tile[i]; tile[i] =
'tile'; tile[i+15] =
tile[i];} function displayBack(i) {document.getElementById('t'+i).innerHTML =
'

height="60" alt="back" \/><\/div>';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload=start; function start() {for (var i=0; i <= 29 ;i++)
displayBack(i);clearInterval(tid);tmr=tno=cnt=0;tile.sort( randOrd
);cntr(); tid=setInterval('cntr()', 1000);} function 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 =
tile[sel];if (tno==0) ch1=sel;else {ch2=sel;  cid=setTimeout('conceal()',
900);}tno++;} function conceal() {tno=0; if (tile[ch1] != tile[ch2])
{displayBack(ch1);displayBack(ch2);} else cnt++; if (cnt >= 15)
clearInterval(tid);}

Sie ersetzen die Bilddateinamen für backund tile durch die 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 in meinem Beispiel verwendeten Bilder beträgt nur 4758 Byte, sodass Sie kein Problem haben sollten die Summe unter 10.000 halten).

Schritt 2: Wählen Sie den folgenden Code aus und kopieren Sie ihn in eine Datei namens memory.css.

.blk {width:70px;height:70px;overflow:hidden;}

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 namens memoryb.js.

// Concentration Memory Game with Images - Body Script
// copyright Stephen Chapman, 28th February 2006, 24th December 2009
// you may copy this script provided that you retain the copyright notice

document.write('

border="0">');for (var a=0; a <= 5; a++) {document.write(' ');for (var b =
0; b <= 4; b++) {document.write('

');}document.write('<\/tr>');}document.write('<\/table>

onclick="window.start()" \/><\/form><\/div>');

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.

Similar Posts

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

id="t'+((5*a)+b)+'">