Opret et hukommelsesspil med HTML- og JQuery Effects -metoder

Mange webudviklere bruger Jquery -biblioteket til at gøre deres websider mere interaktive og funktionelle. JQuery -biblioteket tilbyder flere metoder og funktioner, herunder Jquery Effect, som bruges til at tilføje interaktivitet og animation til elementerne på et websted.
Animationerne kræver ikke noget specielt plugin og er kompatible med de fleste browsere, også CSS3 bruges til den grafiske del.
Nogle ejendomme er:

 Den animerede () metode

Denne metode gør det muligt at anvende en css -stil på et element på en webside, for eksempel for at forstørre et lag.
Syntaksen er som følger

 (vælger) .animate ({style}, hastighed)

Et enkelt eksempel på den animerede funktion, der bruges til at anvende en css -stil på et element:

 Animer og udvid langs animation og skjul

Så vi kan se, hvordan vi med den animerede () metode kan anvende css på et element og få det til at ændre sig på et bestemt tidspunkt (millisekunder) for at generere enhver effekt, vi har brug for.
Vi skaber spillet med Jquery and the Animate () -metoden
Vi vil med denne metode oprette et Simon Dice -spil eller et hukommelsesspil, der består af at vise et antal røde cirkler på skærmen, og kun nogle af dem vil blive vist i en blå sekvens, spilleren skal klikke gentage sekvensen, hvis han lykkes sekvensen skærmen tegnes igen og tilføjer flere cirkler og øger sværhedsgraden. Hvis spilleren fejler sekvensen, skal de gentage dette niveau, indtil de fuldender det korrekt. En advarsel vil også fortælle dig, om du har gennemført niveauet, og dermed vil du gå til det næste niveau.
Spillet starter med 2 rækker og 2 kolonner, hvoraf 4 cirkler vil blive vist i nogle få sekunder i blå med et par cirkler. Derefter skal vi klikke på de to, der var i blå. Således vil der i hvert niveau blive tilføjet en kolonne, og i et andet niveau i en række vil der også blive tilføjet flere aktive cirkler i blåt for senere at prøve at huske den samme sekvens.
Udseendelsesrækkefølgen betyder ikke noget, men derimod at der klikkes på alle de cirkler, der er i blå.
Den maksimale størrelse på tavlen eller scenen vil være 6 kolonner ved 6 rækker, hvilket giver et gitter på 36 cirkler.

Vi leder efter et baggrundsbillede til vores spil, det vil være baggrunden på nettet, eller vi kan bruge en flad farve. Vi starter med at oprette et spilkatalog og inde i en index.html -fil, der vil indeholde websiden, vil webkoden være følgende:

 Hukommelsesspil
Simon siger spil
Vi skal huske sekvensen af ​​blå cirkler og
klik på gentag sekvensen

Jquery -versionen med enten 1.9 eller højere er fin til dette eksempel. Derefter vil vi oprette styles.css -filen til typografiarkene, vi vil bruge CSS3 til skyggerne og nogle effekter til vores spil. Identifikatorerne og klasserne vil derefter blive brugt fra Jquery til at kunne udføre animationen og interaktiviteten i spillet.

 brødtekst {margen: 0px; polstring: 0px; } #baggrund {baggrund: # 333 url (baggrund.jpg.webp); tekstjustering: center; margin -top: -20px; polstringstop: 10px; højde: 800px; display: blok; } h2 {farve: #fff; } h3 {farve: #ccc; } .container {polstring: 4px; display: inline-blok; baggrundsfarve: #ffffff; bredde: 200px; højde: 200px; kant: 1px sort solid; kant: 1px solid rgb (204, 204, 204); grænse-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); box-shadow: 6px 5px 8px 0px rgba (50, 50, 50, 0,75);; } .figure {border: 2px #fff solid; baggrund: rød; margen: 0px; polstring: 0px; display: inline-blok; box-shadow: 2px 2px 2px rgb (136, 136, 136); margen: 2px; }. figur: svæver {cursor: pointer; } .aktiv {baggrundsfarve: # 4D90FE; } .fejl {baggrundsfarve: rød; } .cirkel {/ * grænse-radius: 50px; * / bredde: 100px; højde: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; grænse-radius: 50px; }

