Stwórz Grę Mobilną wydanie 2: rozszerzona – aktualizacja kwiecień 2023r. – JavaScript React Native ES6+ React

Witaj w poradniku wydawnictwa poswojsku.pl, dzięki któremu wspólnie zaprogramujemy grę mobilną Falling Jumping Shapes. Stworzymy projekt od pomysłu przez grafikę, aż do kompleksowego zaprogramowania w najwspanialszym języku programowania: JavaScript. Aby to osiągnąć, nauczę Ciebie także podstaw kilku niesamowitych technologii:

* JavaScript,

* nowoczesnej odmiany JavaScript, czyli tzw. ES6+,

* React Native,

* React,

* CSS w wersji do aplikacji mobilnej,

* systemu operacyjnego Android.

Aplikacje będziemy tworzyli w IDE: VSCodium lub możesz użyć inny edytor kodu, np. Visual Studio Code. Poradnik zawiera kod gry wraz z omówieniem oraz podstawową wiedzę niezbędną do tworzenia aplikacji mobilnych za pomocą frameworka React Native – Część II Aplikacje Mobilne. Wprowadzenie. Ale jeżeli posiadasz już podstawy wiedzy, możesz od razu przejść do tworzenia gry.

OPIS GRY DO WYKONANIA

Planujemy zbudować grę, posiadającą trzy poziomy, a właściwie warianty:

* prosty – nazwijmy go SIMPLE oraz przypiszmy do niego oznaczenie ‘zero’

* trudniejszy – nazwijmy go MEDIUM oraz przypiszmy do niego oznaczenie ‘one’

* nieco szalony – nazwijmy go CRAZY oraz przypiszmy do niego oznaczenie ‘two’

Użyłem określenia ‘warianty’ a nie poziomy, gdyż można uruchomić każdy z nich bez względu na przejście przez poprzedni. Technicznie rzecz ujmując będą to trzy zupełnie niezależne od siebie gry, ale oparte na podobnym wyglądzie oraz grafice.

Gracz będzie miał za zadanie kliknięcie w spadającą kulkę, tyle razy, aby wyszła za jedną z bocznych krawędzi.

Zasady gry są bardzo proste:

A) Wybierając z menu nawigacyjnego jeden z wariantów, Gracz rozpocznie grę,

B) Po kliknięciu w przycisk START GAME pojawia się na górnej krawędzi kulka o losowym kolorze,

C) Kulka opada powoli w dół,

D) Gracz ma za zadanie kliknąć kulkę, a ona za każdym kliknięciem zmienia swoją pozycję w poziomie (w sposób losowy w lewo lub prawo – zgodnie z logiką zapisaną w kodzie JavaScript),

E) Gdy kulka wyjedzie za lewą lub prawą krawędź – Gracz uzyskuje punkt – trzeba:

uruchomić Zliczanie Punktów,

kulka ponownie musi wrócić powyżej górnej krawędzi, aby rozpocząć swobodne spadanie, ale już w innym kolorze oraz z większą szybkością niż poprzednio,

Gracza trzeba poinformować o liczbie punktów,

Gracza trzeba poinformować o tym, że idzie mu dobrze,

F) Gdy kulka spadnie poniżej dolnej krawędzi, Gracz nie uzyskuje punktu:

kulka ponownie musi wrócić powyżej górnej krawędzi, aby rozpocząć spadanie, ale już w innym kolorze,

Gracza trzeba poinformować o tym, że nie wykonał poprawnie kliknięć w spadający obiekt,

G) Ogranicznik – maksymalna liczba punktów – po uzyskaniu określonej, założonej przez programistę liczby punktów, kończy się gra:

Gracza trzeba poinformować, że gra się zakończyła bo uzyskał określoną liczbę punktów,

na ekranie powinien znowu pojawić się napis START GAME, gdyby chciał Gracz zagrać ponownie.

H) INNE ?? tutaj jest miejsce na dalszy rozwój gry – dla Ciebie oraz Twojej kreatywności :).

SPIS TREŚCI część I
WSTĘP str. 8

ROZDZIAŁ 1 str. 15
OPIS ZAŁOŻEŃ GRY FALLING JUMPING SHAPES
OPIS GRY
WYBRANA TECHNOLOGIA WYKONANIA
ZASOBY: GRAFIKA, DŹWIĘKI

ROZDZIAŁ 2 str. 22
PRZYGOTOWANIE STRUKTURY PROJEKTU
KATALOGI
PLIKI
GRAFIKA
HAKI W REACT – WPROWADZENIE

ROZDZIAŁ 3 str. 35
EKRAN STARTOWY
WYGLĄD STRONY Menu
MENU APLIKACJI
DODATKOWE USTAWIENIA

ROZDZIAŁ 4 str. 49
EKRAN SIMPLE
WYGLĄD
KULKA – BUDOWA
KULKA – ANIMACJA
START GAME
KOMUNIKATY

ROZDZIAŁ 5 str. 94
EKRAN MEDIUM
PLIKI:
• GameStageOne.js
• SquareOne.js
• TekstInfo.js (ten sam plik dla wszystkich poziomów)

ROZDZIAŁ 6 str. 119
EKRAN CRAZY
PLIKI:
• GameStageTwo.js
• SquareTwo.js

• TekstInfo.js (ten sam plik dla wszystkich poziomów, omówiony wcześniej)

ROZDZIAŁ 7 str. 148
PODSUMOWANIE
STAN KOŃCOWY
PROPOZYCJE DALSZEGO ROZWOJU GRY
UDOSTĘPNIENIE GRY POTENCJALNYM KLIENTOM– GRACZOM