Tu je različica klasične pomnilniške igre, ki obiskovalcem vaše spletne strani omogoča, da se s pomočjo JavaScript ujemajo s slikami v mreži.
Dobava slik
Slike boste morali predložiti, vendar lahko s tem skriptom uporabljate poljubne slike, če imate pravice do uporabe v spletu. Preden začnete, jih boste morali spremeniti na 60 slikovnih pik.
Za hrbtne strani "kartic" boste potrebovali eno sliko in petnajst za "sprednje strani".
Prepričajte se, da so slikovne datoteke čim manjše ali pa se lahko igra traja predolgo. S to različico sem skript omejil na 30 kartic, saj bodo vse slike naložile stran počasneje. Več kart in slik ima stran, počasneje se bo nalagala. Pri tistih, ki imajo dobre širokopasovne povezave, to morda ne bo težava, toda tisti, ki imajo počasnejše povezave, se lahko s časom zapletejo.
Kaj je igra s spominsko koncentracijo?
Če še niste igrali te igre, so pravila zelo preprosta. Obstaja 30 kvadratov ali kartic. Vsaka kartica ima eno od 15 slik, pri čemer se nobena slika ne pojavi več kot dvakrat - to so pari, ki se bodo ujemali.
Karte se začnejo "obrnjeno navzdol" in prikrivajo slike na 15 parih.
Cilj je v čim krajšem času prikazati vse ujemajoče se pare.
Predvajanje se začne tako, da izberete eno kartico in nato izberete drugo. Če gre za tekmo, ostanejo z obrazom navzgor; če se ne ujemata, obe kartici obrnemo nazaj, obrnjeni navzdol. Med igranjem se boste morali za uspešne tekme zanašati na svoj spomin na prejšnje karte in njihove lokacije.
Kako deluje ta različica koncentracije
V tej različici JavaScripta izberete kartice s klikom na njih. Če se dva, ki ju izberete, ujemata, bosta ostala vidna, če se ne bosta, bosta čez sekundo spet izginila.
Na dnu je števec časa, ki spremlja, kako dolgo trajate, da se ujemate z vsemi pari.
Če želite začeti znova, samo pritisnite gumb števca in celotna razpredelnica bo preurejena in lahko začnete znova.
Slike, uporabljene v tem vzorcu, ne prihajajo s skriptom, zato boste morali omeniti svoje. Če nimate slik, ki bi jih lahko uporabili s tem skriptom, in ne morete ustvariti svojega, lahko poiščete primeren grafični prikaz, ki je brezplačen za uporabo.
Dodajanje igre na vašo spletno stran
Skript za spominsko igro se v petih korakih doda na vašo spletno stran.
Korak 1: Kopirajte naslednjo kodo in jo shranite v datoteko z imenom memoryh.js.
// Koncentracijska spominska igra s slikami - glavna skripta
// avtorske pravice Stephen Chapman, 28. februar 2006, 24. december 2009
// lahko kopirate ta skript, če obdržite obvestilo o avtorskih pravicah
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] =
ploščica [i];} funkcija displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'height = "60" alt = "nazaj" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = začetek; 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'). Vrednost =
min + ':' + (sek <10? '0': '') + sek; tmr ++;} funkcija disp (sel) {if (tno> 1)
{clearTimeout (cid); conceal ();} document.getElementById ('t' + sel) .innerHTML =
ploščica [sel]; če (tno == 0) ch1 = sel; drugače {ch2 = sel; cid = setTimeout ('prikrij ()',
900);} tno ++;} funkcija prikriva () {tno = 0; če (ploščica [ch1]! = ploščica [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; če (cnt> = 15)
clearInterval (tid);}
Imena slikovnih datotek boste zamenjali za nazaj in ploščice z imeni datotek slik.
Ne pozabite urediti slike v svojem grafičnem programu tako, da so vse 60 slikovnih pik kvadratne, da se ne bodo predolgo nalagale (kombinirana velikost 16 slik, uporabljenih v mojem primeru, znaša le 4758 bajtov, tako da ne bi smeli imeti težav z ohranjanjem skupnega pod 10k).
2. korak: Izberite spodnjo kodo in jo kopirajte v datoteko z imenom memory.css.
.blk {širina: 70px; višina: 70px; preliv: skrit;}
3. korak: V naslov dokumenta HTML vaše spletne strani vstavite naslednjo kodo, da pokličete dve datoteki, ki ste jo pravkar ustvarili.
4. korak: Spodaj izberite in kopirajte kodo in jo shranite v datoteko z imenom memoryb.js.
// Koncentracijska spominska igra s slikami - Body Script
// avtorske pravice Stephen Chapman, 28. februar 2006, 24. december 2009
// lahko kopirate ta skript, če obdržite obvestilo o avtorskih pravicah
document.write (''); za (var b =
0; b <= 4; b ++) {document.write ('id = "t '+ ((5 * a) + b) +'">');} document.write (' ');} document.write ('
5. korak: Zdaj samo še dodate igro na svojo spletno stran, kjer želite, da se prikaže z vstavitvijo naslednje kode v vaš HTML dokument.