CodersCamp 2021 - Projekt JavaScript

CodersCamp (coderscamp.edu.pl) - Największy otwarty kurs programowania webowego .Wykorzystanie asynchronicznego JavaScript oraz korzystanie z REST API.

Zespół

• Mentor: Michał Miszczyszyn

• Justyna Bodurka

• Weronika Burzyńska

• Mateusz Binięda

• Krystian Gaczyński

• Karol Wolski

• Kamil Kantorski

  
  

Star Wars Quiz

Demo

Wersja demonstracyjna aplikacji jest dostępna pod tym linkiem -> DEMO

Założenia projektowe

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.

Wykorzystane technologie

• HTML
• CSS
• JavaScript
• Star Wars Api
  
  

Wygląd aplikacji

Ekran główny

Responsywność

Przykładowy gameplay

Działanie aplikacji

Ekran startowy

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.

Hall of fame

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ń.

Rozgrywka

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.

Uruchomienie projektu

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.