Skapa ett minnesspel med HTML- och JQuery Effects -metoder

Många webbutvecklare använder Jquery -biblioteket för att göra sina webbsidor mer interaktiva och funktionella. JQuery -biblioteket erbjuder flera metoder och funktioner, inklusive Jquery Effect, som används för att lägga till interaktivitet och animering till elementen på en webbplats.
Animationerna kräver ingen speciell plugin och är kompatibla med de flesta webbläsare, även CSS3 används för den grafiska delen.
Några egenskaper är:

 Den animerade () metoden

Denna metod gör det möjligt att tillämpa en css -stil på ett element på en webbsida, till exempel för att förstora ett lager.
Syntaxen är följande

 (väljare) .animate ({style}, speed)

Ett enkelt exempel på den animerade funktionen som används för att tillämpa en css -stil på ett element:

 Animera och expandera längs Animera och kollapsa

Så vi kan se hur vi med animate () -metoden kan tillämpa css på ett element och få det att förändras under en viss tid (millisekunder) för att generera den effekt vi behöver.
Vi skapar spelet med Jquery and the Animate () -metoden
Vi skapar med denna metod ett spel i Simon Dice -stil eller ett minnesspel som består av att visa ett antal röda cirklar på skärmen och bara några av dem kommer att visas i en blå sekvens, spelaren måste klicka på att upprepa sekvensen, om han lyckas sekvensen skärmen ritas om och lägger till fler cirklar och höjer svårighetsgraden. Om spelaren misslyckas med sekvensen måste de upprepa den spelnivån tills de har slutfört den korrekt. En varning kommer också att berätta om du har slutfört nivån och därmed kommer du till nästa nivå.
Spelet startar med 2 rader och 2 kolumner, varav 4 cirklar varav 2 av dem visas i några sekunder i blått. Sedan måste vi klicka på de två som var i blått. Således kommer varje kolumn att läggas till och i en annan nivå i en rad kommer även fler aktiva cirklar att läggas till i blått för att senare försöka komma ihåg samma sekvens.
Utseendets ordning spelar ingen roll, utan snarare att alla cirklar som är i blått klickas.
Den maximala storleken på tavlan eller scenen kommer att vara 6 kolumner med 6 rader, vilket ger ett rutnät med 36 cirklar.

Vi letar efter en bakgrundsbild för vårt spel, det kommer att vara bakgrunden på webben eller så kan vi använda en platt färg. Vi börjar med att skapa en spelkatalog och inuti en index.html -fil som innehåller webbsidan kommer webbkoden att vara följande:

 Minnes spel
Simon säger spelet
Vi måste komma ihåg sekvensen av blå cirklar och
klicka på repetera sekvensen

Jquery -versionen med antingen 1.9 eller högre är bra för det här exemplet. Sedan kommer vi att skapa styles.css -filen för formatmallarna, vi kommer att använda CSS3 för skuggorna och några effekter för våra spel. Identifierarna och klasserna kommer sedan att användas från Jquery för att kunna utföra animationen och interaktiviteten i spelet.

 body {marginal: 0px; vaddering: 0px; } #bakgrund {bakgrund: # 333 url (bakgrund.jpg.webp); text-align: center; marginal -topp: -20px; vadderingstopp: 10px; höjd: 800px; display: block; } h2 {color: #fff; } h3 {color: #ccc; } .container {vaddering: 4px; display: inline-block; bakgrundsfärg: #ffffff; bredd: 200px; höjd: 200px; kant: 1px svart solid; kant: 1px fast rgb (204, 204, 204); gränsradie: 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; bakgrund: röd; marginal: 0px; vaddering: 0px; display: inline-block; box-shadow: 2px 2px 2px rgb (136, 136, 136); marginal: 2px; }. figur: sväva {markör: pekare; } .aktiv {bakgrundsfärg: # 4D90FE; } .error {bakgrundsfärg: röd; } .cirkel {/ * gränsradie: 50px; * / bredd: 100px; höjd: 100px; -moz-border-radie: 50px; -webkit-gräns-radie: 50px; gränsradie: 50px; }

När vi har skapat stilarna kan vi skapa spelets funktionalitet och animering. Vi skapar en fil game.js Vi skriver följande Javascript -kod, vi måste här identifiera vilka klasser och css -identifierare som deltar i spelet och vad vi använder dem till. Var och en har ett atrr -attribut och klasser kan läggas till det med addClass.

 var Tfigure = 55; // Figurens storlek var StartGame = false // Starta spelet False = No var NextLevel = true; // True fortsätt spelet om det är falskt stoppar spelet var kolumner = rader = 2 // Initial storlek på marker eller cirklar på brädet 2x2 som är 4 cirklar $ (dokument) .ready (funktion () {// jag genererar spelet enligt antalet kolumner och rader för varje svårighetsgrad GeneraJuego (kolumner, rader);}); funktion GameGenerate (c, r) {// Om NextLevel är lika med false indikerar att spelet ska sluta om (! NextLevel) returnerar; // Jag stoppar spelet NextLevel = false; // Vi tar bort alla element i scenen eller spelbrädet $ (".game") .fadeOut (1000, // i slutet av fade -metoden // tömmer spelets element på scenen eller spelbrädets funktion ( ) {$ (".game") .empty (); // Expandera scenen eller spelplanen för att rymma cirklarna $ (".container") .animate ({height: ((Tfigure + 8) * r) + " px ", bredd: ((Tfigure + 8) * c) +" px "}, 1000, // i slutet av expansionen med amimate () // Jag skapar de nya figurerna enligt den nya dimensionen på skärmen i spelnivåfunktion () {för (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFigure ("cirkel", Tfigure)); $ (".game" ) .fadeIn (200); // Jag skapar slumpmässigt vilka cirklar på tavlan som kan klickas och som inte är CreateBlueFigure ();})}); } funktionen CreateFigure (shapetype, r) {// Om någon form klickas returnerar du $ ("") .addClass (" figur "+ typeFigure) .bredd (r) .höjd (r) .klicka (funktion () {if (StartGame) {// Jag kontrollerar om den siffran har det valda attributet, det vill säga om det är en av dem som var aktiva i blått om ($ (detta) .attr ("valt") == "valt") $ (detta) .addClass ("aktivt"); annars $ (detta) .addClass ("fel" ); var TotalSelected = $ (".figure [selected = 'selected']") .length // Om antalet klick i aktiva cirklar och antalet klick i icke-aktiva cirklar är större än antalet klick, vi fortsätter inte spelet och vi kommer att återskapa skärmen igen senare utan att ändra nivån om (($ (". aktiv"). längd + $ (". fel"). längd)> = TotalSelected) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa)") .addClass ("activa"); // Om klickfelnivån är 0 betyder det att vi träffar sekvensen if ($ (". fel "). length == 0) {alert (" Du har träffat sekvensen, gå till nästa nivå "); if (kolumner == rader) kolumner ++; annars om (kolumner> rader) rader ++; / / Maxnivån så n 6 rader med 6 kolumner om (kolumner> 6) {kolumner = 6; rader = 6; }} GeneraJuego (kolumner, rader); }}}); } 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 ", "vald"); count ++;}}} // Döljer de markerade siffrorna efter att ha visat sekvensen som ska upprepas window.setTimeout (HideBlueFigures, 1200)} funktion HideBlueFigures () {$ (".game> .figure"). removeClass ("aktiv"); GameStart = true; NextLevel = true;}

Så vi avslutar spelet vi kan lägga till poäng, varning och meddelanden, även ljud om vi vill, förutom möjligheten att stoppa och fortsätta spelet, tänk på att det bara är Javascript, HTML och CSS men det skulle vara lätt att utöka lägga till resultat till en databasdata eller införliva en högre svårighetsgrad.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng