Gra w statki Battleship Game (Next.js)
Gra Battleship (Next.js)
To nowoczesna implementacja klasycznej gry Battleship, stworzona przy użyciu Next.js, React, TypeScript i Tailwind CSS.
Opis gry
Battleship to gra strategiczna dla dwóch graczy, w której każdy gracz umieszcza flotę statków na siatce 10x10, a następnie na zmianę próbuje odgadnąć lokalizację statków przeciwnika. Pierwszy gracz, który zatopi wszystkie statki przeciwnika, wygrywa.
Funkcje
Nowoczesny interfejs użytkownika: responsywny, czysty interfejs wykorzystujący Tailwind CSS.
Umiejscowienie statków: Umieść statki o różnych rozmiarach (w tym statki 6-pokładowe, 5-pokładowe, 4-pokładowe, 3-pokładowe, 2-pokładowe i jednopokładowe) na swojej planszy. Statki nie mogą się ze sobą stykać, nawet po przekątnej.
Tryby gry: Graj przeciwko botowi (AI) lub lokalnie przeciwko innemu człowiekowi (tryb hot spot).
Gra turowa: Gracze atakują planszę przeciwnika na zmianę. Trafienia i pudła są oznaczone wizualnie.
Efekty zwycięstwa i porażki: Animacja konfetti i wiadomość („WYGRAŁEŚ!” lub „PRZEGRAŁEŚ!” są wyświetlane po zakończeniu gry. Efekt można wyłączyć ręcznie lub zniknie po kilku sekundach.
Licznik talii: Wyświetla liczbę segmentów statków (talii) pozostałych dla każdego gracza.
Przełączanie orientacji: Wybierz, aby umieścić swoje statki pionowo lub poziomo.
Opcja ponownego uruchomienia: Rozpocznij nową grę w dowolnym momencie.
Jak grać
Wybierz tryb gry: Wybierz, aby grać przeciwko botowi lub innemu człowiekowi.
Umiejscowienie statku: Wybierz statek i umieść go na swojej planszy. Użyj przycisku orientacji, aby przełączać się między pionowym i poziomym ułożeniem. Statki nie mogą znajdować się obok siebie.
Rozpoczęcie bitwy: Po umieszczeniu wszystkich statków rozpoczyna się faza ataku.
Wykonuj ruchy: Kliknij na planszy przeciwnika, aby zaatakować. Gra oznaczy trafienia (X) i chybienia (•).
Wygrana lub przegrana: Gra kończy się, gdy wszystkie statki jednego gracza zostaną zatopiony. Pojawi się efekt świętowania lub porażki.
Restart: Kliknij przycisk restartu, aby zagrać ponownie.
Zastosowane technologie
Next.js (App Router)
React (z haczykami)
TypeScript
Tailwind CSS
Demo
Graj w grę online: battle-ship-next-js.vercel.app
To nowoczesna implementacja klasycznej gry Battleship, stworzona przy użyciu Next.js, React, TypeScript i Tailwind CSS.
Opis gry
Battleship to gra strategiczna dla dwóch graczy, w której każdy gracz umieszcza flotę statków na siatce 10x10, a następnie na zmianę próbuje odgadnąć lokalizację statków przeciwnika. Pierwszy gracz, który zatopi wszystkie statki przeciwnika, wygrywa.
Funkcje
Nowoczesny interfejs użytkownika: responsywny, czysty interfejs wykorzystujący Tailwind CSS.
Umiejscowienie statków: Umieść statki o różnych rozmiarach (w tym statki 6-pokładowe, 5-pokładowe, 4-pokładowe, 3-pokładowe, 2-pokładowe i jednopokładowe) na swojej planszy. Statki nie mogą się ze sobą stykać, nawet po przekątnej.
Tryby gry: Graj przeciwko botowi (AI) lub lokalnie przeciwko innemu człowiekowi (tryb hot spot).
Gra turowa: Gracze atakują planszę przeciwnika na zmianę. Trafienia i pudła są oznaczone wizualnie.
Efekty zwycięstwa i porażki: Animacja konfetti i wiadomość („WYGRAŁEŚ!” lub „PRZEGRAŁEŚ!” są wyświetlane po zakończeniu gry. Efekt można wyłączyć ręcznie lub zniknie po kilku sekundach.
Licznik talii: Wyświetla liczbę segmentów statków (talii) pozostałych dla każdego gracza.
Przełączanie orientacji: Wybierz, aby umieścić swoje statki pionowo lub poziomo.
Opcja ponownego uruchomienia: Rozpocznij nową grę w dowolnym momencie.
Jak grać
Wybierz tryb gry: Wybierz, aby grać przeciwko botowi lub innemu człowiekowi.
Umiejscowienie statku: Wybierz statek i umieść go na swojej planszy. Użyj przycisku orientacji, aby przełączać się między pionowym i poziomym ułożeniem. Statki nie mogą znajdować się obok siebie.
Rozpoczęcie bitwy: Po umieszczeniu wszystkich statków rozpoczyna się faza ataku.
Wykonuj ruchy: Kliknij na planszy przeciwnika, aby zaatakować. Gra oznaczy trafienia (X) i chybienia (•).
Wygrana lub przegrana: Gra kończy się, gdy wszystkie statki jednego gracza zostaną zatopiony. Pojawi się efekt świętowania lub porażki.
Restart: Kliknij przycisk restartu, aby zagrać ponownie.
Zastosowane technologie
Next.js (App Router)
React (z haczykami)
TypeScript
Tailwind CSS
Demo
Graj w grę online: battle-ship-next-js.vercel.app
Lwów 
Gotowy do podjęcia pracy
Zaproponuj zlecenie