✅ Napravite igru memorije s metodama HTML i JQuery Effects

Sadržaj

Simon kaže igru

Mnogi web programeri koriste knjižnicu Jquery kako bi svoje web stranice učinili interaktivnijima i funkcionalnijima. Knjižnica jQuery nudi nekoliko metoda i funkcija, uključujući Jquery Effect, koji se koristi za dodavanje interaktivnosti i animacije elementima web stranice.
Animacije ne zahtijevaju nikakve posebne dodatke i kompatibilne su s većinom preglednika, a za grafički dio koristi se i CSS3.
Neka svojstva su:

 Metoda animate ()

Ova metoda omogućuje primjenu css stila na element web stranice, na primjer za povećanje sloja.
Sintaksa je sljedeća

 (selektor) .živo ({style}, brzina)

Jednostavan primjer funkcije animate koja se koristi za primjenu css stila na element:

 Animiraj i proširi uz Animiraj i Skupi

Tako možemo vidjeti kako pomoću metode animate () možemo primijeniti css na element i promijeniti ga u određenom vremenu (milisekunde) kako bismo generirali bilo koji učinak koji nam je potreban.
Igru stvaramo pomoću Jquery i metode Animate ()
Ovom ćemo metodom stvoriti igru u stilu Simon Dicea ili memorijsku igru koja će se sastojati od prikazivanja brojnih crvenih krugova na zaslonu, a samo će neki od njih biti prikazani u plavom slijedu, igrač mora kliknuti ponavljajući slijed, ako uspije li slijed, zaslon će se ponovno nacrtati dodajući više krugova i podižući razinu težine. Ako igrač ne uspije u nizu, mora ponavljati tu razinu igre dok je ne dovrši ispravno. Također, upozorenje će vam reći jeste li završili razinu, pa ćete preći na sljedeću razinu.
Igra će započeti s 2 retka i 2 stupca, od kojih će 4 kruga biti prikazana nekoliko sekundi plavom bojom. Zatim moramo kliknuti na dva koja su bila plave boje. Tako će se na svakoj razini dodati stupac, a na drugoj razini redak, također će se dodati još aktivnijih krugova plavom bojom kako bi kasnije pokušali zapamtiti isti slijed.
Redoslijed pojavljivanja nije bitan, već da se kliknu svi krugovi koji su plavi.
Maksimalna veličina ploče ili pozornice bit će 6 stupaca po 6 redaka, što će dati mrežu od 36 krugova.

Tražimo pozadinsku sliku za našu igru, bit će to pozadina weba ili možemo koristiti ravnu boju. Započinjemo stvaranjem direktorija igre i unutar datoteke index.html koja će sadržavati web stranicu, web kôd će biti sljedeći:

 Igra memorije
Simon kaže igru
Moramo se sjetiti slijeda plavih krugova i
kliknite ponavljajući slijed

Verzija Jquery s korištenjem 1.9 ili više je dobra za ovaj primjer. Zatim ćemo stvoriti datoteku styles.css za tablice stilova, koristit ćemo CSS3 za sjene i neke efekte za naše igre. Identifikatori i klase tada će se koristiti iz Jqueryja za izvođenje animacije i interaktivnosti igre.

 body {margin: 0px; padding: 0px; } # background {background: # 333 url (background.jpg.webp); poravnavanje teksta: središte; margin -top: -20px; padding-top: 10px; visina: 800px; prikaz: blok; } h2 {boja: #fff; } h3 {boja: #ccc; } .kontejner {padding: 4px; prikaz: inline-block; background-color: #ffffff; širina: 200px; visina: 200px; obrub: 1px crna puna; obrub: 1px čvrsti rgb (204, 204, 204); rub-radijus: 3px 3px 3px 3px; -webkit-box-shadow: 6px 5px 8px 0px rgba (50, 50, 50, 0.75); -moz-box-shadow: 6px 5px 8px 0px rgba (50, 50, 50, 0,75); okvir-sjena: 6px 5px 8px 0px rgba (50, 50, 50, 0.75) ;; } .figura {border: 2px #fff solid; pozadina: crvena; margina: 0px; padding: 0px; prikaz: inline-block; okvir-sjena: 2px 2px 2px rgb (136, 136, 136); margina: 2px; }. figure: hover {pokazivač: pokazivač; } .aktivan {background-color: # 4D90FE; } .pogreška {background-color: red; } .circle {/ * border-radius: 50px; * / širina: 100px; visina: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; obrub-radijus: 50px; }

