Obsah
Mnoho webových vývojářů používá knihovnu Jquery, aby byly jejich webové stránky interaktivnější a funkčnější. Knihovna jQuery nabízí několik metod a funkcí, včetně Jquery Effect, který slouží k přidání interaktivity a animace do prvků webové stránky.Animace nevyžadují žádný speciální plugin a jsou kompatibilní s většinou prohlížečů, pro grafickou část je také použit CSS3.
Některé vlastnosti jsou:
Metoda animate ()Tato metoda umožňuje použít styl css na prvek webové stránky, například pro zvětšení vrstvy.
Syntaxe je následující
(selector) .animate ({style}, rychlost)Jednoduchý příklad animované funkce použité k použití stylu css na prvek:
Animujte a rozbalte podél animace a sbalteMůžeme tedy vidět, jak pomocí metody animate () můžeme na prvek použít css a nechat jej v určitém čase (milisekundách) změnit, aby generoval jakýkoli potřebný efekt.
Hru vytváříme pomocí Jquery a metody Animate ()
Vytvoříme touto metodou hru ve stylu Simon Dice nebo paměťovou hru, která bude spočívat v zobrazení několika červených kruhů na obrazovce a pouze některé z nich se zobrazí v modré sekvenci, hráč musí kliknout na opakující se sekvenci, pokud uspěje v pořadí, obrazovka se překreslí přidáním dalších kruhů a zvýšením úrovně obtížnosti. Pokud hráč sekvenci selže, musí tuto úroveň hry opakovat, dokud ji nedokončí správně. Varování vám také řekne, zda jste dokončili úroveň, a tím přejdete na další úroveň.
Hra začíná 2 řadami a 2 sloupci, z nichž 4 kruhy, z nichž 2 se na několik sekund zobrazí modře. Poté musíme kliknout na ty dva, které byly modré. V každé úrovni tedy bude přidán sloupec a v jiné úrovni řádek, také více aktivních kruhů bude přidáno modře, aby se později pokusily zapamatovat si stejnou sekvenci.
Nezáleží na pořadí vzhledu, ale spíše na kliknutí na všechny kruhy, které jsou modré.
Maximální velikost desky nebo pódia bude 6 sloupců po 6 řadách, což poskytne mřížku 36 kruhů.
Paměťová hraSimon říká hra
Musíme si pamatovat posloupnost modrých kruhů a
kliknutím opakujte sekvenci
Verze Jquery s použitím 1.9 nebo vyšší je v tomto případě v pořádku. Poté vytvoříme soubor styles.css pro šablony stylů, pro stíny použijeme CSS3 a pro naše hry některé efekty. Identifikátory a třídy budou poté použity z Jquery, aby bylo možné provádět animaci a interaktivitu hry.
tělo {margin: 0px; čalounění: 0px; } #background {background: # 333 url (background.jpg.webp); zarovnání textu: střed; margin -top: -20px; padding-top: 10px; výška: 800px; displej: blok; } h2 {barva: #fff; } h3 {barva: #ccc; } .container {padding: 4px; zobrazení: inline-block; barva pozadí: #ffffff; šířka: 200px; výška: 200px; ohraničení: 1px černá plná; ohraničení: 1px pevný rgb (204, 204, 204); poloměr ohraničení: 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; pozadí: červená; okraj: 0px; čalounění: 0px; zobrazení: inline-block; box-shadow: 2px 2px 2px rgb (136, 136, 136); okraj: 2px; }. figure: hover {cursor: pointer; } .aktivní {barva pozadí: # 4D90FE; } .error {barva pozadí: červená; }. kruh {/ * poloměr ohraničení: 50 pixelů; * / šířka: 100px; výška: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; poloměr ohraničení: 50px; }Když jsme vytvořili styly, můžeme vytvořit funkčnost a animaci hry. Vytvoříme soubor game.js Píšeme následující kód Javascriptu, musíme zde identifikovat, které třídy a identifikátory CSS se hry účastní a k čemu je používáme. Každý z nich má atribut atrr a třídy lze do něj přidat pomocí addClass.
var Tfigure = 55; // Velikost obrázku var StartGame = false // Spustit hru False = Žádný var NextLevel = true; // Pravda, pokračujte ve hře, pokud je nepravda, hra zastaví var sloupce = řádky = 2 // Počáteční velikost žetonů nebo kruhů na hrací ploše 2x2, což jsou 4 kruhy $ (dokument) .ready (funkce () {// generuji hra podle počtu sloupců a řádků každé úrovně obtížnosti GeneraJuego (sloupce, řádky);}); funkce GameGenerate (c, r) {// Pokud se NextLevel rovná false, znamená to, že hra by se měla zastavit, pokud se (! NextLevel) vrátí; // Zastavím hru NextLevel = false; // Smažeme všechny prvky pódia nebo herního plánu $ („.game“) .fadeOut (1000, // na konci metody fade // vyprázdnění prvků hry na jevišti nebo funkci herního plánu ( ) {$ (".game") .empty (); // Rozbalte scénu nebo herní plán tak, aby vyhovoval kruhům $ (".container") .animate ({height: ((Tfigure + 8) * r) + " px ", width: ((Tfigure + 8) * c) +" px "}, 1000, // na konci expanze pomocí amimate () // Nové figury vytvářím podle nové dimenze obrazovky i funkce na úrovni hry () {for (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFigure ("circle", Tfigure)); $ (".game" ) .fadeIn (200); // Náhodně vytvářím kruhy na desce, na které lze kliknout a které nejsou CreateBlueFigure ();})}); } funkce CreateFigure (shapeetype, r) {// Pokud kliknete na jakýkoli tvar, vraťte $ ("") .addClass (" figura "+ typeFigure) .width (r) .height (r) .click (function () {if (StartGame) {// Zkontroluji, zda tento obrázek má vybraný atribut, tj. je jedním z těch, které byly aktivní modře, pokud ($ (this) .attr ("selected") == "selected") $ (this) .addClass ("active"); else $ (this) .addClass ("error" ); var TotalSelected = $ (".figure [selected = 'selected']") .length // Pokud je počet kliknutí v aktivních kruzích a počet kliknutí v neaktivních kruzích větší než počet provedených kliknutí, nepokračujeme ve hře a obrazovku znovu regenerujeme později beze změny úrovně if (($ (". active"). length + $ (". error"). length)> = TotalSelected) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa)") .addClass ("activa"); // Pokud je úroveň selhání kliknutí 0, znamená to, že jsme zadali sekvenci if ($ (". chyba "). délka == 0) {upozornění (" Dosáhli jste pořadí, přejděte na další úroveň "); pokud (sloupce == řádky) sloupce ++; jinak pokud (sloupce> řádky) řádky ++; / / Maximální úroveň tak n 6 řádků po 6 sloupcích, pokud (sloupce> 6) {sloupců = 6; řádky = 6; }} GeneraJuego (sloupce, řádky); }}}); } funkce 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 ", "selected"); count ++;}}} // Skrývá vybrané obrázky po ukázání sekvence, která se má opakovat window.setTimeout (HideBlueFigures, 1200)} funkce HideBlueFigures () {$ (".game> .figure"). removeClass ("active"); GameStart = true; NextLevel = true;}Takže jsme uzavřeli hru, kterou můžeme přidat skóre, varování a zprávy, také zvuk, pokud chceme, kromě možnosti zastavit a pokračovat ve hře, mějte na paměti, že je to jen Javascript, HTML a CSS, ale bylo by snadné rozšířit přidávání výsledků do dat databáze nebo začlenit vyšší úroveň obtížnosti.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
