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.

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.