CodersCamp (coderscamp.edu.pl) - Największy otwarty kurs programowania webowego
.Wykorzystanie asynchronicznego JavaScript oraz korzystanie z REST API.
Mentor: Michał Miszczyszyn
Wersja demonstracyjna aplikacji jest dostępna pod tym linkiem -> DEMO
Celem projektu było stworzenie aplikacji, poprzez odpowiednie wykorzystanie aktualnie nabytej na kursie wiedzy. Sześcioosobowa grupa projektowa, pod okiem mentora, który również stanowi klienta produktu, zdecydowała się na tematykę dotyczącą uniwersum Gwiezdnych Wojen.
Niezwykle ważnym aspektem podczas projektu, była styczność ze wspólnym tworzeniem rozwiązań oraz działaniem w grupie. Przyczyniło się to, do rozwoju zdolności nie tylko czysto technicznych, ale również komunikacyjnych zespołu.
HTML
CSS
JavaScript
Star Wars Api
Ekran główny
Responsywność
Przykładowy gameplay
Po uruchomieniu aplikacji zostaje wyświetlony, ekran początkowy, na którym istnieje możliwość wystartowania quizu, sprawdzenia najwyższych wyników, zmiana trybu rozgrywki bądź powrotu do ekranu startowego (poprzez kliknięcie na logo).
Na ekranie startowym wyświetlane jest pytanie, oraz zasady, które zmieniają się w zależności od wybranego trybu na pasku nawigacyjnym. Możliwe tryby do wyboru:
People
Vehicles
Starships
Dodatkowo aplikacja jest w pełni responsywna. Więc można się nią cieszyć bez względu na posiadany komputer,telefon czy tablet.
Jest odzwierciedleniem ekranu, który pokazuje najlepsze zdobyte wyniki, które są zapisane w LocalStorage. Ranking wyświetla trzy pierwsze miejsca, nazwę gracza, oraz ilość prawidłowych odpowiedzi przy danej liczbie pytań.
Polega na rozpoznawaniu przez gracza w zależności od trybu - postaci, pojazdów lub statków kosmicznych. Przy rozpoczęciu quizu po lewej stronie wyświetlane, jest losowo wygenerowane zdjęcie ze SWAPI. Zadanie polega na rozpoznaniu nazwy ukazanej postaci fikcyjnej, bądź rzeczy. Gracz udziela jednej z czterech odpowiedzi, po czym przechodzi do następnego pytania. W każdym pytaniu tylko jedna z opcji jest prawidłowa. Poprawna odpowiedź podświetla przycisk na zielono a błędna - na czerwono. Quiz trwa 2 minuty. Czas wyświetlany jest w formie liczbowej, oraz poprzez animowany miecz świetlny na dole ekranu. Po zakończeniu rozgrywki, gracz uzyskuje wynik porównany z wynikiem grającego jednocześnie komputera. Wyświetlana jest wtedy ilość pytań oraz poprawnych odpowiedzi. Istnieje również możliwość dopisania się do rankingu poprzez wprowadzenie nazwy.
Aby uruchomić aplikację na lokalnej maszynie należy:
1. Zainstalować zależności za pomocą: npm install
2. Wystartować serwer deweloperski: npm run dev
Aplikacja będzie dostępna pod wyświetlonym adresem.