Įtraukite žaidimo koncentraciją į tinklalapį naudodami „JavaScript“

Čia yra klasikinio atminties žaidimo versija, leidžianti jūsų tinklalapio lankytojams suderinti vaizdus tinklelio schemoje, naudojant „JavaScript“.

Turėsite pateikti vaizdus, ​​tačiau naudodami šį scenarijų galėsite naudoti bet kuriuos jums patinkančius vaizdus, ​​jei turite teises juos naudoti internete. Prieš pradėdami, taip pat turėsite pakeisti jų dydį iki 60 pikselių 60 pikselių.

Jums reikės vieno atvaizdo „kortelių“ užpakalinėje dalyje ir penkiolikos - „priekyje“.

Įsitikinkite, kad vaizdo failai yra kuo mažesni, arba žaidimas gali užtrukti per ilgai. Naudodamas šią versiją scenarijų apribojau iki 30 kortelių, nes dėl visų vaizdų puslapis bus daug lėčiau įkeliamas. Kuo daugiau kortelių ir vaizdų puslapis, tuo lėčiau puslapis bus įkeliamas. Tiems, kurie turi gerą plačiajuosčio ryšio ryšį, tai gali nekelti problemų, tačiau lėtesnį ryšį turintys asmenys gali nusivilti per tiek laiko.

Jei dar nežaidėte šio žaidimo, taisyklės yra labai paprastos. Yra 30 kvadratų arba kortų. Kiekvienoje kortelėje yra vienas iš 15 vaizdų, be to, kad vaizdas būtų rodomas daugiau kaip du kartus - tai poros, kurios bus suderintos.

Kortos prasideda „puse žemyn“, slepiant vaizdus 15 porų.

Tikslas yra kuo greičiau parodyti visas atitikimo poras.

Žaisti pradedant pasirenkant vieną kortelę, o tada pasirenkant antrą. Jei jos yra rungtynės, jos lieka veidu į viršų; jei jie nesutampa, abi kortos apverčiamos atgal, nukreipta žemyn. Kai žaisite, turėsite pasikliauti ankstesnių kortelių atmintimi ir jų buvimo vietomis, kad laimėtumėte sėkmingas rungtynes.

Šioje „JavaScript“ žaidimo versijoje korteles pasirenkate spustelėdami jas. Jei du jūsų pasirinkti, jie liks matomi, jei ne, po maždaug sekundės jie vėl išnyks.

Apačioje yra laiko skaitiklis, kuris seka, kiek laiko reikia suderinti visas poras.

Jei norite pradėti iš naujo, tiesiog paspauskite skaitiklio mygtuką ir visa lentelė bus pakeista ir galėsite pradėti iš naujo.

Šiame pavyzdyje naudojami vaizdai nėra pateikiami kartu su scenarijumi, todėl, kaip minėta, turėsite pateikti savo. Jei neturite vaizdų, kuriuos galėtumėte naudoti su šiuo scenarijumi, ir negalite sukurti savo, galite ieškoti tinkamų, nemokamų naudoti paveikslėlių.

Atminties žaidimo scenarijus pridedamas prie jūsų tinklalapio penkiais žingsniais.

1 žingsnis: Nukopijuokite šį kodą ir išsaugokite failą pavadinimu atmintis.js.

// Koncentracijos atminties žaidimas su vaizdais - scenarijus
// autorių teisės Stephenas Chapmanas, 2006 m. vasario 28 d., 2009 m. gruodžio 24 d
// galite nukopijuoti šį scenarijų, jei pasiliekate pranešimą apie autorių teises

var atgal = 'atgal.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) {grįžti (Math.round (Math.random ()) - 0,5);} var im = []; dėl
(var i = 0; i <15; i ++) {im [i] = naujas vaizdas (); im [i] .src = plytelė [i]; plytelė [i] =
''; plytelė [i + 15] =
čerpė [i];} funkcijos „displayBack“ (i) {document.getElementById ('t' + i) .innerHTML =
'

aukštis = "60" alt = "atgal" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
langas.įkelti = pradėti; funkcijos pradžia () {už (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 =
„Matematikos grindys“ (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Value =
min + ':' + (sek. <10? '0': '') + sek; tmr ++;} funkcija disc (sel) {if (tno> 1)
{clearTimeout (cid); paslėpti ();} document.getElementById ('t' + sel) .innerHTML =
plytelė [sel]; if (tno == 0) ch1 = sel; dar {ch2 = sel; cid = setTimeout ('paslėpti ()',
900);} tno ++;} funkcija paslėpti () {tno = 0; if (plytelė [ch1]! = plytelė [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; if (cnt> = 15)
„clearInterval“ (tvarkingas);}

Pakeisite vaizdo failų pavadinimus atgal ir plytelių su savo atvaizdų failų pavadinimais.

Nepamirškite redaguoti vaizdų savo grafikos programoje, kad jie būtų visi 60 pikselių kvadratiniai, kad jie nebūtų per ilgi įkelti (mano pavyzdyje naudotų 16 vaizdų bendras dydis yra tik 4758 baitai, todėl neturėtumėte problemų išlaikyti bendrą skaičių mažesnį 10k).

2 žingsnis: Pasirinkite žemiau esantį kodą ir nukopijuokite jį į failą, vadinamą atmintis.css.

.blk {plotis: 70 taškų; aukštis: 70 taškų; perteklius paslėptas;}

3 veiksmas: Įveskite šį kodą į savo tinklalapio HTML dokumento skiltį „Head Head“, kad paskambintumėte į du ką tik sukurtus failus.

4 veiksmas: Pasirinkite ir nukopijuokite žemiau esantį kodą, tada įrašykite jį į failą, vadinamą memoryb.js.

// Koncentracijos atminties žaidimas su vaizdais - kūno scenarijus
// autorių teisės Stephenas Chapmanas, 2006 m. vasario 28 d., 2009 m. gruodžio 24 d
// galite nukopijuoti šį scenarijų, jei pasiliekate pranešimą apie autorių teises

document.write ('

5 veiksmas: Viskas, kas liko, yra pridėti žaidimą į savo tinklalapį ten, kur norite, kad jis būtų įdėtas į HTML kodą įvedant šį kodą.