Når vi har oprettet stilarterne, kan vi oprette funktionaliteten og animationen af ​​spillet. Vi opretter en fil game.js Vi skriver følgende Javascript -kode, vi skal her identificere, hvilke klasser og css -id'er, der deltager i spillet, og hvad vi bruger dem til. Hver enkelt har en atrr -attribut, og klasser kan tilføjes til den med addClass.

 var Tfigure = 55; // Figurens størrelse var StartGame = false // Start spillet Falsk = Ingen var NextLevel = true; // Sandt fortsæt spillet, hvis det er falsk, stopper spillet var columns = rows = 2 // Initial størrelse på chips eller cirkler på brættet 2x2, der er 4 cirkler $ (dokument) .ready (funktion () {// jeg genererer spillet i henhold til antallet af kolonner og rækker i hvert sværhedsgrad GeneraJuego (kolonner, rækker);}); funktion GameGenerate (c, r) {// Hvis NextLevel er lig med false angiver, at spillet skal stoppe, hvis (! NextLevel) vender tilbage; // Jeg stopper spillet NextLevel = false; // Vi sletter alle elementerne i scenen eller spillebrættet $ (".game") .fadeOut (1000, // ved afslutningen af ​​fade -metoden // tømmer spillets elementer på scenen eller spillebrættets funktion ( ) {$ (".game") .empty (); // Udvid scenen eller spillepladen for at rumme cirklerne $ (".container") .animate ({height: ((Tfigure + 8) * r) + " px ", bredde: ((Tfigure + 8) * c) +" px "}, 1000, // i slutningen af ​​udvidelsen med amimate () // Jeg opretter de nye tal i henhold til den nye dimension af skærmen i game level function () {for (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFigure ("cirkel", Tfigure)); $ (".game" ) .fadeIn (200); // Jeg opretter tilfældigt hvilke cirkler på tavlen, der kan klikkes på, og som ikke er CreateBlueFigure ();})}); } funktion CreateFigure (shapetype, r) {// Hvis der klikkes på en hvilken som helst form, returneres $ ("") .addClass (" figur "+ typeFigure) .bredde (r) .højde (r). klik (funktion () {hvis (StartGame) {// Jeg kontrollerer, om denne figur har den valgte attribut, det vil sige, hvis den er en af ​​dem, der var aktive i blåt, hvis ($ (dette) .attr ("valgt") == "valgt") $ (dette) .addClass ("aktivt"); ellers $ (dette) .addClass ("fejl" ); var TotalSelected = $ (".figure [selected = 'selected']") .length // Hvis antallet af klik i aktive cirkler og antallet af klik i ikke-aktive cirkler er større end antallet af klik, vi fortsætter ikke spillet, og vi genopretter skærmen igen senere uden at ændre niveauet hvis (($ (". aktiv"). længde + $ (". fejl"). længde)> = TotalSelected) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa)") .addClass ("activa"); // Hvis klikfejlsniveauet er 0 betyder det, at vi rammer sekvensen if ($ (". fejl "). length == 0) {alert (" Du har ramt sekvensen, gå til næste niveau "); hvis (kolonner == rækker) kolonner ++; ellers hvis (kolonner> rækker) rækker ++; / / Det maksimale niveau så n 6 rækker med 6 kolonner hvis (kolonner> 6) {kolonner = 6; rækker = 6; }} GeneraJuego (kolonner, rækker); }}}); } funktion 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 tal efter at have vist sekvensen, der skal gentages window.setTimeout (HideBlueFigures, 1200)} funktion HideBlueFigures () {$ (".game> .figure"). removeClass ("aktiv"); GameStart = true; NextLevel = true;}

Så vi afslutter spillet, vi kan tilføje score, advarsel og meddelelser, også lyde, hvis vi ønsker, ud over muligheden for at stoppe og fortsætte spillet, skal du huske på, at det kun er Javascript, HTML og CSS, men det ville være let at udvide tilføjelse af resultater til en databasedata eller indarbejde et højere vanskelighedsniveau.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt