Piszemy grę

Na “Drodze programisty” nauczyliśmy się już wiele. Wiemy czym jest program komputerowy, co to są zmienne i funkcje. Wiemy jak sterować logiką naszego programu. Nadeszła chwila, aby wykorzystać naszą wiedzę i stworzyć coś bardziej praktycznego niż podawane przeze mnie przykłady. Dziś zaczniemy pisać grę. Taką prostą, przeglądarkową. Jest to pierwszy post z tej serii a na jej końcu będziemy mieli własną grę, w którą można zagrać na domówce ze znajomymi 😉

Krok 1: Pomysł

Nasza gra będzie bardzo podobna do gry “Błyskawiczna reakcja”  (aczkolwiek bez bolesnej kary za przegraną) i będzie polegała na sprawdzeniu, który z dwóch graczy ma lepszy refleks. Zasada jest prosta. Dwaj gracze siedzą przy jednej klawiaturze i każdy ma swój własny klawisz do naciśnięcia kiedy zapali się zielona lampka. Ten z graczy, który jako pierwszy naciśnie swój klawisz, zdobywa punkt. Pierwszy gracz z 3 punktami wygrywa.

Chciałbym, żebyś sama programowała razem ze mną 🙂 Ta seria postów pomyślana jest bardziej jako instrukcja krok po kroku jak programować. Zdecydowanie nie jest to podręcznik czy tutorial pisania gier. Tym bardziej że nasza będzie dość prosta. Jednak mam nadzieję, że napisanie gry będzie wystarczającą zachętą, aby trochę poprogramować razem ze mną 🙂

Krok 2: Analiza

Dobrze, mamy już pomysł. Kolejnym etapem, który ułatwi nam później programowanie to analiza. Do tego etapu wystarczy kartka papieru i długopis. Siadamy i zastanawiamy się, jak po kolei będzie przebiegała nasza gra. Na tym etapie musimy już myśleć w kategoriach programowania, zmiennych, przepływu, pętli czy funkcji. Na początku nie będzie to proste, ale pomoże Ci dokładnie zobaczyć i zrozumieć mechanikę gry. Pewnie wiele osób powie, że ten etap jest zbędny i żeby od razu przejść do programowania, ale ja chciałbym żebyś spróbowała. Uważam, że ten etap jest bardzo pomocny i znacznie ułatwi samo programowanie. Na tym etapie często okazuje się, że o czymś nie pomyśleliśmy, albo nie do końca wiemy jak coś zrobić.

Gra którą będziemy razem pisać to prosta gra przeglądarkowa. Czyli będziemy tworzyć stronę internetową, która będzie naszą “planszą” do gry. Obaj gracze siedzą przy jednej klawiaturze i każdy z nich ma swój klawisz do naciśnięcia. Będziemy więc poznawać w praktyce: HTML (język do tworzenia stron internetowych) oraz JavaScript (język, który “ożywi” statyczną stronę internetową i pozwoli na obsługę różnych zdarzeń w przeglądarce). Na koniec poprawimy wygląd naszej gry za pomocą CSS.

Mechanika

Przejdźmy więc do pierwszego etapu pracy nad naszą grą. Bierzemy kartkę i długopis i zaczynamy pisać: jak krok po kroku powinna zachowywać się nasza gra. Robimy to tak jak nam wygodnie i w takiej formie w jakiej uznamy za najwłaściwsze. U mnie wygląda to tak.

Na początek opisuję w punktach mechanikę gry:

1. Wchodzimy na stronę gry, następuje inicjalizacja wszystkich potrzebnych zmiennych oraz wyświetlenie “planszy”
2. Jeden z graczy naciska przycisk “Start”
3. Rozpoczyna się runda, każda runda trwa 5 s + losowy czas od 1 do 5 s (żeby gracze nie wiedzieli kiedy będzie trzeba nacisnąć przycisk)
4. Po upływie danej rundy wyświetlamy napis: “Pojedynek!” i czekamy, który z graczy pierwszy naciśnie przycisk, ten gracz zdobywa jeden punkt
5. Sprawdzamy liczbę punktów i jeżeli któryś gracz zdobył 3 punkty następuje koniec gry, wyświetlamy podsumowanie

Na tym w sumie moglibyśmy poprzestać, ale nasuwa mi się jedna myśl. Co się stanie, gdy jeden z graczy będzie chciał wygrać tak bardzo, że będzie bez przerwy szybko naciskał swój przycisk? Gdy wyświetli się napis “Pojedynek!” to jest bardzo duża szansa, że będzie on pierwszy, przed uczciwym graczem. Tego typu zachowanie uważamy za nieuczciwe i chcielibyśmy się przed nim zabezpieczyć. Najprostszym sposobem jest liczenie ile razy dany gracz nacisnął swój przycisk. Jeżeli liczba ta to na przykład 50 to wtedy wiemy że oszukuje. Tak naprawdę nie ma powodu, aby uczciwy gracz nacisnął swój przycisk więcej niż 3 razy, ponieważ tyle przewidzieliśmy rund.

Zmienne

Widzimy już, jak po kolei będzie działała nasza gra. Znając te kroki, przechodzimy do analizy, jakich zmiennych będziemy potrzebowali. W zmiennych będziemy chcieli trzymać różne informacje o stanie naszej gry, na przykład który gracz ile ma punktów.

Jak widzisz wiele zmiennych swoją wartość uzależnia od wartości innych zmiennych. Robię tak dlatego, żeby ograniczyć liczbę miejsc, w których będzie konieczna zmiana jeżeli zdecyduję, że na przykład rund ma być nie 3 a 10. Dzięki takiej konstrukcji zmiennych  wystarczy, że zmienię wartość zmiennej “liczbaRund” i wszystkie inne, które od niej zależą i musiałbym zmieniać je ręcznie same się automatycznie “dostosują” do nowych wymagań 🙂

Przebieg

Ostatnim krokiem w tym etapie jest rozrysowanie logiki. W grach przeważnie stosuje się tak zwaną główną pętlę, w której w każdym kroku (powiedzmy co 10 mili sekund) następuje przeliczenie wszystkich zmiennych, obsługa zdarzeń gracza i odświeżenie ekranów. W naszym przypadku, przy tak prostej grze, ta główna pętla nie jest konieczna i możemy całą mechanikę obsłużyć dużo prościej.

Tak wygląda mój rysunek, który najpierw zrobiłem na kartce papieru a potem na potrzeby tego wpisu na stronie https://www.draw.io/. Osobiście każdy projekt zaczynam od kartki papieru i długopisu.

Po tym kroku mamy już praktycznie rozpisaną mechanikę naszej gry, wiemy jakich zmiennych będziemy potrzebować oraz gdzie i na jakie wartości je ustalać. W tym momencie możemy przejść już do programowania. Zajmiemy się tym w kolejnym poście. Zobaczysz, że bardzo często taka analiza na kartce papieru stanowi większą część całego projektu, potem oprogramowanie tej logiki zajmie mniej czasu i będzie łatwiejsze niż gdybyśmy pominęli ten etap analizy.