Jak zrobić prostą grę w JavaScript?

W tym tutorialu utworzymy prostą grę w JavaScript, z użyciem elementu Canvas.
Gra będzie polegać na kosmicznym locie i strzelaniu w statki przeciwnika. Mało oryginalne, ale od czegoś trzeba zaczać, prawda? Klasyczne pomysły są najlepsze do nauki. A więc zaczynamy.

Będziemy potrzebować:
  • edytora tekstu z kolorowaniem składni (np. Notepad++, Sublime Text oraz wiele innych)
  • grafiki (weźmiemy darmową grafikę z Internetu)
  • podstawowej znajomości języka JavaScript, oraz języków HTML i CSS.

Krok 0: Przygotowania


Załóż nowy folder i nazwij go spaceshooter.
Wejdź do folderu, utwórz w nim 3 pliki i nazwij je:

index.html - tu będzie podstawowa struktura strony w HTML
index.js - tu będzie nasz kod JavaScript
index.css - tu będą definicje stylów CSS

Do pliku index.html wklej ten kod:

Pozostałe pliki (index.js, index.css) pozostaw na razie puste.

grafika


będziemy potrzebować grafiki statku gracza:
player.png
oraz grafiki statków wroga:
ufo.png

Są to przeskalowane grafiki ze strony http://openclipart.org, na licencji public domain.

Załóż w folderze z grą podfolder "images" i wgraj do niego oba pliki (player.png, ufo.png) z linków powyżej.

struktura katalogów w tej chwili powinna wyglądać tak

KATALOG_Z_GRĄ ('spaceshooter')
  • images
    • player.png
    • ufo.png
  • index.css
  • index.html
  • index.js

To tyle na teraz, w razie problemów możesz ściągnąć gotową paczkę *.zip, w której jest cały kod wymagany do kroku zero. W następnym kroku natomiast stworzymy mechanizm ładowania obrazków do pamięci komputera (żeby później je łatwo móc wyświetlić).

Komentarze

Popularne posty z tego bloga

Ściemy z ogłoszeń o pracę

Jak nie sprawdzać wiedzy technicznej: platformy online