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.

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

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.

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.