Lägg till spelkoncentrationen på en webbsida med JavaScript

Här är en version av det klassiska minnespelet som gör att besökare på din webbsida kan matcha bilder i ett rutmönster med JavaScript.

Du måste leverera bilderna, men du kan använda vad du vill med det här skriptet så länge du äger rätten att använda dem på webben. Du måste också ändra storlek på dem till 60 pixlar med 60 pixlar innan du startar.

Du behöver en bild på baksidan av "korten" och femton för "fronterna."

Se till att bildfilerna är så små som möjligt eller att spelet kan ta för lång tid att ladda. Med den här versionen har jag begränsat skriptet till 30 kort eftersom alla bilder kommer att göra sidan mycket långsammare att ladda. Ju fler kort och bilder sidan har desto långsammare kommer sidan att laddas. Detta kanske inte är ett problem för dem med bra bredbandsanslutningar, men de med långsammare anslutningar kan bli frustrerade av den tid det tar.

Om du inte har spelat det här spelet tidigare är reglerna väldigt enkla. Det finns 30 rutor eller kort. Varje kort har en av 15 bilder, utan bild visas mer än två gånger - det här är paren som kommer att matchas.

Korten börjar "med framsidan nedåt" och döljer bilderna på de 15 paren.

Syftet är att dyka upp alla matchande par på så kort tid som möjligt.

Spelet börjar med att du väljer ett kort och sedan väljer ett sekund. Om de är en match, förblir de med ansiktet uppåt; om de inte matchar, vänds de två korten tillbaka, med framsidan nedåt. När du spelar måste du lita på ditt minne från tidigare kort och deras platser för att göra framgångsrika matcher.

I denna JavaScript-version av spelet väljer du kort genom att klicka på dem. Om de två du väljer matchar så kommer de att vara synliga, om de inte gör det försvinner de igen efter en sekund.

Det finns en tidräknare längst ner som spårar hur lång tid det tar dig att matcha alla paren.

Om du vill börja om, tryck bara på räkneknappen så kommer hela tablån att blandas om och du kan börja om igen.

Bilderna som används i det här exemplet kommer inte med skriptet, så som sagt måste du ange dina egna. Om du inte har bilder att använda med det här skriptet och inte kan skapa dina egna, kan du söka efter lämplig clipart som är gratis att använda.

Skriptet för minnespelet läggs till på din webbsida i fem steg.

Steg 1: Kopiera följande kod och spara den i en fil med namnet memoryh.js.

// Concentration Memory Game with Images - Head Script
// copyright Stephen Chapman, 28 februari 2006, 24 december 2009
// Du kan kopiera detta skript förutsatt att du behåller upphovsrättsmeddelandet

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 = []; för
(var i = 0; i <15; i ++) {im [i] = ny bild (); im [i] .src = brickan [i]; kakel [i] =
''; kakel [i + 15] =
kakel [i];} -funktion displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'

höjd = "60" alt = "tillbaka" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = start; funktionsstart () {för (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'). Värde =
min + ':' + (sek <10? '0': '') + sek; tmr ++;} funktionsdisp (sel) {if (tno> 1)
{clearTimeout (cid); dölja ();} document.getElementById ('t' + sel) .innerHTML =
kakel [sel]; if (tno == 0) ch1 = sel; annars {ch2 = sel; cid = setTimeout ('dölja ()',
900);} tno ++;} funktion dölja () {tno = 0; if (brickan [ch1]! = brickan [ch2])
{displayBack (ch1); displayBack (ch2);} annars cnt ++; if (cnt> = 15)
clearInterval (tid);}

Du kommer att byta ut bildfilnamnen för tillbaka och bricka med filnamnen på dina bilder.

Kom ihåg att redigera dina bilder i ditt grafikprogram så att de alla är 60 pixlar kvadratiska så att de inte tar för lång tid att ladda (den kombinerade storleken på de 16 bilder som används för mitt exempel är bara 4758 byte så du bör inte ha några problem att hålla det totala under 10k).

Steg 2: Välj koden nedan och kopiera den till en fil som heter memory.css.

.blk {bredd: 70 px; höjd: 70px; översvämning: dold;}

Steg 3: Sätt in följande kod i huvudavsnittet på HTML-dokumentet på din webbsida för att ringa de två filerna du just har skapat.

Steg 4: Välj och kopiera koden nedan och spara den sedan i en fil som heter memoryb.js.

// Concentration Memory Game with Images - Body Script
// copyright Stephen Chapman, 28 februari 2006, 24 december 2009
// Du kan kopiera detta skript förutsatt att du behåller upphovsrättsmeddelandet

document.write ('

Steg 5: Nu återstår bara att lägga till spelet på din webbsida där du vill att det ska visas genom att sätta in följande kod i ditt HTML-dokument.