Kad stvorimo stilove, možemo stvoriti funkcionalnost i animaciju igre. Izrađujemo datoteku game.js Pišemo sljedeći Javascript kod, ovdje moramo identificirati koje su klase i css identifikatori koji sudjeluju u igri i za što ih koristimo. Svaki od njih ima atrr atribut i klase mu se mogu dodavati pomoću addClass.

 var Tfigure = 55; // Veličina figure var StartGame = false // Pokreni igru False = Nema var NextLevel = true; // Istina nastavi igru ako je netočna igra se zaustavlja var kolona = redovi = 2 // Početna veličina žetona ili krugova na ploči 2x2 to su 4 kruga $ (document) .ready (function () {// Generiram igra prema broju stupaca i redova svake razine težine GeneraJuego (stupci, redovi);}); funkcija GameGenerate (c, r) {// Ako je NextLevel jednak false, znači da bi se igra trebala zaustaviti ako se (! NextLevel) vrati; // Zaustavljam igru NextLevel = false; // Brišemo sve elemente pozornice ili ploče za igru $ (".game") .fadeOut (1000, // na kraju metode fade // ispraznimo elemente igre na pozornici ili funkciji ploče za igru ( ) {$ (".game") .empty (); // Proširite pozornicu ili ploču za igru tako da se prilagode krugovima $ (".container") .animate ({height: ((Tfigure + 8) * r) + " px ", width: ((Tfigure + 8) * c) +" px "}, 1000, // na kraju proširenja s amimate () // Stvaram nove figure prema novoj dimenziji zaslona i funkcija razine igre () {for (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFigure ("krug", Tfigure)); $ (".game" ) .fadeIn (200); // Slučajno stvaram krugove na ploči na koje se može kliknuti, a koji nisu CreateBlueFigure ();})}); } funkcija CreateFigure (oblik oblika, r) {// Ako se klikne na bilo koji oblik, vrati $ ("") .addClass (" figure "+ typeFigure) .width (r) .height (r) .click (function () {if (StartGame) {// Provjeravam ima li ta brojka odabrani atribut, odnosno ako ima je jedan od onih koji su bili aktivni u plavoj boji ako ($ (this) .attr ("selected") == "selected") $ (this) .addClass ("active"); else $ (this) .addClass ("error" ); var TotalSelected = $ (".figure [selected = 'selected']") .length // Ako je broj klikova u aktivnim krugovima i broj klikova u neaktivnim krugovima veći od broja klikova, ne nastavljamo igru i kasnije ćemo ponovno regenerirati zaslon bez promjene razine if (($ (". active"). length + $ (". error"). length)> = TotalSelected) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa)") .addClass ("activa"); // Ako je razina neuspjeha klika 0, to znači da smo pogodili niz if ($ (". error "). length == 0) {alert (" Dobili ste niz, prijeđite na sljedeću razinu "); if (stupci == retci) stupci ++; else if (stupci> retci) retci ++; / / Maksimalna razina tako n 6 redaka po 6 stupaca if (stupci> 6) {stupaca = 6; redovi = 6; }} GeneraJuego (stupci, retci); }}}); } funkcija CreateBlueFigure () {var count = 0; var length = $ (".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 (" odabrano ", "selected"); count ++;}}} // Sakriva odabrane figure nakon što prikaže niz koji se ponavlja window.setTimeout (HideBlueFigures, 1200)} funkcija HideBlueFigures () {$ (". igra> .figure"). removeClass ("active"); GameStart = true; NextLevel = true;}

Dakle, zaključujemo igru kojoj možemo dodati rezultat, upozorenje i poruke, također zvučne ako želimo, osim mogućnosti zaustavljanja i nastavka igre, imajte na umu da se radi samo o Javascriptu, HTML -u i CSS -u, ali bilo bi lako proširiti dodavanje rezultata u bazu podataka ili ugraditi višu razinu težine.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod