Izveidojiet atmiņas spēli ar HTML un JQuery Effects metodēm

Daudzi tīmekļa izstrādātāji izmanto Jquery bibliotēku, lai padarītu savas tīmekļa lapas interaktīvākas un funkcionālākas. Bibliotēka jQuery piedāvā vairākas metodes un funkcijas, tostarp Jquery Effect, ko izmanto, lai vietnes elementiem pievienotu interaktivitāti un animāciju.
Animācijām nav nepieciešams īpašs spraudnis un tās ir saderīgas ar lielāko daļu pārlūkprogrammu, kā arī grafiskajai daļai tiek izmantots CSS3.
Dažas īpašības ir:

 Animate () metode

Šī metode ļauj lietot css stilu tīmekļa lapas elementam, piemēram, lai palielinātu slāni.
Sintakse ir šāda

 (atlasītājs) .animate ({style}, ātrums)

Vienkāršs animācijas funkcijas piemērs, ko izmanto, lai elementam lietotu css stilu:

 Animēt un izvērst animēt un sakļaut

Tātad mēs varam redzēt, kā ar animate () metodi mēs varam elementam piemērot css un noteiktā laikā (milisekundēs) mainīt to, lai radītu mums vajadzīgo efektu.
Mēs izveidojam spēli ar Jquery un Animate () metodi
Izmantojot šo metodi, mēs izveidosim Simona kauliņu stila spēli vai atmiņas spēli, kas sastāv no vairāku sarkanu apļu parādīšanas ekrānā un tikai daži no tiem tiks parādīti zilā secībā, spēlētājam ir jānoklikšķina, atkārtojot secību, ja izdodas secība, ekrāns tiks pārzīmēts, pievienojot vairāk apļu un paaugstinot grūtības pakāpi. Ja spēlētājs neveic secību, viņam jāatkārto šis spēles līmenis, līdz viņš to pabeidz pareizi. Arī brīdinājums jums pateiks, vai esat pabeidzis līmeni un tādējādi jūs pāriesit uz nākamo līmeni.
Spēle sāksies ar 2 rindām un 2 kolonnām, 4 apļi, no kuriem 2 no tiem dažas sekundes tiks parādīti zilā krāsā. Tad mums ir jānoklikšķina uz diviem, kas bija zilā krāsā. Tādējādi katrā līmenī tiks pievienota kolonna un citā līmenī rinda, kā arī aktīvāki apļi tiks pievienoti zilā krāsā, lai vēlāk mēģinātu atcerēties to pašu secību.
Izskatu secībai nav nozīmes, bet gan uz to, ka tiek noklikšķināti uz visiem apļiem, kas ir zilā krāsā.
Dēļa vai skatuves maksimālais izmērs būs 6 kolonnas ar 6 rindām, kas dos režģi ar 36 apļiem.

Mēs meklējam fona attēlu savai spēlei, tas būs tīmekļa fons vai mēs varam izmantot plakanu krāsu. Mēs sākam, izveidojot spēļu direktoriju, un failā index.html, kurā būs tīmekļa lapa, tīmekļa kods būs šāds:

 Atmiņas spēle
Spēle Saimons saka
Mums jāatceras zilo apļu secība un
noklikšķiniet, atkārtojot secību

Šajā piemērā ir piemērota Jquery versija ar 1.9 vai jaunāku versiju. Pēc tam stila lapām izveidosim failu styles.css, ēnām izmantosim CSS3, bet spēlēm - dažus efektus. Pēc tam identifikatori un klases tiks izmantotas no Jquery, lai varētu veikt spēles animāciju un interaktivitāti.

 pamatteksts {piemale: 0 pikseļi; polsterējums: 0 pikseļi; } # background {background: # 333 url (background.jpg.webp); text-align: center; augšējā mala: -20 pikseļi; polsterējums: 10 pikseļi; augstums: 800 pikseļi; displejs: bloks; } h2 {krāsa: #fff; } h3 {krāsa: #ccc; } .konteiners {polsterējums: 4px; displejs: inline-block; fona krāsa: #ffffff; platums: 200 pikseļi; augstums: 200 pikseļi; apmale: 1px melna cieta; apmale: 1px cieta rgb (204, 204, 204); robežas rādiuss: 3 pikseļi 3 pikseļi 3 pikseļi 3 pikseļi; -webkit-box-shadow: 6 pikseļi 5 pikseļi 8 pikseļi 0 pikseļi rgba (50, 50, 50, 0,75); -moz-box-shadow: 6px 5px 8px 0px rgba (50, 50, 50, 0,75); kaste-ēna: 6 pikseļi 5 pikseļi 8 pikseļi 0 pikseļi rgba (50, 50, 50, 0,75) ;; } .figūra {robeža: 2px #fff solid; fons: sarkans; mala: 0 pikseļi; polsterējums: 0 pikseļi; displejs: inline-block; kaste-ēna: 2 pikseļi 2 pikseļi 2 pikseļi rgb (136, 136, 136); mala: 2 pikseļi; }. attēls: virziet kursoru {kursors: rādītājs; } .active {background-color: # 4D90FE; }. kļūda {fona krāsa: sarkana; }. aplis {/ * robežas rādiuss: 50 pikseļi; * / platums: 100 pikseļi; augstums: 100 pikseļi; -moz-border-rādiuss: 50 pikseļi; -webkit-border-rādiuss: 50 pikseļi; robežas rādiuss: 50 pikseļi; }

