Siin on klassikalise mälumängu versioon, mis lubab teie veebisaidi külastajatel JavaScripti abil ruutvõrgustikus pilte võrrelda.
Piltide pakkumine
Kujutised peate küll esitama, kuid saate selle skripti korral kasutada mis tahes teile meeldivaid pilte, kui teil on õigused nende kasutamiseks veebis. Enne alustamist peate ka nende suurust muutma 60 pikslile 60 pikslile.
Teil on vaja ühte pilti "kaartide" tagaküljel ja viisteist kujutist "rindel".
Veenduge, et pildifailid oleksid võimalikult väikesed või mängu laadimine võib liiga kaua aega võtta. Selle versiooniga olen piiranud skripti 30 kaardiga, kuna kõigi piltide tegemine muudab lehe laadimise palju aeglasemaks. Mida rohkem kaarte ja pilte on, seda aeglasemalt leht laadib. See ei pruugi olla probleem hea lairibaühendusega inimeste jaoks, kuid aeglasema ühendusega kasutajad võivad selle aja pärast pettumust valmistada.
Mis on kontsentratsiooni mälumäng?
Kui te pole seda mängu varem mänginud, on reeglid väga lihtsad. Seal on 30 ruutu ehk kaarti. Igal kaardil on üks 15-st pildist, kusjuures ühtegi pilti ei kuvata rohkem kui kaks korda - need paarid sobitatakse.
Kaardid algavad "küljega allapoole", varjates 15 paari pilte.
Eesmärk on keerata kõik sobivad paarid üles võimalikult lühikese aja jooksul.
Esitamine algab ühe kaardi valimisega ja seejärel teise kaardi valimisega. Kui need on vasted, jäävad nad näoga üles; kui need ei kattu, keeratakse kaks kaarti tagurpidi, tagasi. Mängides peate edukate matšide tegemisel tuginema eelnevate kaartide mälule ja nende asukohtadele.
Kuidas see kontsentratsiooni versioon töötab
Selles mängu JavaScripti versioonis valite kaardid, klõpsates neil. Kui teie valitud kaks sobivad, jäävad nad nähtavaks, kui mitte, siis kaovad nad umbes sekundi pärast uuesti.
Allosas on ajaloendur, mis jälgib, kui kaua võtab teil aega kõigi paaride kokkulangemine.
Kui soovite alustada uuesti, vajutage lihtsalt loendurinuppu ja kogu tabelit muudetakse ja saate uuesti alustada.
Selles proovis kasutatud pildid ei kuulu skriptiga, nii et nagu mainitud, peate esitama oma. Kui teil pole selle skriptiga pilte, ja te ei saa oma pilte luua, võite otsida sobivaid lõike, mida saaks vabalt kasutada.
Mängu lisamine oma veebilehele
Mälumängu skript lisatakse teie veebilehele viie sammuna.
Samm 1: Kopeerige järgmine kood ja salvestage see nimega faili mälu.js.
// Kontsentratsiooni mälumäng piltidega - peaskript
// autoriõigused Stephen Chapman, 28. veebruar 2006, 24. detsember 2009
// võite selle skripti kopeerida, kui säilitate autoriõiguse teatise
var tagasi = 'tagasi.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'];
funktsioon randOrd (a, b) {return (Math.round (Math.random ()) - 0,5);} var im = []; jaoks
(var i = 0; i <15; i ++) {im [i] = uus pilt (); im [i] .src = plaat [i]; plaat [i] =
''; plaat [i + 15] =
paan [i];} funktsioon displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'kõrgus = "60" alt = "tagasi" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
aken.koormus = algus; funktsiooni algus () {jaoks (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
); cntr (); tid = setInterval ('cntr ()', 1000);} funktsioon cntr () {var min =
Math.põrand (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Value =
min + ':' + (sek <10? '0': '') + sek; tmr ++;} funktsioon displa (sel) {if (tno> 1)
{clearTimeout (cid); varjata ();} document.getElementById ('t' + sel) .innerHTML =
plaat [sel]; if (tno == 0) ch1 = sel; muidu {ch2 = sel; cid = setTimeout ('varjata ()',
900);} tno ++;} funktsioon varjata () {tno = 0; if (paan [ch1]! = paan [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; if (cnt> = 15)
clearInterval (korras);}
Asendate pildi failifailide nimed tagasi ja plaat koos piltide failinimedega.
Pidage meeles, et redigeerige oma pilte oma graafikaprogrammis nii, et need oleksid kõik 60 pikslit ruudukujulised, nii et nende laadimine ei võtaks liiga kaua aega (minu näites kasutatud 16 pildi ühendatud suurus on kõigest 4758 baiti, nii et teil ei tohiks olla probleeme koguarvu alla hoida 10 k).
2. samm: Valige allpool olev kood ja kopeerige see faili nimega mälu.css.
.blk {laius: 70 pikslit; kõrgus: 70 pikslit; ülevool: peidetud;}
3. samm: Sisestage järgmine kood oma veebilehe HTML-i dokumendi päisesse, et helistada kahele äsja loodud failile.
4. samm: Valige ja kopeerige allolev kood ning salvestage see faili nimega memoryb.js.
// Kontsentratsiooni mälumäng piltidega - kehaskript
// autoriõigused Stephen Chapman, 28. veebruar 2006, 24. detsember 2009
// võite selle skripti kopeerida, kui säilitate autoriõiguse teatise
document.write (''); jaoks (var b =
0; b <= 4; b ++) {document.write ('id = "t '+ ((5 * a) + b) +'">');} document.write (' ');} document.write ('
5. samm: Nüüd jääb vaid lisada mäng oma veebilehele, kus soovite seda kuvada, sisestades HTML-dokumenti järgmise koodi.