Legg til spillkonsentrasjonen til en webside med JavaScript

Her er en versjon av det klassiske minnespelet som lar besøkende på websiden din til å matche bilder i et rutenettmønster ved hjelp av JavaScript.

Du må levere bildene, men du kan bruke hvilke bilder du vil med dette skriptet så lenge du eier rettighetene til å bruke dem på nettet. Du må også endre størrelsen på dem til 60 piksler med 60 piksler før du starter.

Du trenger ett bilde på baksiden av "kortene" og femten for "frontene."

Forsikre deg om at bildefilene er så små som mulig, eller det kan ta for lang tid å laste spillet. Med denne versjonen har jeg begrenset skriptet til 30 kort, siden alle bildene vil gjøre siden mye tregere å laste inn. Jo flere kort og bilder siden har tregere siden kommer til å laste. Dette kan ikke være et problem for de med gode bredbåndstilkoblinger, men de med tregere tilkoblinger kan bli frustrerte over tiden det tar.

Hvis du ikke har spilt dette spillet før, er reglene veldig enkle. Det er 30 ruter eller kort. Hvert kort har ett av 15 bilder, uten at noe bilde vises mer enn to ganger - dette er parene som vil matche.

Kortene begynner "med forsiden ned", og skjuler bildene på de 15 parene.

Målet er å skru opp alle samsvarende par på så kort tid som mulig.

Spillet starter med at du velger ett kort, og deretter velger et sekund. Hvis de er en kamp, ​​forblir de med forsiden opp; hvis de ikke samsvarer, blir de to kortene snudd tilbake, med forsiden ned. Når du spiller, må du stole på minnet ditt fra tidligere kort og deres plassering for å få vellykkede kamper.

I denne JavaScript-versjonen av spillet velger du kort ved å klikke på dem. Hvis de to du velger stemmer, vil de forbli synlige, hvis de ikke gjør det, forsvinner de igjen etter et sekund.

Det er en tidsteller nederst som sporer hvor lang tid det tar deg å matche alle parene.

Hvis du vil starte på nytt, trykker du bare på tellerknappen så vil hele tablået bli blandet om og du kan starte på nytt.

Bildene som brukes i denne prøven kommer ikke med skriptet, så som nevnt må du oppgi dine egne. Hvis du ikke har bilder å bruke med dette skriptet og ikke kan lage dine egne, kan du søke etter passende utklipp som er gratis å bruke.

Skriptet for minnespelet legges til hjemmesiden din i fem trinn.

Trinn 1: Kopier følgende kode og lagre den i en fil som heter memoryh.js.

// Konsentrasjonsminnespel med bilder - Head Script
// copyright Stephen Chapman, 28. februar 2006, 24. desember 2009
// du kan kopiere dette skriptet forutsatt at du beholder copyright-varselet

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

funksjon randOrd (a, b) {return (Math.round (Math.random ()) - 0.5);} var im = []; til
(var i = 0; i <15; i ++) {im [i] = nytt bilde (); im [i] .src = flis [i]; flis [i] =
''; flis [i + 15] =
tile [i];} funksjon displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'

høyde = "60" alt = "tilbake" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = starte; funksjonsstart () {for (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
); CNTR (); tid = setInterval ('cntr ()', 1000);} funksjon cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Verdi =
min + ':' + (sek <10? '0': '') + sek; tmr ++;} funksjonsdisp (sel) {if (tno> 1)
{clearTimeout (cid); skjule ();} document.getElementById ('t' + sel) .innerHTML =
flis [sel]; if (tno == 0) ch1 = sel; annet {ch2 = sel; cid = setTimeout ('skjule ()',
900);} tno ++;} funksjon skjule () {tno = 0; if (tile [ch1]! = tile [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; hvis (cnt> = 15)
clearInterval (tid);}

Du vil erstatte navnene på bildefiler for tilbake og flis med filnavnene til bildene dine.

Husk å redigere bildene dine i grafikkprogrammet slik at de er hele 60 piksler kvadrat, slik at de ikke tar for lang tid å laste (den kombinerte størrelsen på de 16 bildene som er brukt for mitt eksempel, er bare 4758 byte, så du skulle ikke ha noe problem med å holde totalen under 10k).

Steg 2: Velg koden nedenfor og kopier den til en fil som heter memory.css.

.blk {bredde: 70px; høyde: 70px; overflow: skjult;}

Trinn 3: Sett inn følgende kode i hovedseksjonen på HTML-dokumentet på websiden din for å kalle de to filene du nettopp opprettet.

Trinn 4: Velg og kopier koden nedenfor, og lagre den deretter i en fil som heter memoryb.js.

// Konsentrasjonsminnespel med bilder - Body Script
// copyright Stephen Chapman, 28. februar 2006, 24. desember 2009
// du kan kopiere dette skriptet forutsatt at du beholder copyright-varselet

document.write ('

Trinn 5: Nå gjenstår bare å legge spillet til websiden din der du vil at det skal vises ved å sette inn følgende kode i HTML-dokumentet.