Gra Breakout 2D w czystym JavaScript
W tym poradniku krok po kroku stworzymy prostą grę MDN Breakout napisaną w całości w czystym języku JavaScript oraz renderowaną w elemencie HTML5 <canvas>
(en-US).
Każdy krok ma edytowalne, dostępne na żywo próbki do gry, dzięki czemu możesz zobaczyć, jak powinny wyglądać poszczególne etapy pośrednie. Nauczysz się podstaw używania elementu <canvas>
(en-US) do implementowania podstawowych mechanik gry jak renderowanie, przesuwanie grafik, wykrywanie kolizji, mechanizmu sterowania oraz stanu wygrania/przegrania.
Aby w pełni wykorzystać tę serię artykułów, powinieneś mieć już podstawową lub średnio zaawansowaną wiedzę z zakresu JavaScript. Po zakończeniu tego poradnika powinieneś być w stanie budować swoje własne proste gry Webowe.
Szczegóły lekcji
Wszystkie lekcje — oraz poszczególne wersje gry MDN Breakout którą wspólnie tworzymy — są dostępne na GitHubie:
- Stwórz element Canvas i rysuj na nim
- Move the ball
- Bounce off the walls
- Paddle and keyboard controls
- Game over
- Build the brick field
- Collision detection
- Track the score and win
- Mouse controls
- Finishing up
Zaczynanie od nauki czystego języka JavaScript jest najlepszym sposobem aby uzyskać solidną wiedzę na temat tworzenia gier webowych. Później będziesz mógł wybrać i używać dowolnego frameworka najlepiej pasującego do twoich projektów. Jednak frameworki są tylko narzędziami zbudowanymi z wykorzystaniem języka JavaScript; więc jeśli nawet planujesz pracę z ich wykorzystaniem, dobrze jest nauczyć się najpierw języka, aby później wiedzieć co własciwie dzieje się "pod maską". Frameworki przyspieszają czas tworzenia i zajmują się "nudnymi" częściami podczas pisania gry, jeśli jednak coś nie zadziała zgodnie z oczekiwaniami, zawsze możesz zdebugować lub po prostu samemu napisać własne rozwiązanie korzystając z czystego JavaScript.
Uwaga: Jeśli chcesz dowiedzieć się więcej na temat tworzenia gier internetowych 2D za pomocą bibliotek zapoznaj się z odpowiednikiem tej serii 2D breakout game using Phaser.
Uwaga: Tę serię artykułów można wykorzystać jako materiał do praktycznych warsztatów poświęconych tworzeniu gier. Możesz także skorzystać z zestawu Gamedev Canvas Content opartego na tym samouczku, jeśli chcesz wygłosić wykład nt. tworzenia gier.
Następne kroki
Ok zaczynajmy! Przejdź do pierwszego rozdziału — Stwórz element Canvas i rysuj na nim.