Stwórz grę pamięciową za pomocą metod HTML i JQuery Effects

Wielu twórców stron internetowych korzysta z biblioteki Jquery, aby ich strony internetowe były bardziej interaktywne i funkcjonalne. Biblioteka jQuery oferuje kilka metod i funkcji, w tym Jquery Effect, który służy do dodawania interaktywności i animacji do elementów strony internetowej.
Animacje nie wymagają żadnych specjalnych wtyczek i są kompatybilne z większością przeglądarek, również część graficzna wykorzystuje CSS3.
Niektóre właściwości to:

 Metoda animowania ()

Metoda ta pozwala na nałożenie stylu css na element strony internetowej, na przykład w celu powiększenia warstwy.
Składnia jest następująca

 (selektor) .animate ({styl}, szybkość)

Prosty przykład funkcji animate użytej do zastosowania stylu CSS do elementu:

 Animuj i rozwijaj wzdłuż animacji i zwiń

Możemy więc zobaczyć, jak za pomocą metody animate() możemy zastosować CSS do elementu i sprawić, by zmieniał się w określonym czasie (milisekundach), aby wygenerować dowolny efekt, którego potrzebujemy.
Grę tworzymy za pomocą Jquery i metody Animate()
Tą metodą stworzymy grę w stylu Simon Dice lub grę pamięciową, która będzie polegała na pokazywaniu na ekranie liczby czerwonych kółek i tylko niektóre z nich będą pokazane w niebieskiej sekwencji, gracz musi kliknąć powtarzając sekwencję, jeśli pomyślnie sekwencja ekran zostanie przerysowany, dodając więcej kółek i podnosząc poziom trudności. Jeśli gracz nie zaliczy sekwencji, musi powtórzyć ten poziom gry, dopóki nie ukończy go poprawnie. Również ostrzeżenie poinformuje Cię, czy ukończyłeś poziom, a tym samym przejdziesz do następnego poziomu.
Gra rozpocznie się od 2 rzędów i 2 kolumn, z których 4 okręgi będą przez kilka sekund wyświetlane na niebiesko. Następnie musimy kliknąć na dwa, które były na niebiesko. W ten sposób na każdym poziomie zostanie dodana kolumna, a na kolejnym poziomie wiersz, również bardziej aktywne kółka będą dodawane na niebiesko, aby później spróbować zapamiętać tę samą sekwencję.
Kolejność pojawiania się nie ma znaczenia, ale raczej klikają wszystkie kółka, które są na niebiesko.
Maksymalny rozmiar planszy lub sceny to 6 kolumn na 6 rzędów, co da siatkę 36 okręgów.

Szukamy obrazu tła do naszej gry, będzie to tło sieci lub możemy użyć płaskiego koloru. Zaczynamy od utworzenia katalogu gry i wewnątrz pliku index.html, który będzie zawierał stronę internetową, kod sieciowy będzie wyglądał następująco:

 Gra pamięciowa
Szymon mówi gra
Musimy zapamiętać sekwencję niebieskich kółek i
kliknij powtarzając sekwencję

Wersja Jquery z użyciem wersji 1.9 lub nowszej jest odpowiednia dla tego przykładu. Następnie utworzymy plik styles.css dla arkuszy stylów, użyjemy CSS3 dla cieni i niektórych efektów dla naszych gier. Identyfikatory i klasy zostaną następnie użyte z Jquery, aby móc przeprowadzić animację i interaktywność gry.

 treść {margines: 0px; dopełnienie: 0px; } #tło {tło: # 333 url (tło.jpg.webp); wyrównanie tekstu: środek; margines górny: -20px; wyściółka: 10px; wysokość: 800px; Blok wyświetlacza; } h2 {kolor: #fff; } h3 {kolor: #ccc; } .container {dopełnienie: 4px; wyświetlacz: inline-block; kolor tła: #ffffff; szerokość: 200px; wysokość: 200px; obramowanie: 1px czarne stałe; obramowanie: 1px stały rgb (204, 204, 204); obramowanie-promień: 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 {granica: 2px #fff solid; tło: czerwone; margines: 0px; dopełnienie: 0px; wyświetlacz: inline-block; box-shadow: 2px 2px 2px rgb (136, 136, 136); margines: 2px; } rysunek: najechanie {kursor: wskaźnik; } .active {kolor tła: # 4D90FE; } .error {kolor tła: czerwony; } .circle {/ * border-radius: 50px; * / szerokość: 100px; wysokość: 100px; -moz-border-radius: 50px; -webkit-obramowanie-promień: 50px; promień obramowania: 50px; }

Po stworzeniu stylów możemy stworzyć funkcjonalność i animację gry. Tworzymy plik game.js Piszemy następujący kod Javascript, musimy tutaj określić, które klasy i identyfikatory css uczestniczą w grze i do czego ich używamy. Każdy z nich ma atrybut atrr i klasy można do niego dodać za pomocą addClass.

 var Tliczba = 55; // Rozmiar figury var StartGame = false // Rozpocznij grę False = Nie var NextLevel = true; // True kontynuuj grę jeśli jest false gra zatrzymuje var column = rows = 2 // Początkowy rozmiar żetonów lub kółek na planszy 2x2 czyli 4 kółka $ (dokument) .ready (function () {// Generuję gra według ilości kolumn i rzędów na każdym poziomie trudności GeneraJuego (kolumny, rzędy);}); function GameGenerate (c, r) {// Jeśli NextLevel jest równe false wskazuje, że gra powinna się zatrzymać, jeśli (! NextLevel) return; // Zatrzymuję grę NextLevel = false; // Usuwamy wszystkie elementy sceny lub planszy $ (.game") .fadeOut (1000, // na końcu metody fade // opróżniamy elementy gry na scenie lub funkcji planszy ( ) {$ (.game") .empty (); // Rozwiń scenę lub planszę gry, aby pomieścić okręgi $ (.container") .animate ({height: ((Tfigure + 8) * r) + " px" , szerokość: ((Tfigure + 8) * c) + "px"}, 1000, // na koniec rozszerzenia z amimate () // tworzę nowe figury zgodnie z nowym wymiarem ekranu i funkcja poziomu gry () {for (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFigure ("kółko", Tfigure)); $ (.game" ) .fadeIn (200);// tworzę losowo okręgi na tablicy, które można kliknąć, a które nie są CreateBlueFigure ();})}); } function CreateFigure (typ kształtu, r) {// Kliknięcie dowolnego kształtu zwróć $ ("") .addClass (" figure "+ typeFigure) .width (r) .height (r) .click (function () {if (StartGame) {// Sprawdzam, czy ta figura ma wybrany atrybut, czyli czy jest jednym z tych, które były aktywne na niebiesko if ($ (this) .attr ("selected") == "selected") $ (this) .addClass ("active"); else $ (this) .addClass ("error" ); var TotalSelected = $ (.figure [selected = 'selected']") .length // Jeśli liczba kliknięć w aktywnych kręgach i liczba kliknięć w nieaktywnych kręgach jest większa niż liczba kliknięć wykonanych, nie kontynuujemy gry i później ponownie wygenerujemy ekran bez zmiany poziomu if (($ (". active"). length + $ (". error"). length)> = TotalSelected) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa) ") .addClass (" activa "); // Jeśli poziom błędu kliknięcia wynosi 0, oznacza to, że trafiliśmy sekwencję if ($ (". błąd "). length == 0 ) {alert ("Zdobyłeś sekwencję, przejdź do następnego poziomu"); if (kolumny == wiersze) kolumny ++; else if (kolumny> wiersze) wiersze ++; / / Maksymalny poziom tak n 6 wierszy na 6 kolumn if (kolumny> 6) {kolumny = 6; rzędy = 6; }} GeneraJuego (kolumny, wiersze); }}}); } function CreateBlueFigure () {liczba zmienna = 0; var length = $ (.game> .figure") .length for (liczba = 0; liczba <Math.ceil (długość / 3);) {var random = Math.ceil (Math.random () * długość); if (losowe .figure ") .eq (losowe) .hasClass ("aktywne")) {$ (" .game> .figure ") .eq (losowe) .addClass ("aktywne") attr ("wybrane", "selected"); count ++;}}} // Ukrywa wybrane figury po wyświetleniu sekwencji do powtórzenia window.setTimeout (HideBlueFigures, 1200)} function HideBlueFigures () {$ (.game> .figure") . removeClass ( "aktywny"); GameStart = true; NextLevel = true;}

Tak więc kończymy grę możemy dodać wynik, ostrzeżenia i komunikaty, także dźwięk jeśli chcemy, oprócz możliwości zatrzymania i kontynuowania gry należy pamiętać, że to tylko Javascript, HTML i CSS ale byłoby to łatwe do rozszerzyć dodawanie wyników do danych bazy danych lub włączyć wyższy poziom trudności.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt