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.