Iată o versiune a jocului de memorie clasic, care permite vizitatorilor paginii tale web să potrivească imagini într-un model de grilă folosind JavaScript.
Furnizarea de imagini
Va trebui să furnizați imaginile, dar puteți utiliza orice imagini doriți cu acest script, atât timp cât dețineți drepturile de a le utiliza pe web. De asemenea, va trebui să le redimensionați la 60 de pixeli cu 60 de pixeli înainte de a începe.
Veți avea nevoie de o imagine pentru partea din spate a „cărților” și de cincisprezece pentru „fronturi”.
Asigurați-vă că fișierele de imagine sunt cât mai mici sau că jocul poate dura prea mult până la încărcare. Cu această versiune am limitat scriptul la 30 de cărți, deoarece toate imaginile vor face ca pagina să fie mult mai lentă pentru a fi încărcată. Cu cât mai multe carduri și imagini pagina este mai lentă se va încărca pagina. Aceasta poate să nu fie o problemă pentru cei cu conexiuni în bandă largă bune, dar cei cu conexiuni mai lente pot deveni frustrați de timpul necesar.
Ce este jocul de memorie de concentrare?
Dacă nu ați mai jucat acest joc înainte, regulile sunt foarte simple. Există 30 de pătrate sau carduri. Fiecare card are una dintre cele 15 imagini, fără să apară nici o imagine mai mult de două ori - acestea sunt perechile care vor fi potrivite.
Cărțile încep „cu fața în jos”, ascunzând imaginile pe cele 15 perechi.
Obiectivul este să afișeze toate perechile care se potrivesc într-un timp cât mai scurt posibil.
Jocul începe selectând o carte, apoi selectând o secundă. Dacă sunt un meci, rămân cu fața în sus; dacă nu se potrivesc, cele două cărți sunt întoarse, cu fața în jos. Pe măsură ce jucați, va trebui să vă bazați pe memoria cărților anterioare și a locațiilor acestora pentru a face meciuri de succes.
Cum funcționează această versiune a concentrării
În această versiune JavaScript a jocului, selectați cărți făcând clic pe ele. Dacă cei doi pe care îi selectați se potrivesc, atunci vor rămâne vizibili, dacă nu o vor dispărea din nou după o secundă.
Există un contor de timp în partea de jos care urmărește cât timp este nevoie pentru a potrivi toate perechile.
Dacă doriți să începeți din nou, trebuie doar să apăsați butonul de contorizare și întregul tabel va fi refăcut și puteți începe din nou.
Imaginile utilizate în acest eșantion nu sunt livrate cu scriptul, așa cum am menționat, va trebui să vă oferiți propriul dvs. Dacă nu aveți imagini de utilizat cu acest script și nu vă puteți crea propriul dvs., puteți căuta un clipart adecvat care este liber de utilizat.
Adăugarea jocului pe pagina dvs. web
Scriptul pentru jocul de memorie este adăugat la pagina web în cinci pași.
Pasul 1: Copiați următorul cod și salvați-l într-un fișier numit memoryh.js.
// Joc de memorie de concentrare cu imagini - Script de cap
// copyright Stephen Chapman, 28 februarie 2006, 24 decembrie 2009
// puteți copia acest script cu condiția să păstrați notificarea privind drepturile de autor
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'];
funcție randOrd (a, b) {return (Math.round (Math.random ()) - 0,5);} var im = []; pentru
(var i = 0; i <15; i ++) {im [i] = Imagine nouă (); im [i] .src = țiglă [i]; țiglă [i] =
''; dale [i + 15] =
tile [i];} funcția displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'height = "60" alt = "înapoi" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = pornire; function start () {for (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
); Cntr (); tid = setInterval ('cntr ()', 1000);} funcție cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Valoare =
min + ':' + (sec <10? '0': '') + sec; tmr ++;} funcție disp (sel) {if (tno> 1)
{clearTimeout (cid); conceal ();} document.getElementById ('t' + sel) .innerHTML =
țiglă [sel]; if (tno == 0) ch1 = sel; else {ch2 = sel; cid = setTimeout ('ascunde ()',
900);} tno ++;} funcția ascunde () {tno = 0; if (tile [ch1]! = tile [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; if (cnt> = 15)
clearInterval (tid);}
Veți înlocui numele fișierului imagine pentru înapoi și ţiglă cu numele fișierelor imaginilor tale.
Nu uitați să vă editați imaginile în programul dvs. grafic, astfel încât acestea să fie toate de 60 de pixeli pătrați, astfel încât să nu dureze prea mult timp la încărcare (dimensiunea combinată a celor 16 imagini utilizate pentru exemplul meu este de doar 4758 byte, deci nu ar trebui să aveți nicio problemă în a menține totalul sub 10k).
Pasul 2: Selectați codul de mai jos și copiați-l într-un fișier numit memory.css.
.blk {lățime: 70px; inaltime: 70px; revărsat: ascuns;}
Pasul 3: Introduceți următorul cod în secțiunea din cap a documentului HTML al paginii dvs. web pentru a apela cele două fișiere pe care tocmai le-ați creat.
Pasul 4: Selectați și copiați codul de mai jos, apoi salvați-l într-un fișier numit memoryb.js.
// Joc de memorie de concentrare cu imagini - Script de corp
// copyright Stephen Chapman, 28 februarie 2006, 24 decembrie 2009
// puteți copia acest script cu condiția să păstrați notificarea privind drepturile de autor
document.write (“'); pentru (var b =
0; b <= 4; b ++) {document.write ('id = "t '+ ((5 * a) + b) +'">');} Document.write (' ');} document.write ('
Pasul 5: Acum nu mai rămâne decât să adăugați jocul pe pagina dvs. web unde doriți să apară, introducând următorul cod în documentul dvs. HTML.