Innholdsfortegnelse
Mange webutviklere bruker Jquery -biblioteket for å gjøre websidene sine mer interaktive og funksjonelle. JQuery -biblioteket tilbyr flere metoder og funksjoner, inkludert Jquery Effect, som brukes til å legge til interaktivitet og animasjon til elementene på et nettsted.Animasjonene krever ingen spesiell plugin og er kompatible med de fleste nettlesere, også CSS3 brukes til den grafiske delen.
Noen eiendommer er:
Den animerte () metodenDenne metoden gjør det mulig å bruke en css -stil på et element på en webside, for eksempel for å forstørre et lag.
Syntaksen er som følger
(velger) .animate ({style}, speed)Et enkelt eksempel på animasjonsfunksjonen som brukes til å bruke en css -stil på et element:
Animer og utvid langs animasjon og kollapsSå vi kan se hvordan vi med den animerte () metoden kan bruke css på et element og få det til å endre seg på en bestemt tid (millisekunder) for å generere den effekten vi trenger.
Vi lager spillet med Jquery and the Animate () -metoden
Vi vil lage med denne metoden et Simon Dice -spill eller minnespill som vil bestå av å vise et antall røde sirkler på skjermen, og bare noen av dem vil bli vist i en blå sekvens, må spilleren klikke for å gjenta sekvensen lykkes sekvensen skjermen vil tegnes på nytt og legge til flere sirkler og øke vanskelighetsgraden. Hvis spilleren ikke klarer sekvensen, må de gjenta dette nivået til de fullfører det riktig. En advarsel vil også fortelle deg om du har fullført nivået, og dermed vil du gå til neste nivå.
Spillet starter med 2 rader og 2 kolonner, hvorav 4 sirkler vil bli vist noen få sekunder i blått. Deretter må vi klikke på de to som var i blått. På hvert nivå vil en kolonne legges til, og på et annet nivå i en rad vil også flere aktive sirkler bli lagt til i blått for senere å prøve å huske den samme sekvensen.
Rekkefølgen spiller ingen rolle, men snarere at alle sirklene som er i blått er klikket.
Maksimal størrelse på brettet eller scenen vil være 6 kolonner med 6 rader, noe som vil gi et rutenett på 36 sirkler.
Memory GameSimon Says Game
Vi må huske sekvensen av blå sirkler og
klikk på gjenta sekvensen
Jquery -versjonen med bruk av enten 1.9 eller høyere er bra for dette eksemplet. Deretter vil vi lage styles.css -filen for stilarkene, vi vil bruke CSS3 for skyggene og noen effekter for spillene våre. Identifikatorene og klassene vil deretter bli brukt fra Jquery for å kunne utføre animasjonen og interaktiviteten til spillet.
brødtekst {margin: 0px; polstring: 0px; } #bakgrunn {bakgrunn: # 333 url (bakgrunn.jpg.webp); tekstjustering: senter; margin -top: -20px; polstringstopp: 10px; høyde: 800px; display: blokk; } h2 {color: #fff; } h3 {color: #ccc; } .container {polstring: 4px; display: inline-block; bakgrunnsfarge: #ffffff; bredde: 200px; høyde: 200px; kant: 1px svart solid; kantlinje: 1px solid rgb (204, 204, 204); border-radius: 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); boks-skygge: 6px 5px 8px 0px rgba (50, 50, 50, 0,75);; } .figur {border: 2px #fff solid; bakgrunn: rød; margin: 0px; polstring: 0px; display: inline-block; boks-skygge: 2px 2px 2px rgb (136, 136, 136); margin: 2px; }. figur: sveve {markør: peker; } .aktiv {bakgrunnsfarge: # 4D90FE; } .feil {bakgrunnsfarge: rød; } .circle {/ * border-radius: 50px; * / bredde: 100px; høyde: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; kant-radius: 50px; }Når vi har laget stilene kan vi lage funksjonaliteten og animasjonen til spillet. Vi lager en fil game.js Vi skriver følgende Javascript -kode, vi må her identifisere hvilke klasser og css -identifikatorer som deltar i spillet og hva vi bruker dem til. Hver har et atrr -attributt, og klasser kan legges til det med addClass.
var Tfigure = 55; // Figurens størrelse var StartGame = false // Start spillet False = No var NextLevel = true; // True fortsett spillet hvis det er falskt stopper spillet var columns = rows = 2 // Initial størrelse på chips eller sirkler på brettet 2x2 som er 4 sirkler $ (dokument) .ready (funksjon () {// jeg genererer spillet i henhold til antall kolonner og rader for hvert vanskelighetsgrad GeneraJuego (kolonner, rader);}); funksjon GameGenerate (c, r) {// Hvis NextLevel er lik false indikerer at spillet skal stoppe hvis (! NextLevel) returnerer; // Jeg stopper spillet NextLevel = false; // Vi sletter alle elementene i scenen eller spillebrettet $ (".game") .fadeOut (1000, // på slutten av fade -metoden // tøm elementene i spillet på scenen eller spillebrettfunksjonen ( ) {$ (".game") .empty (); // Utvid scenen eller spillebrettet for å imøtekomme kretsene $ (".container") .animate ({høyde: ((Tfigure + 8) * r) + " px ", bredde: ((Tfigure + 8) * c) +" px "}, 1000, // på slutten av utvidelsen med amimate () // Jeg lager de nye figurene i henhold til den nye dimensjonen på skjermen i spillnivåfunksjon () {for (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFigure ("sirkel", Tfigure)); $ (".game" ) .fadeIn (200); // Jeg lager tilfeldig hvilke sirkler på brettet som kan klikkes og som ikke er CreateBlueFigure ();})}); } funksjon Create Create (shapetype, r) {// Hvis du klikker på en form, returner $ ("") .addClass (" figur "+ typeFigure) .bredde (r) .høyde (r). klikk (funksjon () {hvis (StartGame) {// Jeg sjekker om tallet har det valgte attributtet, det vil si hvis det er en av dem som var aktive i blått hvis ($ (dette) .attr ("valgt") == "valgt") $ (dette) .addClass ("aktivt"); ellers $ (dette) .addClass ("feil") ); var TotalSelected = $ (".figure [selected = 'selected']") .length // Hvis antall klikk i aktive sirkler og antall klikk i ikke-aktive sirkler er større enn antall klikk, vi fortsetter ikke spillet, og vi vil regenerere skjermen igjen senere uten å endre nivået hvis (($ (". aktiv"). lengde + $ (". feil"). lengde)> = TotalSelected) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa)") .addClass ("activa"); // Hvis klikkfeilnivået er 0 betyr det at vi treffer sekvensen if ($ (". error "). length == 0) {alert (" Du har truffet sekvensen, gå til neste nivå "); hvis (kolonner == rader) kolonner ++; ellers hvis (kolonner> rader) rader ++; / / Maksimumsnivået så n 6 rader med 6 kolonner hvis (kolonner> 6) {kolonner = 6; rader = 6; }} GeneraJuego (kolonner, rader); }}}); } funksjon 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 ", "valgt"); count ++;}}} // Skjuler de valgte figurene etter å ha vist sekvensen som skal gjentas window.setTimeout (HideBlueFigures, 1200)} funksjon HideBlueFigures () {$ (".game> .figure"). removeClass ("aktiv"); GameStart = true; NextLevel = true;}Så vi avslutter spillet vi kan legge til poengsum, advarsel og meldinger, også lyd hvis vi vil, i tillegg til muligheten for å stoppe og fortsette spillet, husk at det bare er Javascript, HTML og CSS, men det ville være enkelt å utvide å legge til resultater til en databasedata eller innlemme et høyere vanskelighetsgrad.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng
