Wariacja o space invaders w JavaScripcie cz. 1

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:

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.

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.