Ecco una versione del classico gioco di memoria che consente ai visitatori della tua pagina web di abbinare le immagini in uno schema a griglia utilizzando JavaScript.
Fornire le immagini
Dovrai fornire le immagini, ma puoi utilizzare qualsiasi immagine ti piaccia con questo script purché tu possieda i diritti per usarli sul web. Dovrai inoltre ridimensionarli a 60 pixel per 60 pixel prima di iniziare.
Avrai bisogno di un'immagine per il retro delle "carte" e quindici per i "fronti".
Assicurati che i file di immagine siano il più piccoli possibile o che il caricamento del gioco potrebbe richiedere troppo tempo. Con questa versione ho limitato lo script a 30 carte poiché tutte le immagini renderanno la pagina molto più lenta da caricare. Maggiore è il numero di schede e immagini della pagina, più lento sarà il caricamento della pagina. Questo potrebbe non essere un problema per quelli con buone connessioni a banda larga, ma quelli con connessioni più lente potrebbero sentirsi frustrati dal tempo impiegato.
Cos'è il gioco di memoria di concentrazione?
Se non hai mai giocato a questo gioco prima, le regole sono molto semplici. Ci sono 30 quadrati o carte. Ogni carta ha una delle 15 immagini, senza immagini che appaiono più di due volte: queste sono le coppie che verranno abbinate.
Le carte iniziano "a faccia in giù", nascondendo le immagini sulle 15 coppie.
L'obiettivo è di alzare tutte le coppie corrispondenti nel minor tempo possibile.
La riproduzione inizia selezionando una carta, quindi selezionando una seconda. Se sono una partita, rimangono scoperti; se non corrispondono, le due carte vengono rigirate, coperte. Mentre giochi, dovrai fare affidamento sulla tua memoria delle carte precedenti e sulla loro posizione per poter effettuare partite di successo.
Come funziona questa versione di concentrazione
In questa versione JavaScript del gioco, selezioni le carte facendo clic su di esse. Se i due che selezioni corrispondono, rimarranno visibili, in caso contrario spariranno di nuovo dopo circa un secondo.
C'è un contatore del tempo in basso che tiene traccia di quanto tempo impieghi per abbinare tutte le coppie.
Se vuoi ricominciare, basta premere il pulsante del contatore e l'intero tableau verrà rimescolato e puoi ricominciare.
Le immagini utilizzate in questo esempio non vengono fornite con lo script, quindi, come detto, dovrai fornire le tue. Se non hai immagini da usare con questo script e non riesci a crearne di tue, puoi cercare clipart adatte che siano gratuite da usare.
Aggiunta del gioco alla tua pagina Web
Lo script per il gioco di memoria viene aggiunto alla tua pagina web in cinque passaggi.
Passo 1: Copia il seguente codice e salvalo in un file denominato memoryh.js.
// Gioco di memoria di concentrazione con immagini - Head Script
// copyright Stephen Chapman, 28 febbraio 2006, 24 dicembre 2009
// puoi copiare questo script purché tu mantenga la nota sul copyright
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'];
funzione randOrd (a, b) {return (Math.round (Math.random ()) - 0.5);} var im = []; per
(var i = 0; i <15; i ++) {im [i] = new Image (); im [i] .src = tile [i]; tile [i] =
''; riquadro [i + 15] =
tile [i];} funzione displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'height = "60" alt = "back" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = inizio; funzione start () {for (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
); Cntr (); tid = setInterval ('cntr ()', 1000);} funzione 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);}
Sostituirai i nomi dei file immagine per indietro e piastrella con i nomi dei file delle tue immagini.
Ricorda di modificare le tue immagini nel tuo programma di grafica in modo che siano tutte quadrate di 60 pixel in modo da non impiegare troppo tempo a caricarsi (la dimensione combinata delle 16 immagini utilizzate per il mio esempio è solo 4758 byte, quindi non dovresti avere problemi a mantenere il totale sotto 10k).
Passo 2: Seleziona il codice qui sotto e copialo in un file chiamato memory.css.
.blk {larghezza: 70px; altezza: 70px; overflow: nascosto;}
Passaggio 3: Inserisci il seguente codice nella sezione head del documento HTML della tua pagina web per chiamare i due file che hai appena creato.
Passaggio 4: Seleziona e copia il codice qui sotto, quindi salvalo in un file chiamato memoryb.js.
// Gioco di memoria di concentrazione con immagini - Body Script
// copyright Stephen Chapman, 28 febbraio 2006, 24 dicembre 2009
// puoi copiare questo script purché tu mantenga la nota sul copyright
document.write (''); per (var b =
0; b <= 4; b ++) {document.write ('id = "t '+ ((5 * a) + b) +'">');} Document.write (' ');} document.write ('
Passaggio 5: Ora non resta che aggiungere il gioco alla tua pagina web dove vuoi che appaia inserendo il seguente codice nel tuo documento HTML.