Twoja przeglądarka nie wspiera Canvas!

Gra Breakout 2D przy użyciu JavaScript

Gra kwiecień 2018

W tym samouczku "krok po kroku" stworzymy prostą grę MDN Breakout napisaną całkowicie w czystym JavaScripcie i renderowaną w HTML5 <canvas>.
URL:
https://canvas-2d.blogspot.com/2018/04/gra-breakout-2d-przy-uzyciu-javascript.html
Autor:
Paweł Boksa

Każdy krok ma fragmenty, z możliwością edytowania, którymi możesz się pobawić, aby zobaczyć jak wyglądają poziomy średnio-zaawansowane. Nauczysz się podstaw używania elementu <canvas>, aby zaimplementować fundamentalne mechaniki gry takie jak: renderowanie i przesuwanie obrazów, detekcja kolizji, mechanizmy sterowania i średnie wygranych i przegranych.
Aby zrozumieć jak najwięcej z tej serii artykułów, twoja wiedza o JavaScripcie powinna być na poziomie między podstawową, a średnio-zaawansowaną. Po przejściu tego samouczka, powinieneś być w stanie tworzyć własne, proste gry internetowe.


Szczegóły lekcji

Wszystkie lekcje - oraz inne wersje gry MDN Breakout, które wspólnie tworzymy - są dostępne na GitHub:

  1. Stworzenie Canvas i rysowanie na nim.
  2. Poruszanie kulką.
  3. Odbijanie się od ścian.
  4. Sterowanie klawiaturą.
  5. Koniec gry.
  6. Budowanie pola cegieł.
  7. Detekcja kolizji.
  8. Śledzenie wyniku i wygranych.
  9. Sterowanie myszką.
  10. Na zakończenie.

Zaczynając od czystego JavaScriptu to najlepszy sposób na zdobycie solidnej wiedzy o tworzeniu gier internetowych. Następnie możesz wybrać dowolną ramkę wedle uznania i użyć jej w swoich projektach. Ramki są po prostu narzędziami wbudowanymi z językiem JavaScript, więc nawet, jeśli planujesz na nich pracować, dobrze będzie najpierw nauczyć się samego języka, aby wiedzieć o co dokładnie chodzi.
Ramki przyspieszają czas tworzenia i pomagają zająć się nudnymi częściami gry, ale jeśli coś nie działa tak jak się spodziewałeś, możesz zawsze spróbować to zdebugować lub po prostu napisać własne rozwiązania w czystym JavaScripcie.
Uwaga: Jeśli jesteś zainteresowany nauką o tworzeniu gier internetowych 2D używając biblioteki gier, skonsultuj się z odpowiednikiem tej serii, 2D gra breakout przy użyciu Phaser.
Uwaga: Ta seria artykułów może być użyta jako materiał praktyczny do warsztatów o tworzeniu gier. Możesz także  skorzystać z Pakietu Zasobów Gamedev Canvas opartego na tym samouczku, jeśli chcesz opowiedzieć ogólnie o tworzeniu gier...

Na podstawie:
https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

Szukaj

Kurs

Wstęp
Kolorowe prostokąty
Wyrażenia
Instrukcje
Kolorowe linie
Funkcje
Obiekty
Transformacje
Fraktale
Animacje
Interakcje
Indeks