Gra „2048”
Realizacja internetowa klasycznej logicznej łamigłówki „2048”, stworzona w czystym JavaScript (ES6+) z wykorzystaniem nowoczesnych metod manipulacji DOM oraz responsywnego układu. Projekt został opracowany w celu zaprezentowania umiejętności budowy złożonej logiki gry oraz optymalizacji wydajności interfejsu.
Kluczowa funkcjonalność projektu:
• W pełni zrealizowany model matematyczny i logiczny gry: przesuwanie kafelków, ich łączenie przy zderzeniu oraz generowanie nowych liczb.
• Płynne animacje ruchu i łączenia kafelków bez utraty wydajności (optymalizacja przejść CSS).
• Liczenie i wyświetlanie aktualnego wyniku gry w czasie rzeczywistym.
• Obsługa stanów gry: wyraźne określenie zwycięstwa (osiągnięcie kafelka 2048) lub przegranej (brak dostępnych ruchów) z wyświetleniem odpowiednich ekranów.
• Sterowanie za pomocą klawiatury (strzałki) dla użytkowników komputerów stacjonarnych.
• Przycisk szybkiego restartu gry z zerowaniem planszy i wyniku.
Stos technologiczny:
• HTML5
• SCSS / CSS3 (responsywna siatka, animacje, zmienne)
• JavaScript ES6+ (złożona logika tablic, operacje macierzowe)
• Manipulacja DOM (dynamiczne tworzenie i aktualizacja elementów interfejsu)
• Parcel (szybki i zoptymalizowany kompilator projektu)
• Git / GitHub Pages (wdrożenie i kontrola wersji)
Podczas rozwoju rozwiązano kilka wyzwań architektonicznych, w tym: stworzenie poprawnego algorytmu przesuwania kafelków bez podwójnego łączenia w jednym ruchu, dynamiczne śledzenie wolnych komórek do losowej generacji nowych liczb, a także zapewnienie responsywności planszy, aby gra wyglądała równie wygodnie na ekranach smartfonów, tabletów i komputerów PC.
#javascript #js #frontend #scss #gra #2048 #programowanie-webowe #verstka #parcel
Kluczowa funkcjonalność projektu:
• W pełni zrealizowany model matematyczny i logiczny gry: przesuwanie kafelków, ich łączenie przy zderzeniu oraz generowanie nowych liczb.
• Płynne animacje ruchu i łączenia kafelków bez utraty wydajności (optymalizacja przejść CSS).
• Liczenie i wyświetlanie aktualnego wyniku gry w czasie rzeczywistym.
• Obsługa stanów gry: wyraźne określenie zwycięstwa (osiągnięcie kafelka 2048) lub przegranej (brak dostępnych ruchów) z wyświetleniem odpowiednich ekranów.
• Sterowanie za pomocą klawiatury (strzałki) dla użytkowników komputerów stacjonarnych.
• Przycisk szybkiego restartu gry z zerowaniem planszy i wyniku.
Stos technologiczny:
• HTML5
• SCSS / CSS3 (responsywna siatka, animacje, zmienne)
• JavaScript ES6+ (złożona logika tablic, operacje macierzowe)
• Manipulacja DOM (dynamiczne tworzenie i aktualizacja elementów interfejsu)
• Parcel (szybki i zoptymalizowany kompilator projektu)
• Git / GitHub Pages (wdrożenie i kontrola wersji)
Podczas rozwoju rozwiązano kilka wyzwań architektonicznych, w tym: stworzenie poprawnego algorytmu przesuwania kafelków bez podwójnego łączenia w jednym ruchu, dynamiczne śledzenie wolnych komórek do losowej generacji nowych liczb, a także zapewnienie responsywności planszy, aby gra wyglądała równie wygodnie na ekranach smartfonów, tabletów i komputerów PC.
#javascript #js #frontend #scss #gra #2048 #programowanie-webowe #verstka #parcel