E-book details

Stwórz Grę Aplikacje Mobilne ES6+ JavaScript React Native - Hooks

Stwórz Grę Aplikacje Mobilne ES6+ JavaScript React Native - Hooks

poswojsku.pl

Ebook

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 jednak to osiągnąć, najpierw nauczę Ciebie podstaw kilku niesamowitych technologii:

  • nowoczesnej odmiany JavaScript, czyli tzw. ES6+,
  • React Native,
  • React,
  • CSS w wersji do aplikacji mobilnej,
  • 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:

  • Wybierając z menu nawigacyjnego jeden z wariantów, Gracz rozpocznie grę,
  • Po kliknięciu w przycisk START GAME pojawia się na górnej krawędzi kulka o losowym kolorze,
  • Kulka opada powoli w 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),
  • 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,
  • 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,
    • granicznik - 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.
  • INNE ?? tutaj jest miejsce na dalszy rozwój gry - dla Ciebie oraz Twojej kreatywności :).

Część I:

Stwórz Grę

ES6+ JavaScript React Native


 

SPIS TREŚCI

WSTĘP str. 6

ROZDZIAŁ 1 str. 10

OPIS ZAŁOŻEŃ GRY FALLING JUMPING SHAPES

OPIS GRY

WYBRANA TECHNOLOGIA WYKONANIA

ZASOBY: GRAFIKA, DŹWIĘKI

ROZDZIAŁ 2 str. 17

PRZYGOTOWANIE STRUKTURY PROJEKTU

KATALOGI

PLIKI

GRAFIKA

HAKI W REACT – WPROWADZENIE


 

ROZDZIAŁ 3 str. 27

EKRAN STARTOWY

WYGLĄD STRONY Menu

MENU APLIKACJI

DODATKOWE USTAWIENIA

ROZDZIAŁ 4 str. 39

EKRAN SIMPLE

WYGLĄD

KULKA – BUDOWA

KULKA – ANIMACJA

START GAME

KOMUNIKATY

ROZDZIAŁ 5 str. 84

EKRAN MEDIUM

PLIKI:

GameStageOne.js

SquareOne.js

TekstInfo.js (ten sam plik dla wszystkich poziomów)

ROZDZIAŁ 6 str. 109

EKRAN CRAZY

PLIKI:

GameStageTwo.js

SquareTwo.js

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

ROZDZIAŁ 7 str. 138

PODSUMOWANIE

STAN KOŃCOWY

PROPOZYCJE DALSZEGO ROZWOJU GRY

UDOSTĘPNIENIE GRY POTENCJALNYM KLIENTOM– GRACZOM

 


 

Część II Dodatek:

Aplikacje Mobilne Wprowadzenie


 

SPIS TREŚCI

WPROWADZENIE str. 150

ROZDZIAŁ 1 str. 153

WPROWADZENIE DO TECHNOLOGII MOBILNYCH

ROZDZIAŁ 2 str. 158

ŚRODOWISKO PROGRAMISTYCZNE DO TWORZENIA APLIKACJI MOBILNYCH

ROZDZIAŁ 3 str. 164

REACT NATIVE INSTALACJA NA WŁASNYM KOMPUTERZE

ROZDZIAŁ 4 str. 186

REACT KONTRA REACT NATIVE – KRÓTKIE OMÓWIENIE

ROZDZIAŁ 5 str. 197

PIERWSZY PROJEKT – "HELLO WORLD"

Podsumowanie str. 212

  • Title: Stwórz Grę Aplikacje Mobilne ES6+ JavaScript React Native - Hooks
  • Author: poswojsku.pl
  • ISBN: 978-83-964647-1-2, 9788396464712
  • Date of issue: 2022-09-24
  • Format: Ebook
  • Item ID: s_016y
  • Publisher: poswojsku.pl