Itt található a klasszikus memóriajáték olyan verziója, amely lehetővé teszi a weboldal látogatói számára, hogy a JavaScript segítségével rácsmintázatban illeszkedjenek a képekhez.
A képek átadása
Meg kell adnia a képeket, de bármilyen tetszőleges képet felhasználhat ezzel a szkripttel, mindaddig, amíg megvan a jogod a képek használatához az interneten. Mielőtt elkezdené, át kell méreteznie őket 60 pixelre és 60 pixelre.
Szüksége lesz egy képre a "kártyák" hátoldalán és tizenöt a "frontokban".
Ügyeljen arra, hogy a képfájlok a lehető legkisebbek legyenek, vagy a játék betöltése sokáig tarthat. Ezzel a verzióval a szkriptet 30 kártyára korlátoztam, mivel az összes kép sokkal lassabbá teszi az oldal betöltését. Minél több kártya és kép van az oldalon, annál lassabban tölti be az oldal. Lehet, hogy ez nem okoz problémát azoknak, akiknek a jó szélessávú kapcsolata van, de a lassabb kapcsolatokkal rendelkezők frissebbé válhatnak az idő múlásával.
Mi a koncentrációs memória játék?
Ha még nem játszottad ezt a játékot, a szabályok nagyon egyszerűek. 30 négyzet vagy kártya van. Mindegyik kártyán a 15 kép egyike található, a képek nem jelennek meg több mint kétszer - ezek a párok illeszkednek egymáshoz.
A kártyák "arccal lefelé" kezdődnek, és elrejtik a képeket a 15 páron.
A cél az, hogy az összes megfelelő párt a lehető legrövidebb időn belül előállítsa.
A lejátszás az egyik kártya kiválasztásával, majd a második kiválasztásával kezdődik. Ha mérkőzés, akkor felfelé maradnak; ha nem egyeznek, akkor a két kártyát fordított oldalával lefelé fordítják. A játék közben a sikeres mérkőzések elkészítéséhez támaszkodnia kell a korábbi kártyák memóriájára és azok helyére.
Hogyan működik a koncentráció ezen verziója?
A játék ezen JavaScript verziójában a kártyákat kattintva választhatja ki. Ha a kiválasztott kettő megegyezik, akkor láthatóak maradnak, ha nem, akkor körülbelül egy másodperc múlva ismét eltűnnek.
Alul van egy időszámláló, amely nyomon követi, hogy meddig tart az összes párt.
Ha újra szeretne kezdeni, csak nyomja meg a számláló gombot, és az egész táblát átszervezik, és újra indulhat.
A mintában használt képek nem tartoznak a forgatókönyvhöz, tehát, amint már említettük, meg kell adnia a sajátját. Ha nem rendelkezik ezzel a szkripttel használható képek, és nem tudja létrehozni a sajátját, keressen megfelelő, ingyenesen használható clipart-ot.
A játék hozzáadása a weboldalához
A memória játék szkriptét öt lépésben adjuk hozzá a weboldalhoz.
1. lépés: Másolja a következő kódot, és mentse el egy nevű fájlba memoryh.js.
// Koncentrációs memóriajáték képekkel - Head Script
// szerzői jog Stephen Chapman, 2006. február 28., 2009. december 24.
// Ön másolhatja ezt a szkriptet, feltéve, hogy megőrzi a szerzői jogi figyelmeztetést
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'];
RandOrd (a, b) függvény {visszatérés (Math.round (Math.random ()) - 0,5);} var im = []; mert
(var i = 0; i <15; i ++) {im [i] = új kép (); im [i] .src = [i] csempe; csempe [i] =
''; csempe [i + 15] =
[i];} funkció displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'magasság = "60" alt = "vissza" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = start; függvény indítása () {mert (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
); Cntr (); tid = setInterval ('cntr ()', 1000);} függvény cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt') érték =
min + ':' + (másodperc <10? '0': '') + mp; tmr ++;} function displa (sel) {if (tno> 1)
{clearTimeout (cid); conceal ();} document.getElementById ('t' + sel) .innerHTML =
csempe [sel], ha (tno == 0) ch1 = sel; egyéb {ch2 = sel; cid = setTimeout ('rejteni ()',
900);} tno ++;} funkció elrejtése () {tno = 0; if (csempe [ch1]! = csempe [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; if (cnt> = 15)
clearInterval (tid);}
Kicseréli a képfájl nevét vissza és csempe a képek fájlneveivel.
Ne felejtse el szerkeszteni a képeket a grafikus programban úgy, hogy mind 60 pixel négyzet alakúak legyenek, így a betöltésük nem vesz igénybe túl sokáig (a példámhoz használt 16 kép együttes mérete mindössze 4758 byte, tehát nem kell gondolni, hogy a teljes képet alacsonyabban tartja) 10k).
2. lépés: Válassza ki az alábbi kódot, és másolja a nevű fájlba memory.css.
.blk {szélesség: 70px; magasság: 70 képpont; túlcsordulás: rejtett;}
3. lépés: Helyezze be a következő kódot a weboldal HTML-dokumentumának fejrészébe, hogy felhívja az éppen létrehozott két fájlt.
4. lépés: Válassza ki és másolja az alábbi kódot, majd mentse el az úgynevezett fájlba memoryb.js.
// Koncentrációs memóriajáték képekkel - Body Script
// szerzői jog Stephen Chapman, 2006. február 28., 2009. december 24.
// Ön másolhatja ezt a szkriptet, feltéve, hogy megőrzi a szerzői jogi figyelmeztetést
document.write (”'); mert (var b =
0; b <= 4; b ++) {document.write ('id = "t '+ ((5 * a) + b) +'">');} Document.write (' ');} document.write ('
5. lépés: Most csak annyit kell tennie, hogy a játékot hozzáadja a weboldalához, ahol meg szeretné jelenni, az alábbi kód beillesztésével a HTML dokumentumba.