Inhoudsopgave
Veel webontwikkelaars gebruiken de JQuery-bibliotheek om hun webpagina's interactiever en functioneler te maken. De jQuery-bibliotheek biedt verschillende methoden en functies, waaronder JQuery-effect, dat wordt gebruikt om interactiviteit en animatie toe te voegen aan de elementen van een website.De animaties vereisen geen speciale plug-in en zijn compatibel met de meeste browsers, ook wordt CSS3 gebruikt voor het grafische gedeelte.
Enkele eigenschappen zijn:
De animatie () methodeDeze methode maakt het mogelijk om een css-stijl toe te passen op een element van een webpagina, bijvoorbeeld om een laag te vergroten.
De syntaxis is als volgt:
(selector) .animeren ({style}, snelheid)Een eenvoudig voorbeeld van de animatiefunctie die wordt gebruikt om een css-stijl op een element toe te passen:
Animeren en uitbreiden Langs animeren en samenvouwenWe kunnen dus zien hoe we met de animate () -methode css op een element kunnen toepassen en het binnen een bepaalde tijd (milliseconden) kunnen veranderen om elk gewenst effect te genereren.
We maken het spel met JQuery en de Animate ()-methode
We zullen met deze methode een Simon Dice-stijl spel of geheugenspel maken dat zal bestaan uit het tonen van een aantal rode cirkels op het scherm en waarvan slechts enkele in een blauwe reeks worden weergegeven, de speler moet klikken om de reeks te herhalen, als hij Als de reeks slaagt, wordt het scherm opnieuw getekend door meer cirkels toe te voegen en de moeilijkheidsgraad te verhogen. Als de speler de reeks niet haalt, moeten ze dat spelniveau herhalen totdat ze het correct hebben voltooid. Ook zal een waarschuwing je vertellen of je het level hebt voltooid en dus naar het volgende level gaat.
Het spel begint met 2 rijen en 2 kolommen, waarvan 4 cirkels waarvan er 2 enkele seconden blauw worden weergegeven. Dan moeten we op de twee klikken die blauw waren. Dus in elk niveau wordt een kolom toegevoegd en in een ander niveau een rij, ook meer actieve cirkels in blauw om later dezelfde volgorde te onthouden.
De volgorde van verschijnen doet er niet toe, maar dat er op alle cirkels die in het blauw staan, wordt geklikt.
De maximale grootte van het bord of podium is 6 kolommen bij 6 rijen, wat een raster van 36 cirkels oplevert.
Geheugen spelSimon zegt spel
We moeten de reeks blauwe cirkels onthouden en
klik om de reeks te herhalen
De JQuery-versie met 1.9 of hoger is prima voor dit voorbeeld. Vervolgens maken we het bestand styles.css voor de stylesheets, gebruiken we CSS3 voor de schaduwen en enkele effecten voor onze games. De identifiers en de klassen worden vervolgens gebruikt vanuit JQuery om de animatie en interactiviteit van het spel uit te voeren.
lichaam {marge: 0px; opvulling: 0px; } #background {achtergrond: # 333 url (background.jpg.webp); tekst uitlijnen: midden; marge-top: -20px; opvulling-top: 10px; hoogte: 800px; weergave: blok; } h2 {kleur: #fff; } h3 {kleur: #ccc; } .container {opvulling: 4px; weergave: inline-blok; achtergrondkleur: #ffffff; breedte: 200px; hoogte: 200px; rand: 1px zwart effen; rand: 1px effen rgb (204, 204, 204); grensradius: 3px 3px 3px 3px; -webkit-box-schaduw: 6px 5px 8px 0px rgba (50, 50, 50, 0,75); -moz-box-schaduw: 6px 5px 8px 0px rgba (50, 50, 50, 0,75); box-schaduw: 6px 5px 8px 0px rgba (50, 50, 50, 0.75);; } .figuur {rand: 2px #fff vast; achtergrond: rood; marge: 0px; opvulling: 0px; weergave: inline-blok; box-schaduw: 2px 2px 2px rgb (136, 136, 136); marge: 2px; } figuur: zweef {cursor: aanwijzer; } .actief {achtergrondkleur: # 4D90FE; } .error {achtergrondkleur: rood; } .circle {/ * border-radius: 50px; * / breedte: 100px; hoogte: 100px; -moz-grens-radius: 50px; -webkit-grens-radius: 50px; grens-radius: 50px; }Wanneer we de stijlen hebben gemaakt, kunnen we de functionaliteit en animatie van het spel maken. We maken een bestand game.js We schrijven de volgende Javascript-code, we moeten hier identificeren welke klassen en CSS-ID's aan het spel deelnemen en waarvoor we ze gebruiken. Elk heeft een atrr-attribuut en klassen kunnen eraan worden toegevoegd met addClass.
var Tcijfer = 55; // Grootte van de figuur var StartGame = false // Start game False = Nee var NextLevel = true; // True ga verder met het spel als het onwaar is, stopt het spel var kolommen = rijen = 2 // Oorspronkelijke grootte van fiches of cirkels op het bord 2x2 dat is 4 cirkels $ (document) .ready (functie () {// Ik genereer het spel volgens het aantal kolommen en rijen van elke moeilijkheidsgraad GeneraJuego (kolommen, rijen);}); function GameGenerate (c, r) {// Als NextLevel gelijk is aan false geeft aan dat het spel moet stoppen als (! NextLevel) terugkeert; // Ik stop het spel NextLevel = false; // We verwijderen alle elementen van het podium of het spelbord $ (".game") .fadeOut (1000, // aan het einde van de fade-methode // leeg de elementen van het spel op het podium of de spelbordfunctie ( ) {$ (".game") .empty (); // Vouw het podium of het spelbord uit om plaats te bieden aan de cirkels $ (".container") .animate ({height: ((Tfigure + 8) * r) + " px" , width: ((Tfigure + 8) * c) + "px"}, 1000, // aan het einde van de uitbreiding met amimate () // Ik maak de nieuwe figuren volgens de nieuwe dimensie van het scherm i functie op spelniveau () {for (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFiguur ("cirkel", Tfiguur)); $ (".game" ) .fadeIn (200); // Ik maak willekeurig de cirkels op het bord waarop kan worden geklikt en die niet CreateBlueFigure ();})}); } function CreateFiguur (vormtype, r) {// Als op een vorm wordt geklikt, retourneer $ ("") .addClass (" figuur "+ typeFiguur) .width (r) .height (r) .click (function () {if (StartGame) {// Ik controleer of dat cijfer het geselecteerde attribuut heeft, dat wil zeggen, of het is een van die waren actief in blauw if ($ (this) .attr ("selected") == "selected") $ (this) .addClass ("active"); else $ (this) .addClass ("error" ); var TotalSelected = $ (".figure [selected = 'selected']") .length // Als het aantal klikken in actieve kringen en het aantal klikken in niet-actieve kringen groter is dan het aantal gemaakte klikken, we gaan niet verder met het spel en we zullen het scherm later opnieuw genereren zonder het niveau te wijzigen if (($ (". actief"). lengte + $ (". fout"). lengte)> = TotaalGeselecteerd) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa) ") .addClass (" activa "); // Als het klikfoutniveau 0 is, betekent dit dat we de reeks if ($ (". error "). length == 0 ) {alert ("Je hebt de reeks geraakt, ga naar het volgende niveau"); if (kolommen == rijen) kolommen ++; else if (kolommen> rijen) rijen ++; / / Het maximale niveau dus n 6 rijen bij 6 kolommen if (kolommen> 6) {kolommen = 6; rijen = 6; }} GeneraJuego (kolommen, rijen); }}}); } functie CreateBlueFiguur () {var count = 0; var length = $ (".game> .figure") .length for (count = 0; count <Math.ceil (length / 3);) {var random = Math.ceil (Math.random () * lengte); if (willekeurig .figuur") .eq (willekeurig) .hasClass ("actief")) {$ (" .game> .figuur") .eq (willekeurig) .addClass ("actief") attr ("geselecteerd", "selected"); count ++;}}} // Verbergt de geselecteerde figuren na het tonen van de te herhalen reeks window.setTimeout (HideBlueFigures, 1200)} functie HideBlueFigures () {$ (".game> .figure") . removeClass ("actief"); GameStart = true; NextLevel = true;}Dus we besluiten het spel, we kunnen score, waarschuwing en berichten toevoegen, ook geluid als we willen, naast de mogelijkheid om het spel te stoppen en voort te zetten, houd er rekening mee dat het alleen Javascript, HTML en CSS is, maar het zou gemakkelijk zijn om breid het toevoegen van resultaten aan een databasegegevens uit of neem een hogere moeilijkheidsgraad op.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven
