Dodaj grę Koncentracja do strony internetowej za pomocą JavaScript

Wprowadzenie

Pamiętam, jak pierwszy raz spotkałem się z grą Koncentracja․ Byłem wtedy dzieckiem i uwielbiałem spędzać czas na dopasowywaniu par obrazków․ Teraz, jako programista, postanowiłem stworzyć własną wersję tej gry w JavaScript․ Zależało mi na tym, aby była ona prosta w obsłudze i przyjemna dla użytkownika․ W tym artykule przedstawię krok po kroku, jak stworzyć grę Koncentracja, którą można dodać do dowolnej strony internetowej․

Przygotowanie projektu

Następnie stworzyłem folder images, w którym umieściłem wszystkie obrazy, które miały być użyte w grze․ W przypadku mojej gry, potrzebowałem jednego obrazu dla tylnej strony kart i 15 obrazków dla przedniej strony․ Upewniłem się, że wszystkie obrazy są w tym samym rozmiarze, aby zapewnić spójność wizualną na planszy․

Po zakończeniu tych kroków, miałem już podstawową strukturę projektu, która była gotowa do implementacji logiki gry․

Tworzenie planszy gry

Wewnątrz kontenera planszy, stworzyłem kolejne elementy <div>, które reprezentowały poszczególne karty․ Każda karta miała swój unikalny identyfikator, który później wykorzystałem w kodzie JavaScript․ W pliku style․css dodałem style do tych kart, aby nadać im odpowiedni rozmiar, kształt, kolor tła i umiejscowienie na planszy․

Po zakończeniu tych kroków, miałem już gotową planszę gry z kartami, które były gotowe do interakcji z użytkownikiem․

Tworzenie kart

Aby ukryć obrazki do momentu odkrycia karty, użyłem atrybutu CSS display⁚ none․ W kodzie JavaScript, dodałem funkcję, która zmieniała atrybut display na block, gdy użytkownik kliknął na kartę․ W ten sposób, obrazek stawał się widoczny po odkryciu karty․

Po zakończeniu tych kroków, miałem już gotowe karty, które były wizualnie atrakcyjne i gotowe do interakcji z użytkownikiem․

Logika gry

Logika gry Koncentracja jest stosunkowo prosta, ale wymagała odrobiny pracy z kodowaniem․ Najpierw stworzyłem tablicę z obrazkami, które miały być użyte w grze․ Każdy obrazek pojawiał się w tablicy dwa razy, tworząc pary․ Następnie, użyłem funkcji JavaScript shuffle, aby losowo zmieszać kolejność obrazków w tablicy․

W kodzie JavaScript, dodałem funkcję, która obsługiwała kliknięcia na karty․ Po kliknięciu na kartę, funkcja wyświetlała obrazek na niej․ Jeśli użytkownik kliknął na dwie karty z tym samym obrazkiem, karty pozostawały odkryte, a gracz zdobywał punkt․ Jeśli obrazki na kartach nie pasowały, karty po krótkiej chwili chowały się ponownie․

Dodatkowo, w kodzie JavaScript, stworzyłem licznik punktów, który wyświetlał aktualny wynik gracza․ Po zakończeniu gry, czyli po odkryciu wszystkich par, wyświetliłem komunikat z gratulacjami i ostatecznym wynikiem․

Po zakończeniu tych kroków, miałem już gotową grę Koncentracja z działającą logiką, która była gotowa do testowania․

Funkcja mieszania kart

Funkcja mieszania kart była kluczowa dla zapewnienia losowości w grze․ Chciałem, aby każda rozgrywka była inna i aby gracz nie mógł odgadnąć, gdzie znajdują się pary obrazków․ W tym celu, wykorzystałem algorytm Fisher-Yatesa, który jest powszechnie stosowany do losowego mieszania elementów w tablicy․

W kodzie JavaScript, stworzyłem funkcję, która przyjmowała tablicę obrazków jako argument․ Funkcja ta przechodziła przez tablicę od końca do początku, zamieniając każdy element z losowo wybranym elementem z pozostałej części tablicy․ W ten sposób, kolejność obrazków w tablicy była losowo zmieniana․

Po zmieszaniu tablicy obrazków, przypisałem każdy obrazek do odpowiedniej karty na planszy․ W ten sposób, każda karta otrzymała losowo wybrany obrazek, co zapewniało losowość w grze․

Po przetestowaniu funkcji mieszania kart, upewniłem się, że działa ona poprawnie i że kolejność obrazków na planszy była rzeczywiście losowa․ To było ważne, aby zapewnić uczciwą i nieprzewidywalną rozgrywkę․

Obsługa kliknięć

Obsługa kliknięć była kluczowa dla interakcji użytkownika z grą․ Chciałem, aby gracz mógł łatwo kliknąć na karty i odkryć obrazki na nich․ W kodzie JavaScript, dodałem funkcję, która obsługiwała zdarzenie click na każdym elemencie <div> reprezentującym kartę na planszy․

Po kliknięciu na kartę, funkcja sprawdzała, czy karta jest już odkryta․ Jeśli nie, funkcja zmieniała atrybut display obrazka na block, co powodowało wyświetlenie obrazka na karcie․ Funkcja również dodawała klasę CSS active do karty, aby zaznaczyć, że została odkryta․

Dodatkowo, funkcja obsługi kliknięć rejestrowała, które karty zostały odkryte․ Jeśli użytkownik kliknął na dwie karty, funkcja sprawdzała, czy obrazki na tych kartach były takie same․ Jeśli tak, karty pozostawały odkryte, a gracz zdobywał punkt․ Jeśli obrazki nie pasowały, karty po krótkiej chwili chowały się ponownie․

Po przetestowaniu funkcji obsługi kliknięć, upewniłem się, że działa ona poprawnie i że gracz może łatwo odkrywać karty i sprawdzać, czy obrazki na nich pasują․

Sprawdzanie par

Sprawdzanie par było kluczowym elementem logiki gry․ Po odkryciu dwóch kart, gra musiała sprawdzić, czy obrazki na nich były takie same․ W kodzie JavaScript, stworzyłem funkcję, która przyjmowała dwie karty jako argumenty․ Funkcja ta porównywała atrybut src obrazków na tych kartach․

Jeśli atrybuty src były takie same, funkcja zwracała wartość true, co oznaczało, że obrazki na kartach były takie same․ W przeciwnym razie, funkcja zwracała wartość false, co oznaczało, że obrazki na kartach były różne;

Po sprawdzeniu par, funkcja obsługi kliknięć wykorzystywała wynik funkcji sprawdzającej pary, aby zdecydować, co zrobić z kartami․ Jeśli obrazki były takie same, karty pozostawały odkryte, a gracz zdobywał punkt․ Jeśli obrazki były różne, karty po krótkiej chwili chowały się ponownie․

Po przetestowaniu funkcji sprawdzania par, upewniłem się, że działa ona poprawnie i że gra prawidłowo rozpoznaje pary obrazków․

Wyświetlanie wyników

Po każdym odkryciu pary obrazków, funkcja obsługi kliknięć aktualizowała zmienną wyniku․ Następnie, funkcja aktualizowała tekst w elemencie <div>, aby wyświetlić aktualny wynik․

Po zakończeniu gry, czyli po odkryciu wszystkich par, funkcja obsługi kliknięć wyświetliła komunikat z gratulacjami i ostatecznym wynikiem․ Komunikat ten był wyświetlany w elemencie <div>, który wcześniej służył do wyświetlania wyniku․

Po przetestowaniu funkcji wyświetlania wyników, upewniłem się, że działa ona poprawnie i że gracz jest informowany o swoim postępie i ostatecznym wyniku․

Dodanie licznika czasu

Użyłem funkcji JavaScript setInterval, aby co sekundę aktualizować zmienną czasu․ Funkcja ta obliczała różnicę między czasem rozpoczęcia gry a czasem aktualnym․ Następnie, funkcja aktualizowała tekst w elemencie <div>, aby wyświetlić aktualny czas․

Po zakończeniu gry, funkcja setInterval została zatrzymana, a czas został wyświetlony w elemencie <div>․ W ten sposób, gracz mógł zobaczyć, ile czasu potrzebował na ukończenie gry․

Po przetestowaniu licznika czasu, upewniłem się, że działa on poprawnie i że czas jest wyświetlany w sposób czytelny dla gracza․

Dodanie funkcji resetowania gry

Funkcja resetowania gry najpierw resetowała wszystkie zmienne, które były używane do przechowywania wyników, czasu i stanu gry․ Następnie, funkcja ponownie mieszała tablicę obrazków, aby zapewnić losowość w nowej rozgrywce․ Potem, funkcja ukryła wszystkie karty, resetując ich stan do stanu początkowego․

Na koniec, funkcja resetowania gry zaktualizowała tekst w elemencie <div>, który wyświetlał wynik i czas, aby wyświetlić wartości początkowe․ W ten sposób, gracz mógł rozpocząć nową grę z czystą kartą․

Po przetestowaniu funkcji resetowania gry, upewniłem się, że działa ona poprawnie i że gracz może łatwo rozpocząć nową rozgrywkę․

Ulepszenia

Po stworzeniu podstawowej wersji gry, postanowiłem wprowadzić kilka ulepszeń, aby uczynić ją bardziej atrakcyjną i przyjazną dla użytkownika․ Pierwszym ulepszeniem było dodanie animacji do kart․ Użyłem biblioteki CSS animate․css, aby dodać animacje do kart podczas ich odkrywania i chowania․ Dzięki temu, gra stała się bardziej dynamiczna i przyjemniejsza w odbiorze․

Następnie, dodałem dźwięki do gry․ Użyłem biblioteki JavaScript Howler․js, aby odtwarzać dźwięki podczas odkrywania kart, dopasowywania par i zakończenia gry․ Dźwięki dodawały dodatkowy wymiar do gry i uczyniły ją bardziej immersyjną․

Dodatkowo, zmodyfikowałem wygląd gry, aby był bardziej estetyczny․ Użyłem gradientów w CSS, aby nadać kartom bardziej nowoczesny wygląd․ Zmieniłem również czcionki i kolory, aby stworzyć spójny i atrakcyjny styl wizualny․

Po wprowadzeniu tych ulepszeń, gra Koncentracja stała się bardziej zaawansowana i przyjemniejsza w użytkowaniu․

Dodanie animacji

W kodzie JavaScript, dodałem funkcję, która dodawała klasę CSS animated do karty, gdy użytkownik na nią kliknął․ Następnie, dodałem klasę CSS flipInY do karty, aby nadać jej animację obracania się w pionie․ W ten sposób, karta obracała się, ukazując obrazek na niej․

Podobnie, dodałem animację do kart, które nie pasowały do siebie․ Gdy karty były chowane, dodałem klasę CSS fadeOut, aby nadać im animację zanikania․ W ten sposób, karty znikały z planszy w sposób bardziej płynny․

Po dodaniu animacji, gra stała się bardziej atrakcyjna wizualnie i bardziej angażująca dla gracza․ Animacje nadawały grze bardziej dynamiczny charakter i uczyniły ją bardziej przyjemną w odbiorze․

Dodanie dźwięku

Chcąc uczynić grę bardziej immersyjną, postanowiłem dodać dźwięki․ Użyłem biblioteki JavaScript Howler․js, która ułatwia odtwarzanie dźwięków w przeglądarce internetowej․

Najpierw, dodałem do projektu pliki audio z dźwiękami, które chciałem użyć w grze․ Wybrałem dźwięki, które odpowiadały poszczególnym wydarzeniom w grze⁚ dźwięk kliknięcia podczas odkrywania karty, dźwięk dopasowania pary i dźwięk zakończenia gry․

Następnie, w kodzie JavaScript, stworzyłem funkcje, które odtwarzały odpowiednie dźwięki podczas występowania poszczególnych wydarzeń․ Na przykład, gdy użytkownik kliknął na kartę, funkcja odtwarzała dźwięk kliknięcia․ Gdy użytkownik dopasował parę, funkcja odtwarzała dźwięk dopasowania․

Po dodaniu dźwięków, gra stała się bardziej angażująca i przyjemniejsza w odbiorze․ Dźwięki dodawały dodatkowy wymiar do gry i uczyniły ją bardziej immersyjną․

Podsumowanie

Stworzenie gry Koncentracja w JavaScript było dla mnie ciekawym wyzwaniem․ Nauczyłem się wiele o programowaniu stron internetowych i o tworzeniu interaktywnych gier․ Początkowo, projekt wydawał się skomplikowany, ale dzięki krok po kroku, udało mi się stworzyć w pełni funkcjonalną grę․

Po zakończeniu projektu, byłem zadowolony z efektów swojej pracy․ Gra Koncentracja, którą stworzyłem, była prosta w obsłudze, ale jednocześnie angażująca i przyjemna w odbiorze․ Dodanie animacji i dźwięków uczyniło ją bardziej atrakcyjną i immersyjną․

Projekt ten pokazał mi, jak wiele możliwości daje programowanie w JavaScript․ Dzięki niemu, mogę tworzyć interaktywne strony internetowe i gry, które angażują użytkowników i dostarczają im rozrywki․