Pievienojiet spēles koncentrāciju Web lapai ar JavaScript

Šeit ir klasiskās atmiņas spēles versija, kas ļauj jūsu tīmekļa lapas apmeklētājiem salīdzināt attēlus režģa rakstā, izmantojot JavaScript.

Jums būs jāiesniedz attēli, taču ar šo skriptu varat izmantot jebkurus attēlus, kas jums patīk, ja vien jums pieder tiesības tos izmantot tīmeklī. Pirms sākat, jums tie būs jāmaina līdz 60 pikseļiem par 60 pikseļiem.

Jums būs nepieciešams viens attēls "karšu" aizmugurē un piecpadsmit - "frontēs".

Pārliecinieties, vai attēlu faili ir pēc iespējas mazāki vai spēles ielāde var aizņemt pārāk ilgu laiku. Izmantojot šo versiju, skriptu esmu ierobežojis līdz 30 kartēm, jo ​​visi attēli padarīs lapas ielādi daudz lēnāku. Jo vairāk lapu un attēlu ir, jo lēnāk tā tiks ielādēta. Iespējams, ka tā nav problēma tiem, kam ir labs platjoslas savienojums, bet tiem, kuriem ir lēnāks savienojums, var paust neapmierinātība ar laiku.

Ja jūs vēl neesat spēlējis šo spēli, noteikumi ir ļoti vienkārši. Ir 30 kvadrāti jeb kārtis. Katrā kartītē ir viens no 15 attēliem, un attēls netiek parādīts vairāk kā divas reizes - šie pāri tiks saskaņoti.

Kartes sākas ar "pusi uz leju", slēpjot attēlus uz 15 pāriem.

Mērķis ir pēc iespējas īsākā laikā parādīt visus atbilstošos pārus.

Spēle sākas, izvēloties vienu karti un pēc tam atlasot otru. Ja tās ir spēles, tās paliek uz augšu; ja tās nesakrīt, abas kārtis tiek apgrieztas otrādi, ar pusi uz leju. Spēlējot, jums būs jāpaļaujas uz atmiņu par iepriekšējām kartēm un to atrašanās vietām, lai veiksmīgi spēlētu.

Šajā spēles JavaScript versijā jūs izvēlaties kartes, noklikšķinot uz tām. Ja abi izvēlētie sakrīt, tad tie paliks redzami, ja nederēs, pēc aptuveni sekundes tie atkal pazudīs.

Apakšā ir laika skaitītājs, kas izseko, cik ilgs laiks nepieciešams, lai jūs sakristu visus pārus.

Ja vēlaties sākt no jauna, vienkārši nospiediet skaitītāja pogu, un viss tabulā tiks mainīts, un jūs varat sākt no jauna.

Šajā paraugā izmantotie attēli nav komplektā ar skriptu, tāpēc, kā minēts, jums būs jāsniedz savs. Ja jums nav attēlu, ko izmantot šajā skriptā, un nevarat izveidot savu, varat meklēt piemērotu klipkopu, kuru var brīvi izmantot.

Atmiņas spēles skripts tiek pievienots jūsu tīmekļa lapai piecās darbībās.

1. darbība: Nokopējiet šo kodu un saglabājiet to failā ar nosaukumu memoryh.js.

// Koncentrācijas atmiņas spēle ar attēliem - Skripts
// autortiesības Stefans Čepmens, 2006. gada 28. februāris, 2009. gada 24. decembris
// jūs varat kopēt šo skriptu ar noteikumu, ka jūs saglabājat paziņojumu par autortiesībām

var atpakaļ = '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) {atgriešanās (Math.round (Math.random ()) - 0,5);} var im = []; priekš
(var i = 0; i <15; i ++) {im [i] = jauns attēls (); im [i] .src = flīze [i]; flīze [i] =
''; flīze [i + 15] =
flīze [i];} funkcijas displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'

augstums = "60" alt = "atpakaļ" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
logs.ielādēt = sākums; funkcijas sākums () {par (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'). Value =
min + ':' + (sek. <10? '0': '') + sek; tmr ++;} funkcija disc (sel) {if (tno> 1)
{clearTimeout (cid); slēpt ();} document.getElementById ('t' + sel) .innerHTML =
flīze [sel]; ja (tno == 0) ch1 = sel; cits {ch2 = sel; cid = setTimeout ('slēpt ()',
900);} tno ++;} funkcija slēpt () {tno = 0; if (flīze [ch1]! = flīze [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; ja (cnt> = 15)
clearInterval (tid);}

Jūs aizstāsit attēla failu nosaukumus atpakaļ un flīze ar savu attēlu failu nosaukumiem.

Atcerieties rediģēt savus attēlus grafikas programmā tā, lai tie visi būtu 60 pikseļu kvadrātā, lai tos ielādētu pārāk ilgi (manā piemērā izmantoto 16 attēlu kopējais lielums ir tikai 4758 baiti, tāpēc jums nevajadzētu būt problēmām, lai kopsummu saglabātu zem 10 k).

2. darbība: Atlasiet zemāk esošo kodu un nokopējiet to failā ar nosaukumu atmiņa.css.

.blk {platums: 70 pikseļi; augstums: 70 pikseļi; pārpilde: slēpta;}

3. darbība: Ievietojiet šo kodu savas tīmekļa lapas HTML dokumenta galviņas sadaļā, lai izsauktu divus tikko izveidotos failus.

4. darbība: Atlasiet un nokopējiet zemāk esošo kodu un pēc tam saglabājiet to failā ar nosaukumu memoryb.js.

// Koncentrācijas atmiņas spēle ar attēliem - pamatteksts
// autortiesības Stefans Čepmens, 2006. gada 28. februāris, 2009. gada 24. decembris
// jūs varat kopēt šo skriptu ar noteikumu, ka jūs saglabājat paziņojumu par autortiesībām

document.write ('

5. darbība: Tagad atliek tikai pievienot spēli savai tīmekļa lapai, kur tā parādās, ievietojot HTML kodā šo kodu.