Nie będę pokazywał jak napisać ten klasyk gier komputerowych, ale postaram się zaprezentować coś podobnego do space invaders w JavaScripcie 🙂 Często spotykam się z opinią, że aby tworzyć gry, należy znać bardzo zaawansowane techniki programowania lub skomplikowane biblioteki / frameworki. Do tego trzeba mieć zespół grafików, dźwiękowców i cholera wie co jeszcze.
Otóż nie. Chcę udowodnić wam, że można stworzyć grę, bez tego wszystkiego. Wystarczy mieć fajny pomysł i bardzo prostymi technikami programistycznymi możemy sami napisać ciekawą grę. Nie będzie to może następca wiedźmina, ale uwierzcie mi, wciąga (na jakieś 15 minut :P)
Od czego zacząć
Tak jak napisałem wyżej, musimy mieć dobry pomysł. Pomysł na tę grę oczywiście nie należy do mnie, jest to coś co widziałem kiedyś w internecie, ale odtworzone po mojemu. No więc co to za gra?
W tej grze, będziemy dowodzić statkiem kosmicznym, ostatnią nadzieją ludzkości. Naszym celem, a jakże, jest powstrzymanie najeźdźców z kosmosu! Jako kapitan statku, gracz będzie musiał podać współrzędne, w które chce wysłać swój pocisk fotonowy. Jeżeli uda mu się trafić w statek obcych, wygrywa. Jeżeli jednak chybi 5 razy, obcy dotrą na ziemię a ludzkość spotka zagłada 🙁 Zadanie jest o tyle trudne, że za każdym razem obcy będzie zmieniał swoje położenie (będzie coraz bliżej Ziemi).
Jeżeli mamy już pomysł, trzeba zacząć planować jak gra ma działać. Tak jak w przypadku każdego oprogramowania, również z grami, nie mamy co zaczynać, jeżeli nie jesteśmy pewni tego, jak program ma się zachowywać (innymi słowy, bez dokładnej specyfikacji, nie piszemy kodu 😉 ).
Dla mnie dobrym miejscem aby zacząć jest stworzenie makiety, przedstawiającej aplikację. Zazwyczaj mamy już w głowie jakiś obraz tego jak ma wyglądać nasz program. Do tego celu używam profesjonalnego oprogramowania Paint. Oto makieta naszej gry:
Nie wygląda zbyt skomplikowanie, prawda? Widzimy wyraźnie wszystkie elementy. Na podstawie tego widoku, możemy spokojnie określić działanie naszej gry od A do Z. Gracz, wpisze dane do pola input, kliknie przycisk a gra przedstawi mu wynik na oknie z widokiem kosmosu.
W podpunktach wypiszmy teraz sobie przebieg naszej gry. Oto logika wg której chcemy aby nasza gra działała:
1 2 3 4 5 6 7 8 9 10 |
ustaw grę rozegraj rundę sprawdź czy gra zakończona tak - wygrana? gratulacje koniec przegrana? smutek :( nie - przesuń kosmitę i rozegraj kolejną rundę koniec gry |
Jest to pseudo kod bardzo abstrakcyjnego poziomu, ale jest idealny. Na początek nie potrzebujemy więcej. Chcemy tylko ustalić wyraźne granice co do tego, czego oczekujemy od naszej gry.
Kiedy to jest już jasne, czas rozpisać nasz plan trochę bardziej szczegółowo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
USTAW GRĘ ustaw zmienne ustaw style ustaw eventy na przyciskach ROZEGRAJ RUNDĘ pokaz kontrolkę statku przyjmij pozycje statku ukryj kontrolkę statku pokaż kontrolkę rakiety przyjmij pozycje rakiety przesuń statek i rakietę ukryj kontrolkę rakiety SPRAWDŹ CZY GRA ZAKOŃCZONA jeżeli rakieta trafiła kosmitę gra zakończona sukcesem jeżeli kosmita dotarł na ziemię, gra zakończona porażką jeżeli rakieta nie trafiła kosmity a on nie dotarł na ziemie, przesuń go bliżej ziemi i rozpocznij kolejną rundę KONIEC GRY jeśli gra przegrana, podokuczaj graczowi jeżeli gra wygrana pogratuluj graczowi, podaj ilość strzałów |
Teraz zaczyna to coraz bardziej i bardziej przypominać język komputera. Na tym etapie powoli zaczynamy już myśleć o tym o pisaniu kodu, i to takiego który odzwierciedlił to co sobie zaplanowaliśmy.
W kolejnej części przedstawię pełny kod gry oraz dokładnie opiszę jego działanie.