Føj spilkoncentrationen til en webside med JavaScript

Her er en version af det klassiske hukommelsespil, der giver besøgende på din webside mulighed for at matche billeder i et gittermønster ved hjælp af JavaScript.

Du bliver nødt til at levere billederne, men du kan bruge de billeder, du vil, med dette script, så længe du ejer rettighederne til at bruge dem på nettet. Du skal også ændre størrelsen på dem til 60 pixels med 60 pixels, før du starter.

Du har brug for et billede på bagsiden af ​​"kortene" og femten til "fronterne."

Sørg for, at billedfilerne er så små som muligt, eller at spillet kan tage for lang tid at indlæse. Med denne version har jeg begrænset scriptet til 30 kort, da alle billederne vil gøre siden meget langsommere at indlæse. Jo flere kort og billeder siden er, desto langsommere vil siden indlæses. Dette er muligvis ikke et problem for dem med gode bredbåndsforbindelser, men dem med langsommere forbindelser kan blive frustrerede over den tid det tager.

Hvis du ikke har spillet dette spil før, er reglerne meget enkle. Der er 30 firkanter eller kort. Hvert kort har et af 15 billeder, uden at noget billede vises mere end to gange - dette er parene, der skal matche.

Kortene begynder "med forsiden nedad" og skjuler billederne på de 15 par.

Formålet er at slå alle de matchende par op på så kort tid som muligt.

Afspilning starter ved at du vælger et kort og derefter vælger et sekund. Hvis de er en kamp, ​​forbliver de med billedsiden opad; hvis de ikke stemmer overens, vendes de to kort tilbage med forsiden nedad. Når du spiller, bliver du nødt til at stole på din hukommelse fra tidligere kort og deres placering for at få succesrige kampe.

I denne JavaScript-version af spillet vælger du kort ved at klikke på dem. Hvis de to du vælger matcher, vil de forblive synlige, hvis de ikke gør det, forsvinder de igen efter et øjeblik.

Der er en tidstæller i bunden, der sporer hvor lang tid det tager dig at matche alle parene.

Hvis du vil starte forfra, skal du bare trykke på tællerknappen, så hele tablået vil blive omskiftet, og du kan starte igen.

De billeder, der bruges i denne prøve, leveres ikke med scriptet, så som nævnt skal du angive dine egne. Hvis du ikke har billeder til brug med dette script og ikke er i stand til at oprette dine egne, kan du søge efter passende clipart, der er gratis at bruge.

Scriptet til hukommelsespelet føjes til din webside i fem trin.

Trin 1: Kopier følgende kode og gem den i en navngivet fil memoryh.js.

// Koncentrationshukommelsespil med billeder - Head script
// copyright Stephen Chapman, 28. februar 2006, 24. december 2009
// du kan kopiere dette script, forudsat at du bevarer copyright-meddelelsen

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 = []; til
(var i = 0; i <15; i ++) {im [i] = nyt billede (); im [i] .src = flise [i]; flise [i] =
''; flise [i + 15] =
flise [i];} funktion displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'

højde = "60" alt = "tilbage" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = start; funktionsstart () {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 + ':' + (sek <10? '0': '') + sek; tmr ++;} funktion disp (sel) {if (tno> 1)
{clearTimeout (cid); skjul ();} document.getElementById ('t' + sel) .innerHTML =
flise [sel]; hvis (tno == 0) ch1 = sel; andet {ch2 = sel; cid = setTimeout ('skjul ()',
900);} tno ++;} funktion skjule () {tno = 0; if (flise [ch1]! = flise [ch2])
{displayBack (ch1); displayBack (ch2);} andet cnt ++; hvis (cnt> = 15)
clearInterval (tid);}

Du erstatter billedfilnavne til tilbage og flise med filnavne på dine billeder.

Husk at redigere dine billeder i dit grafikprogram, så de alle er 60 pixels kvadratisk, så de ikke tager for lang tid på at indlæse (den kombinerede størrelse på de 16 billeder, der er brugt til mit eksempel, er kun 4758 bytes, så du skulle ikke have noget problem med at holde det samlede under 10k).

Trin 2: Vælg koden nedenfor, og kopier den til en kaldet fil memory.css.

.blk {bredde: 70 px; højde: 70px; overløb: skjult;}

Trin 3: Indsæt følgende kode i hovedafsnittet på din webside HTML-dokument for at kalde de to filer, du lige har oprettet.

Trin 4: Vælg og kopier koden herunder, og gem den derefter i en kaldet fil memoryb.js.

// Koncentrationshukommelsespil med billeder - Body Script
// copyright Stephen Chapman, 28. februar 2006, 24. december 2009
// du kan kopiere dette script, forudsat at du bevarer copyright-meddelelsen

document.write ('

Trin 5: Nu er det kun tilbage at tilføje spillet til din webside, hvor du vil have det til at vises ved at indsætte følgende kode i dit HTML-dokument.