Cuprins
Mulți dezvoltatori web folosesc biblioteca Jquery pentru a-și face paginile web mai interactive și funcționale. Biblioteca jQuery oferă mai multe metode și funcții, inclusiv Jquery Effect, care este utilizat pentru a adăuga interactivitate și animație elementelor unui site web.Animațiile nu necesită niciun plugin special și sunt compatibile cu majoritatea browserelor, de asemenea, CSS3 este utilizat pentru partea grafică.
Unele proprietăți sunt:
Metoda animate ()Această metodă permite aplicarea unui stil CSS unui element al unei pagini web, de exemplu pentru a mări un strat.
Sintaxa este următoarea
(selector) .animate ({stil}, viteză)Un exemplu simplu al funcției de animare folosită pentru a aplica un stil css unui element:
Animați și extindeți de-a lungul Animați și prăbușițiDeci, putem vedea cum cu metoda animate () putem aplica css unui element și îl putem schimba într-un anumit timp (milisecunde) pentru a genera orice efect de care avem nevoie.
Creăm jocul cu Jquery și metoda Animate ()
Vom crea cu această metodă un joc în stil Simon Dice sau un joc de memorie care va consta în afișarea unui număr de cercuri roșii pe ecran și doar unele dintre ele vor fi afișate într-o secvență albastră, jucătorul trebuie să facă clic pe repetarea secvenței, dacă reușește secvența, ecranul va fi redesenat adăugând mai multe cercuri și crescând nivelul de dificultate. Dacă jucătorul eșuează în secvență, trebuie să repete acel nivel de joc până când îl finalizează corect. De asemenea, un avertisment vă va spune dacă ați finalizat nivelul și astfel veți trece la nivelul următor.
Jocul va începe cu 2 rânduri și 2 coloane, dintre care 4 cercuri vor fi afișate timp de câteva secunde în albastru. Apoi trebuie să facem clic pe cele două care erau în albastru. Astfel, la fiecare nivel va fi adăugată o coloană și la un alt nivel un rând, de asemenea, vor fi adăugate cercuri mai active în albastru pentru a încerca ulterior să-și amintească aceeași secvență.
Ordinea de apariție nu contează, ci mai degrabă faptul că toate cercurile care sunt în albastru sunt făcute clic.
Dimensiunea maximă a planșei sau scenei va fi de 6 coloane pe 6 rânduri, ceea ce va da o grilă de 36 de cercuri.
Joc de memorieSimon Says Game
Trebuie să ne amintim succesiunea cercurilor albastre și
faceți clic pe repetarea secvenței
Versiunea Jquery cu utilizarea 1.9 sau mai mare este bună pentru acest exemplu. Apoi vom crea fișierul styles.css pentru foile de stil, vom folosi CSS3 pentru umbre și câteva efecte pentru jocurile noastre. Identificatorii și clasele vor fi apoi utilizate de la Jquery pentru a putea realiza animația și interactivitatea jocului.
corp {margin: 0px; umplutură: 0 px; } #background {background: # 333 url (background.jpg.webp); text-align: centru; margin-top: -20px; căptușeală: 10 px; înălțime: 800px; display: bloc; } h2 {color: #fff; } h3 {color: #ccc; } .container {padding: 4px; afișaj: bloc în linie; culoare de fundal: #ffffff; lățime: 200px; înălțime: 200px; chenar: 1px solid negru; chenar: 1px solid rgb (204, 204, 204); raza chenarului: 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); box-shadow: 6px 5px 8px 0px rgba (50, 50, 50, 0.75);; } .figure {border: 2px #fff solid; fundal: roșu; marja: 0px; umplutură: 0 px; afișaj: bloc în linie; box-shadow: 2px 2px 2px rgb (136, 136, 136); marja: 2px; figura: hover {cursor: pointer; } .active {background-color: # 4D90FE; } .error {fundal-culoare: roșu; } .circle {/ * border-radius: 50px; * / lățime: 100px; înălțime: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; raza frontierei: 50px; }Când am creat stilurile, putem crea funcționalitatea și animația jocului. Creăm un fișier game.js Scriem următorul cod Javascript, trebuie să identificăm aici care sunt clasele și identificatorii CSS care participă la joc și pentru ce le folosim. Fiecare are un atribut atrr și se pot adăuga clase cu addClass.
var Tfigure = 55; // Dimensiunea figurii var StartGame = false // Start game False = No var NextLevel = true; // Adevărat continuați jocul dacă este fals jocul oprește var coloane = rânduri = 2 // Dimensiunea inițială a jetoanelor sau cercurilor de pe tablă 2x2 adică 4 cercuri $ (document). Ready (funcție () {// Generez jocul în funcție de numărul de coloane și rânduri ale fiecărui nivel de dificultate GeneraJuego (coloane, rânduri);}); funcția GameGenerate (c, r) {// Dacă NextLevel este egal cu false indică faptul că jocul ar trebui să se oprească dacă (! NextLevel) revine; // Opresc jocul NextLevel = false; // Ștergem toate elementele scenei sau ale tabloului de joc $ (".game") .fadeOut (1000, // la sfârșitul metodei de estompare // golim elementele jocului pe scenă sau pe funcția de tablă de joc ( ) {$ (".game") .empty (); // Extindeți scena sau tabla de joc pentru a găzdui cercurile $ (".container") .animate ({height: ((Tfigure + 8) * r) + " px ", lățime: ((Tfigura + 8) * c) +" px "}, 1000, // la sfârșitul expansiunii cu amimate () // Creez noile figuri în funcție de noua dimensiune a ecranului i funcție la nivel de joc () {pentru (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFigure ("cerc", Tfigure)); $ (".game" ) .fadeIn (200); // Creez aleatoriu care sunt cercurile de pe tablă pe care se poate face clic și care nu sunt CreateBlueFigure ();})}); } funcție CreateFigure (shapetype, r) {// Dacă se face clic pe orice formă, returnează $ ("") .addClass (" figure "+ typeFigure) .width (r) .height (r) .click (function () {if (StartGame) {// Verific dacă figura respectivă are atributul selectat, adică dacă este una dintre cele active în albastru dacă ($ (this) .attr ("selected") == "selected") $ (this) .addClass ("active"); else $ (this) .addClass ("error" ); var TotalSelected = $ (".figure [selected = 'selected']") .length // Dacă numărul de clicuri din cercurile active și numărul de clicuri din cercurile inactive este mai mare decât numărul de clicuri efectuate, nu continuăm jocul și vom regenera ecranul din nou mai târziu fără a schimba nivelul if (($ (". active"). length + $ (". error"). length)> = TotalSelected) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa)") .addClass ("activă"); // Dacă nivelul de eșec al clicului este 0 înseamnă că am lovit secvența if ($ (". eroare "). lungime == 0) {alertă (" Ați lovit secvența, treceți la nivelul următor "); if (coloane == rânduri) coloane ++; altfel dacă (coloane> rânduri) rânduri ++; / / Nivelul maxim deci n 6 rânduri cu 6 coloane dacă (coloane> 6) {coloane = 6; rânduri = 6; }} GeneraJuego (coloane, rânduri); }}}); } funcție 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 (" selected ", „selectat”); conta ++;}}} // Ascunde cifrele selectate după afișarea secvenței de repetat window.setTimeout (HideBlueFigures, 1200)} funcția HideBlueFigures () {$ (".game> .figure"). removeClass ("activ"); GameStart = true; NextLevel = true;}Deci, încheiem jocul, putem adăuga scor, avertisment și mesaje, de asemenea, sunet dacă dorim, pe lângă posibilitatea de a opri și de a continua jocul, rețineți că este doar Javascript, HTML și CSS, dar ar fi ușor să extindeți adăugarea rezultatelor la o bază de date sau încorporați un nivel mai ridicat de dificultate.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv
