Hier is een versie van het klassieke geheugenspel waarmee bezoekers van uw webpagina afbeeldingen in een rasterpatroon kunnen matchen met JavaScript.
Leveren van de afbeeldingen
U zult de afbeeldingen moeten aanleveren, maar u kunt alle afbeeldingen die u leuk vindt met dit script gebruiken, zolang u de rechten bezit om ze op internet te gebruiken. Je moet ze ook verkleinen tot 60 bij 60 pixels voordat je begint.
Je hebt één afbeelding nodig voor de achterkant van de 'kaarten' en vijftien voor de 'voorkant'.
Zorg ervoor dat de afbeeldingsbestanden zo klein mogelijk zijn, anders duurt het laden van het spel te lang. Met deze versie heb ik het script beperkt tot 30 kaarten omdat alle afbeeldingen de pagina veel langzamer zullen laden. Hoe meer kaarten en afbeeldingen de pagina heeft, hoe langzamer de pagina wordt geladen. Dit is misschien geen probleem voor mensen met goede breedbandverbindingen, maar degenen met langzamere verbindingen kunnen gefrustreerd raken door de tijd die nodig is.
Wat is het concentratie-geheugenspel?
Als je dit spel nog niet eerder hebt gespeeld, zijn de regels heel eenvoudig. Er zijn 30 vierkanten of kaarten. Elke kaart heeft een van de 15 afbeeldingen, waarbij geen afbeelding meer dan twee keer voorkomt - dit zijn de paren die bij elkaar passen.
De kaarten beginnen "met de afbeelding naar beneden" en verbergen de afbeeldingen op de 15 paren.
Het doel is om alle paren in een zo kort mogelijke tijd op te halen.
Het spel begint door het selecteren van één kaart en vervolgens het selecteren van een tweede. Als ze overeenkomen, blijven ze open liggen; als ze niet overeenkomen, worden de twee kaarten omgekeerd omgedraaid. Tijdens het spelen moet je vertrouwen op je geheugen van eerdere kaarten en hun locaties om succesvolle wedstrijden te maken.
Hoe deze versie van concentratie werkt
In deze JavaScript-versie van het spel selecteer je kaarten door erop te klikken. Als de twee die je selecteert overeenkomen, blijven ze zichtbaar, als ze dat niet zijn, zullen ze na een seconde of zo weer verdwijnen.
Er is onderaan een tijdteller die bijhoudt hoe lang het duurt om alle paren te matchen.
Als u opnieuw wilt beginnen, drukt u gewoon op de tellerknop en wordt het hele tableau opnieuw geschud en kunt u opnieuw beginnen.
De afbeeldingen die in dit voorbeeld worden gebruikt, worden niet geleverd met het script, dus zoals gezegd, moet u uw eigen afbeeldingen opgeven. Als je geen afbeeldingen hebt om met dit script te gebruiken en je kunt er zelf geen maken, kun je zoeken naar geschikte clipart die gratis te gebruiken is.
Het spel toevoegen aan uw webpagina
Het script voor het geheugenspel wordt in vijf stappen aan uw webpagina toegevoegd.
Stap 1: Kopieer de volgende code en sla deze op in een bestand met de naam memoryh.js.
// Concentration Memory Game met afbeeldingen - Head Script
// copyright Stephen Chapman, 28 februari 2006, 24 december 2009
// u mag dit script kopiëren op voorwaarde dat u de copyrightvermelding behoudt
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'];
functie randOrd (a, b) {return (Math.round (Math.random ()) - 0,5);} var im = []; voor
(var i = 0; ik <15; i ++) {im [i] = nieuwe afbeelding (); im [i] .src = tegel [i]; tegel [i] =
''; tegel [i + 15] =
tegel [i];} functie displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'height = "60" alt = "back" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = start; functie start () {voor (var i = 0; ik <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
); cntr (); tid = setInterval ('cntr ()', 1000);} functie cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Waarde =
min + ':' + (sec <10? '0': '') + sec; tmr ++;} functie disp (sel) {if (tno> 1)
{clearTimeout (cid); verbergen ();} document.getElementById ('t' + sel) .innerHTML =
tegel [sel]; if (tno == 0) ch1 = sel; anders {ch2 = sel; cid = setTimeout ('camoufleer ()',
900);} tno ++;} functie verbergen () {tno = 0; if (tegel [ch1]! = tegel [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; if (cnt> = 15)
clearInterval (tid);}
U vervangt de afbeeldingsbestandsnamen voor terug en tegel met de bestandsnamen van uw afbeeldingen.
Vergeet niet om uw afbeeldingen in uw grafische programma te bewerken zodat ze allemaal 60 vierkante pixels zijn, zodat het niet te lang duurt om ze te laden (de gecombineerde grootte van de 16 afbeeldingen die voor mijn voorbeeld worden gebruikt, is slechts 4758 bytes, dus u zou geen probleem moeten hebben om het totaal onder te houden 10k).
Stap 2: Selecteer de onderstaande code en kopieer deze naar een bestand met de naam memory.css.
.blk {width: 70px; hoogte: 70px; overloop verborgen;}
Stap 3: Voeg de volgende code in het hoofdgedeelte van het HTML-document van uw webpagina in om de twee bestanden aan te roepen die u zojuist hebt gemaakt.
Stap 4: Selecteer en kopieer de onderstaande code en sla deze op in een bestand met de naam memoryb.js.
// Concentration Memory Game met afbeeldingen - Body Script
// copyright Stephen Chapman, 28 februari 2006, 24 december 2009
// u mag dit script kopiëren op voorwaarde dat u de copyrightvermelding behoudt
document.write (''); voor (var b =
0; b <= 4; b ++) {document.write ('id = "t '+ ((5 * a) + b) +'">');} document.write (' ');} document.write ('
Stap 5: Nu hoef je alleen nog het spel toe te voegen aan je webpagina waar je het wilt laten verschijnen door de volgende code in je HTML-document in te voegen.