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
Copyright © 2018 Obowiązują zasady odpowiedzialności karnej, znaków towarowych i zasad W3C.
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:- Stworzenie Canvas i rysowanie na nim.
- Poruszanie kulką.
- Odbijanie się od ścian.
- Sterowanie klawiaturą.
- Koniec gry.
- Budowanie pola cegieł.
- Detekcja kolizji.
- Śledzenie wyniku i wygranych.
- Sterowanie myszką.
- 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