Kad esam izveidojuši stilus, mēs varam izveidot spēles funkcionalitāti un animāciju. Mēs izveidojam failu game.js Mēs rakstām šādu Javascript kodu, mums šeit jāidentificē, kuras klases un css identifikatori piedalās spēlē un kādam nolūkam tos izmantojam. Katram no tiem ir atrr atribūts, un tam var pievienot klases, izmantojot addClass.

 var Tfigure = 55; // skaitļa lielums var StartGame = false // Sākt spēli False = No var NextLevel = true; // Patiesa turpiniet spēli, ja tā ir nepatiesa, spēle aptur var kolonnas = rindas = 2 // Sākotnējais mikroshēmu vai apļu lielums uz tāfeles 2x2, kas ir 4 apļi $ (dokuments) .ready (function () {// Es ģenerēju spēle pēc katras grūtības pakāpes GeneraJuego kolonnu un rindu skaita (kolonnas, rindas);}); funkcija GameGenerate (c, r) {// Ja NextLevel ir vienāds ar false, norāda, ka spēlei ir jāapstājas, ja (! NextLevel) atgriežas; // Es pārtraucu spēli NextLevel = false; // Mēs izdzēšam visus skatuves vai spēles dēļa elementus $ (".game") .fadeOut (1000, // fade metodes beigās // iztukšojam spēles elementus uz skatuves vai spēles dēļa funkcijas ( ) {$ (".game") .empty (); // Izvērsiet skatuvi vai spēļu galdu, lai tajā ietilptu apļi $ (".container") .animate ({height: ((Tfigure + 8) * r) + " px ", platums: ((attēls + 8) * c) +" px "}, 1000, // izvēršanas beigās ar amimate () // Es izveidoju jaunos skaitļus atbilstoši jaunajam ekrāna izmēram i spēles līmeņa funkcija () {for (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFigure ("aplis", Tfigure)); $ (".game" ) .fadeIn (200); // Es nejauši izveidoju tos apļus uz tāfeles, uz kuriem var noklikšķināt un kuri nav CreateBlueFigure ();})}); } funkcija CreateFigure (shapetype, r) {// Ja tiek noklikšķināta uz kādas formas, atgrieziet $ ("") .addClass (" skaitlis "+ tipsFigure) .width (r) .height (r) .click (function () {if (StartGame) {// Es pārbaudu, vai šim skaitlim ir atlasītais atribūts, tas ir, ja tas ir viens no tiem, kas bija aktīvi zilā krāsā, ja ($ (this) .attr ("selected") == "selected") $ (this) .addClass ("active"); else $ (this) .addClass ("error") ); var TotalSelected = $ (".figure [selected = 'selected']") .length // Ja klikšķu skaits aktīvajos lokos un klikšķu skaits neaktīvajos lokos ir lielāks par veikto klikšķu skaitu, mēs neturpinām spēli un vēlāk atkal atjaunosim ekrānu, nemainot līmeni, ja (($ (". active"). length + $ (". error"). length)> = TotalSelected) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa)") .addClass ("activa"); // Ja klikšķa neveiksmes līmenis ir 0, tas nozīmē, ka mēs nokļūstam secībā, ja ($ (". error "). length == 0) {alert (" Jūs esat nokļuvis secībā, pārejiet uz nākamo līmeni "); ja (kolonnas == rindas) kolonnas ++; citādi, ja (kolonnas> rindas) rindas ++; / / Maksimālais līmenis tā n 6 rindas ar 6 kolonnām, ja (kolonnas> 6) {kolonnas = 6; rindas = 6; }} GeneraJuego (kolonnas, rindas); }}}); } funkcija CreateBlueFigure () {var skaits = 0; var garums = $ (".game> .figure") .length for (count = 0; count <Math.ceil (length / 3);) {var random = Math.ceil (Math.random () * length); if (random .figure ") .eq (random) .hasClass (" active ")) {$ (" .game> .figure ") .eq (random) .addClass (" active "). attr (" selected ", "atlasīts"); count ++;}}} // Paslēpj atlasītos skaitļus pēc atkārtojamās secības parādīšanas window.setTimeout (HideBlueFigures, 1200)} funkcija HideBlueFigures () {$ (".game> .figure"). removeClass ("active"); GameStart = true; NextLevel = true;}

Tātad mēs noslēdzam spēli, mēs varam pievienot punktu skaitu, brīdinājumus un ziņojumus, arī skaņu, ja mēs vēlamies. Papildus iespējai apturēt un turpināt spēli, paturiet prātā, ka tas ir tikai Javascript, HTML un CSS, taču būtu viegli paplašināt rezultātu pievienošanu datu bāzes datiem vai iekļaut augstākas grūtības pakāpi.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu