Jak stworzyć prostą grę w JavaScript? (kontynuacja - krok 1)

W poprzedniej części stworzyliśmy podstawową strukturę plików potrzebnych do naszej gry. W tej części zaczniemy już programować naprawdę, tworząc kod potrzebny do załadowania obrazków.

Następnie (w dalszych częściach tutorialu) skorzystamy z obiektu <canvas>, który będzie naszym takim "płótnem" do rysowania grafiki. Wtedy to właśnie będziemy mogli załadowane uprzednio obrazki wyświetlić na ekranie komputera (za pomocą funkcji drawImage).

Teraz jednak wróćmy do ładowania obrazków.

Uwaga: Jeśli jesteś trochę bardziej zaawansowanym użytkownikiem i nieobcy ci jest koncept image preloadera, proponuję, żebyś przeskoczył od razu do kodu, zamiast czytać łopatologiczne, i być może nudne, wprowadzenie teoretyczne ;)

W idealnym świecie jeśli mielibyśmy do załadowania 10 plików graficznych z Internetu, załadowalibyśmy najpierw pierwszy plik z listy, później drugi, później trzeci, aż w końcu przystąpiliśmy do załadowania dziesiątego pliku.

Niestety nie żyjemy w idealnym świecie. Problem jest taki, że nie wszystkie obrazki się ładują w tym samym czasie i tak samo szybko:



Nie mamy nad tym kontroli. W momencie kiedy przypisujemy odpowiedni adres do obrazka (np. img.src = "nasza-grafika.jpg"), przeglądarka automatycznie zaczyna (dopiero zaczyna!) pobierać odpowiedni zasób z Internetu (albo z dysku twardego w trybie offline. Ewentualnie z cache). Odbywa się to w tle, niezależnie od funkcji w naszym skrypcie. My tylko możemy przypisać grzecznie atrybut "src" i biernie czekać. Możemy sobie przypisać 10 adresów url "które mają się załadować" ale to nie znaczy, że one będą dostępne od razu, natychmiast.

Dlatego wymyślono zdarzenia. W momencie kiedy przeglądarka załaduje obrazek, odpali się zdarzenie onload, które automatycznie wywoła naszą funkcję i odpali nasz kod. Tym sposobem będziemy mogli wychwycić moment, kiedy dany obrazek zostanie faktycznie załadowany. Zliczając liczbę załadowanych obrazków, będziemy mogli wychwycić moment, kiedy wszystkie obrazki zostaną załadowane. Wtedy zwycięstwo! Wszystkie obrazki załadowane, pokonaliśmy smoka, możemy przejść dalej.

Najpierw, stworzymy zmienną, w której będziemy trzymać nasze obrazki:

var images = {};

jest to zwykły obiekt JavaScript, ale użyjemy go jako tzw. hasha/słownika/tablicy asocjacyjnej (w JS każdy obiekt jest hashem i zachowuje się podobnie jak tablice asocjacyjne z PHP). Będziemy się później odwoływać do tej zmiennej poprzez typ obiektu, np.: images['player'], albo images['ufo']

następnie stworzymy szkielet kilku potrzebnych funkcji:



oraz, następuje clou programu, musimy wczytać obrazki. Podstawowy kod do wczytywania obrazków to:


Jednak to nam niewiele da, ponieważ
  • nie wychwytujemy zdarzenia onload więc nie możemy wychwycić momentu, kiedy dany obrazek się załadował (i nie możemy zliczyć, kiedy wszystkie grafiki się załadowały)
  • nie zapisujemy na razie nigdzie tych obrazków (a przecież przygotowaliśmy do tego celu zmienną images...)

Dlatego musimy zmodyfikować lekko naszą funkcję i dodać wspomniane rzeczy:


składając wszystko do kupy...


Twój plik index.js powinien wyglądać teraz tak:


Jak pewnie zauważyłeś, dodaliśmy 3 linijki testowe wyświetlające komunikat w konsoli (console.log). Usuniemy je w dalszej części programu. Możesz też w tym wypadku zamiast console.log użyć funkcji alert:

alert('initialize()');
alert(images['spaceship']);
alert(images['player']);

jednak wtedy komunikaty będą zawalać ekran kolejnymi okienkami, więc będzie to na dłuższą metę niewygodne.

odpalamy


Uruchom program. Jeśli wszystko będzie dobrze powinny się wyświetlić odpowiednie komunikaty.


żeby odpalić konsolę:
  • w Google Chrome: naciśnij Ctrl+Shift+J (albo Cmd+Alt+J w OSX)
  • w Firefox: naciśnij Ctrl+Shift+K
  • w Opera: naciśnij Ctrl+Shift+O

Na zakończenie


Jeśli masz problem z przejściem tego kroku, możesz ściągnąć paczkę *.zip z całym kodem programu na tym etapie.

Komentarze

  1. chrome konsola F12

    OdpowiedzUsuń
  2. tu masz listę wszystkich (do tej pory) sześciu częsci: lista części
    :)

    OdpowiedzUsuń
  3. No ale po co tyle tych samych poradnikow na stronach dodawac? skoro na 20 stronie jeden i ten sam poradnik wystepuje....

    OdpowiedzUsuń
  4. Najbardziej popularnym środowiskiem w którym można pisać gry na dzień dzisiejszy jest Unity. Jednak abyśmy mogli rozpocząć przygodę z tym programem i tworzyć w pełnie funkcjonalne gry należy pojąć programowanie w C# gdyż ten system obsługuje ten język. Możliwe, że będziemy jednak tworzyli aplikacje użytkowe jak https://craftware.pl to wtedy do nauki przyda nam się każdy język programowania, którego kod możemy wrzucić na serwer aby kompilator np. PHP go przetworzył.

    OdpowiedzUsuń
  5. jestem nowy trochę w te klocki i document jest nie zdefiniowany w jaki sposób go zdefiniować

    OdpowiedzUsuń
    Odpowiedzi
    1. Jak to nie zdefiniowany? Co się pokazuje? Powinien być zdefiniowany, bo document to zmienna, która jest dostarczona przez przeglądarkę. Może chodzi raczej o to, że $ (znak dolara) jest niezdefiniowany? (co pokazuje konsola błędów?) W tym przykładzie użyłem biblioteki jQuery, którą trzeba dołączyć, żeby działało. Chociaż szczerze mówiąc, jakbym miał napisać ten tutorial jeszcze raz, to pewnie w ogóle nie używałbym jQuery, bo w całym kodzie użyłem go raptem 2 razy i można by to napisać bez tej biblioteki.

      Usuń

Prześlij komentarz

Popularne posty z tego bloga

Ściemy z ogłoszeń o pracę

Jak nie sprawdzać wiedzy technicznej: platformy online

Jak zrobić prostą grę w JavaScript?