Ok, pisałem, że niedługo w przedstawię pełny kod pierwszej gry. Niestety nie dziś. Postanowiłem najpierw opisać bardzo ważny aspekt programowania gier, nie tylko w języku JavaScript – Game Loop.
Początkowo, miała być to część kolejnego posta o mojej grze z kosmitami. Jednak pisząc o pętli gry, doszedłem do wniosku, że jednak dobrze byłoby poświecić tematowi osobny wpis. Prawda jest taka, że ta wiedza przyda się przy tworzeniu każdej gry.
Czym jest game loop? Po polsku Pętla Gry – jest to pętla odpowiadająca za przebieg gry 🙂 Inicjalizuje grę, aktualizuje grę i przedstawia wynik użytkownikowi. Jest to serce całej gry. To mechanizm, który sprawia, że gra toczy się dopóki, nie zostanie zakończona, czy to wygraną, czy przegraną gracza.
Może brzmi to skomplikowanie, ale uwierzcie mi, nie jest. Jest to bardzo prosta idea 🙂 A zarazem jest bardzo ważna. Game loop to coś, od czego będziecie zaczynać pisanie każdej gry.
Ok czyli jeszcze raz: Inicjalizacja, aktualizacja, przedstawienie wyników. Spójrzmy na pseudo kod, który opisałem w poprzednim poście.
|
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 |
Może game loop nie jest widoczny w tym pseudokodzie bardzo wyraźnie, ale zdecydowanie tu jest!
Inicjalizacja – ustaw grę, proste.
Aktualizacja – rozegraj rundę, sprawdź wynik.
Przedstawienie wyników – przesuń kosmitę
te czynności będą powtarzać się zapętlone, do czasu aż gra się zakończy. Najpierw program przedstawi nam grę w postaci obrazu na monitorze. Następnie, pobierze dane od użytkownika. Zaktualizuje grę o te dane. Po drodze sprawdzi czy to koniec pętli czy nie. Jeśli nie, znów przedstawi grę w obecnym stanie i tak dalej…
Ok, koniec pitolenia. Czas na trochę prawdziwego kodu JS ( w końcu!)
prosty game loop:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
setupGame(); while(!gameWon) { playGame(); gameWon = checkIfWon(); if(gameWon) { break; } else { alert("to nie konczymy"); } render(); } endGame(); function setupGame(){ alert("setting up"); } function playGame(){ alert("gramy"); } function checkIfWon() { return confirm("konczymy?"); } function endGame() { alert("koniec"); } function render() { alert("renderujemy"); } |
To jest szkielet, który może posłużyć za podstawę do budowania wielu gier. Dodajemy do tego odpowiednie dane i mamy wszystko co nam potrzeba. Właściwie, już ta gra ma bardzo ciekawy gameplay. Tak długo jak gracz, będzie klikał ok, tak długo będą wyskakiwały okienka! Ile razy dasz rade kliknąć „ok”? 🙂
Przeanalizujmy ten kod. Na początku mamy funkcję setupGame. Funkcja ta będzie ustawiała nam wszystkie zmienne, oraz elementy gry, nic specjalnego, najczęściej funkcje tę wywoływać będzie naciśnięcie przycisku „start” lub coś w ten deseń. Funkcja ta przygotuje nam „teren” do gry. Inicjalizacja.
Następnie mamy pętle while. I tu zaczyna się to o czym mówi ten post. Pętla while trwa dopóki zmienna „gameWon” jest fałszywa.
Pierwszą funkcją wywoływaną w pętli jest playGame. Ta funkcja będzie zbierać dane od gracza. Przez tę funkcje będą rejestrowane wszelkie kliknięcia i przyciskanie klawiszy na klawiaturze. Aktualizacja.
Później mamy funkcje checkIfWon. Funkcja ta będzie zwracać nam wartość true lub false i przypisywać ją do zmiennej „gameWon”.
Jeśli gameWon będzie równe true, kończymy pętle. Jeżeli nie, przedstawiamy graczowi wynik (Przedstawienie wyniku) i lecimy od nowa.
Oczywiście jest to bardzo uproszczony model, ale podstawowa idea nigdy się nie zmienia. Pojęcie jej jest bardzo ważne jeżeli chcemy zająć się programowaniem gier 🙂