Gra – Flappy Bird

Stworzymy popularną grę Flappy Bird

Czas trwania – 3 GODZINY
Poziom trudności – TRUDNY

Wstęp

Dzisiaj przed nami duży projekt! Zbudujemy od podstaw popularną grę Flappy Bird!

Przygotowanie

Co wcześniej trzeba przygotować:

Przeglądarkę Google Chrome z rozszerzeniem LOFI Robot ScratchX
(http://www.lofirobot.com/edubox/konfiguracja/)

Przebieg

Budowa środowiska gry

Gra będzie polegała na odpowiednim manewrowaniu wróbelkiem, tak by przelatywał przez szczeliny pojawiające się na losowych wysokościach mapy. Budowę gry możemy zacząć od rysowania planszy w wybranym kolorze i wróbla, którym będziemy fruwali.

Najpierw plansza:

1_plansza

Teraz ptak. Jako, że wróbelek będzie na stałe znajdował się na współrzędnej X=50, a tylko jego wysokość będzie zmienna, to możemy użyć bloku Obróć – ułatwi nam to projektowanie. Na razie „przymocujemy” go na stałe do X=50; Y=50 i narysujemy kulkę, która będzie stanowiła ciało wróbla.

2_cialo_ptaka

Czas na głowę…

3_glowa_ptaka

A także oczy i dziób!

4_oczy_dziob

No i pozostało nam do wykonania skrzydło:

5_skrzydlo

Nasz wróbelek jest gotowy. Teraz czas na zaprojektowanie przeszkód. Przeszkody będą się poruszały w osi X, a także będą miały różną wysokość więc w obu osiach będzie musiała znajdować się zmienna nadająca współrzędne. Ja te współrzędne nazwę MurX i MurY. Najpierw wykonajmy dwa mury, które utworzą szczelinę.

6_szczelina

Teraz wykonajmy ruch murów w osi X. Zasada jest prosta: gdy mur wyleci poza planszę, czyli znajdzie się w pozycji X=-10, należy ustawić jego pozycję na X=110. Będziemy mieli wrażenie, że cały czas lecimy przed siebie.

7_ruch_muruX

Na horyzoncie powoli zaczyna pojawiać się pełna koncepcja gry. Nieźle nam idzie. Zaprogramujmy teraz występowanie szczelin na losowych wysokościach. Do zmiennej MurY zostanie przypisana losowa wartość w momencie, gdy mur wyleci poza planszę.

8_losowy_murY

Okej, mamy losowe wartości wysokości, ale musimy je również uwzględnić w murze.

9_uwzglednienie_murY

Jak widzisz, na razie pozbyłem się dolnego muru ponieważ musimy zastanowić się jak na nowo go wygenerować tak, żeby sięgał dolnej krawędzi planszy. Obecnie generujemy mur górny o wysokości od 10 do 80. Mur dolny powinien zaczynać się na wysokości o szczelinę większej od końca pierwszego muru. Jeżeli wysokość pierwszego muru to 40, a szczelina ma być o wielkości 30 to znaczy, że drugi mur zacznie się na wysokości 70 (ponieważ 40+30=70).

Super, mamy gotową pozycję dla drugiego muru, teraz trzeba znaleźć rozwiązanie dla jego długości. Skoro znamy wysokość pierwszego muru, która jest zapisana w zmiennej MurY, znamy wysokość szczeliny, a także całkowitą wysokość planszy (100) to możemy z łatwością wyliczyć jaka powinna być długość dolnego muru.
100-(MurY+30)

11_wysokosc_drugiego_muru

Działa! Mamy gotowe środowisko gry! Czas na ruch wróbla.

Prędkość i przyspieszenie wróbla

Na wróbelka działa grawitacja. Grawitacja to przyspieszenie, a więc do prędkości wróbla w osi Y dodawana jest stała wartość. Ruch skrzydeł wywołany naciśnięciem jakiegoś klawisza spowoduje zmianę prędkości na przeciwny kierunek o stałej wartości. To tyle z teorii, a teraz praktyka! Będziemy potrzebowali zmiennych odpowiedzialnych za prędkość (Predkosc) oraz przyspieszenie (Przyspieszenie). Musimy również określić na jakiej wysokości obecnie znajduje się wróbel – użyjemy do tego zmiennej PozY.
W używanym przez nas bloku Obróć, ustawmy parametr Y na PozY.

12_Pozycja_wrobla

Zaprogramujmy teraz ruch!

13_predkosc_przyspieszenie

Niestety wróbelek ucieka nam poza dolną krawędź. Naprawmy to przy pomocy bloku Jeżeli.

14_y_wiekszy_niz_100

Gdy zmienna PozY będzie większa niż 100, to ptak pojawi się na środku planszy z zerową prędkością początkową. Spróbuj pozbyć się bloku resetującego prędkość i zobacz co się stanie. W późniejszym etapie, gdy dodamy do naszej gry punkty spadnięcie będzie oznaczało przegraną.

Ptaki znane są z tego, że latają, a nie spadają. Musimy koniecznie dorzucić możliwość wzbijania się w powietrze. Po naciśnięciu strzałki w górę spowodujemy, że prędkość zmieni się na 3 w górę.

15_wzbijanie_sie_w_gore

Przegrywanie i punktacja

Super! Mamy możliwość omijania murów. Teraz musimy zaprogramować najsmutniejszą część – przegrywanie. Przegramy, gdy wpadniemy na mur lub spadniemy za dolną krawędź mapy. O przegranej będzie informowała odpowiednia zmienna (Przegrana). Zaprogramowanie przegranej po spadnięciu jest stosunkowo proste, natomiast kłopot może sprawić zaprogramowanie zderzenia z murem. Postawmy sobie pytanie: Jakie warunki muszą być spełnione, żeby program wiedział czy wróbelek wpadł na mur?

  • Pierwszym warunkiem jest na pewno wysokość na jakiej znajduje się wróbelek. Gdy wysokość ta będzie mniejsza niż MurY to znaczy że wpadamy na górny mur. Gdy wysokość będzie większa niż MurY + wielkość szczeliny to znaczy że lecimy wprost na dolny mur.
  • Drugim warunkiem jest pozycja w osi X. Wiemy, że ptak znajduje się na stałe na współrzędnej X=50. Gdy MurX będzie większy niż X=49 i mniejszy niż 50 + Szerokość muru to znaczy, że wróbel powinien przelatywać przez szczelinę.

Złamanie obu warunków spowoduje przegraną. Przy pomocy bloków, można to przedstawić w ten sposób:

16_zderzanie_z_murem

Dodajmy te bloki do pętli powtarzaj.

17_cala_mechanika_gry

Przegrana będzie zerowała punktację. Musimy ją oczywiście wcześniej zaimplementować. Dodajmy zmienną Punkty, wyświetlajmy ilość punktów w lewym górnym rogu, a także dodawajmy jeden punkt za każdym razem, gdy wygeneruje się nowy mur.

18_punkty

Teraz połączmy punktację z przegraną. Musimy użyć bloku Jeżeli… w przeciwnym razie.

19_jezeli_przegrana_w_przeciwnym_razie

Jeżeli Przegrana nie będzie prawdą, to program będzie wykonywał się normalnie. Natomiast jeżeli uderzymy w ścianę lub spadniemy to program powinien wyświetlić napis GAME OVER oraz powiadomić ile udało nam się zdobyć punktów. Sekwencję bloków, która będzie wykonywała te polecenia wrzucę do pustej części bloku warunkowego Jeżeli…w przeciwnym razie

20_Game_over

Niezły efekt! Niestety, gdy przegramy to nie pozostaje nam nic innego jak na nowo uruchomić cały program. Możemy to z łatwością naprawić dodając taki zestaw bloczków:

21_kiedy_nacisnieto_z

No teraz to mamy naprawdę świetną grę. Zajmiemy się teraz szczegółami.

Udźwiękowienie

Zaprogramujmy grę tak, by po naciśnięciu strzałki w górę program wydawał radosne ćwierkanie.

22_cwierkanie

Teraz czas na smutny dźwięk po przegranej.

23_muzyczka_przegrana

Nasz program jest już naprawdę, naprawdę rozbudowany.

Dodatki

Kolejnym szczegółem, który poprawi wizualnie naszą grę jest uzależnienie obrotu wróbelka od prędkości. Zobacz jaki będzie efekt zastosowania takiej formuły:

24_obrot_o_predkosc

UFF… gra gotowa. Mam nadzieję, że dotrwałeś do tego miejsca. Jeżeli tak, to pochwal się swoim projektem – może uda ci się go jeszcze udoskonalić?

ZOBACZ GOTOWY PROJEKT

O autorze scenariusza:

LOFI Robot

Ten artykuł napisały dla Ciebie roboty znad morza. Najprawdopodobniej miały na imię Maciek i Tomek.