Evo verzije klasične memorijske igre koja posjetiteljima vaše web stranice omogućuje da uskladite slike u mreži s pomoću JavaScript-a.
Isporuka slika
Slike ćete morati dostaviti, ali možete koristiti sve slike koje želite s ovom skriptu dok god imate prava na njihovu upotrebu na webu. Također ćete morati promijeniti veličinu na 60 piksela prije 60 piksela.
Trebat će vam jedna slika za poleđinu "karata" i petnaest za "prednje strane".
Provjerite jesu li slikovne datoteke što je manje moguće ili igra može trajati predugo. Ovom verzijom sam ograničio skriptu na 30 karata jer će se sve slike učitati stranicu mnogo sporije. Što više kartica i slika na stranici ima sporije učitavanje. Oni koji imaju slabe širokopojasne veze možda neće predstavljati problem, ali oni koji imaju sporije veze mogu se frustrirati vremenom koje treba.
Što je igra memorije koncentracije?
Ako do sada niste igrali ovu igru, pravila su vrlo jednostavna. Ima 30 kvadrata ili kartica. Svaka kartica ima jednu od 15 slika, a nijedna se slika ne pojavljuje više od dva puta - to su parovi koji će se podudarati.
Karte počinju "licem prema dolje", prikrivajući slike na 15 parova.
Cilj je stvoriti sve odgovarajuće parove u što kraćem vremenu.
Igra započinje odabirom jedne kartice, a zatim odabirom druge. Ako su igra, oni ostaju okrenuti licem prema gore; ako se ne podudaraju, dvije kartice se okreću naopako, licem prema dolje. Dok igrate, morat ćete se pouzdati u svoje pamćenje prethodnih karata i njihovih lokacija kako biste postigli uspješne utakmice.
Kako djeluje ova verzija koncentracije
U ovoj verziji igre odaberite kartice tako da kliknete na njih. Ako se odaberu dva, tada će ostati vidljivi, a ako se ne ispune, nakon sekunde će nestati.
Na dnu se nalazi brojač vremena koji prati koliko vam treba vremena da se uklopite sa svim parovima.
Ako želite započeti ispočetka, samo pritisnite gumb brojača i cijeli će se pano preurediti i možete ponovo započeti.
Slike korištene u ovom uzorku ne dolaze sa skriptu, pa će, kao što je spomenuto, morati navesti svoj vlastiti. Ako nemate slike za upotrebu s ovom skriptu i ne možete stvoriti vlastitu, možete potražiti odgovarajući grafikon koji je slobodan za upotrebu.
Dodavanje igre na vašu web stranicu
Skripta za memorijsku igru dodaje se vašoj web stranici u pet koraka.
Korak 1: Kopirajte sljedeći kôd i spremite ga u datoteku s imenom memoryh.js.
// Igra s memorijom koncentracije sa slikama - glavna skripta
// autorska prava Stephen Chapman, 28. veljače 2006., 24. prosinca 2009
// možete kopirati ovu skriptu pod uvjetom da zadržite obavijest o autorskim pravima
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'];
funkcija randOrd (a, b) {return (Math.round (Math.random ()) - 0,5);} var im = []; za
(var i = 0; i <15; i ++) {im [i] = nova slika (); im [i] .src = pločica [i]; pločica [i] =
''; pločica [i + 15] =
tile [i];} funkcija displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'height = "60" alt = "leđa" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = početak; funkcija start () {for (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
) CNTR (); tid = setInterval ('cntr ()', 1000);} funkcija cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Vrijednost =
min + ':' + (sek <10? '0': '') + sek; tmr ++;} funkcija disp (sel) {if (tno> 1)
{clearTimeout (cid); conceal ();} document.getElementById ('t' + sel) .innerHTML =
pločica [sel]; ako (tno == 0) ch1 = sel; drugo {ch2 = sel; cid = setTimeout ('skriva ()',
900);} tno ++;} funkcija skriva () {tno = 0; if (pločica [ch1]! = pločica [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; ako je (cnt> = 15)
clearInterval (tid);}
Zamijenit ćete imena slikovnih datoteka za leđa i pločica s nazivima datoteka vaših slika.
Ne zaboravite urediti svoje slike u svom grafičkom programu tako da su sve površine 60 piksela, tako da se ne trebaju predugo učitavati (kombinirana veličina od 16 slika korištenih za moj primjer iznosi samo 4758 bajta, tako da ne biste trebali imati problema održavati ukupnu vrijednost ispod 10k).
Korak 2: Odaberite kôd u nastavku i kopirajte ga u datoteku pod nazivom memory.css.
.blk {širina: 70px; visina: 70px; preljev: skriven;}
3. korak: Umetnite sljedeći kôd u glavni dio HTML dokumenta vaše web stranice da biste pozvali dvije datoteke koje ste upravo stvorili.
4. korak: Odaberite i kopirajte kôd u nastavku, a zatim ga spremite u datoteku pod nazivom memoryb.js.
// Igra s memorijom koncentracije sa slikama - Body Script
// autorska prava Stephen Chapman, 28. veljače 2006., 24. prosinca 2009
// možete kopirati ovu skriptu pod uvjetom da zadržite obavijest o autorskim pravima
document.write (”'); za (var b =
0; b <= 4; b ++) {document.write ('id = "t '+ ((5 * a) + b) +'">);} Document.write ( '' \ / tr> ')} document.write (' '\ / tablica>
Korak 5: Sada ostaje samo dodati igru na svoju web stranicu na kojoj želite da se pojavi umetanjem sljedećeg koda u vaš HTML dokument.