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>.

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> 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:

1. Stwórz element Canvas i rysuj na nim
2. Move the ball
3. Bounce off the walls
4. Paddle and keyboard controls
5. Game over
6. Build the brick field
7. Collision detection
8. Track the score and win
9. Mouse controls
10. 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.

Następne kroki

Ok zaczynajmy! Przejdź do pierwszego rozdziału — Stwórz element Canvas i rysuj na nim.