Kanvas gry

HTML <canvas> element jest wyświetlany na stronie jako prostokątny obiekt:

HTML Canvas

<canvas> elementy <canvas> HTML są bardzo dobrze nadające się do tworzenia gier w HTML.

<canvas> element dostarcza wszystkich funkcji potrzebnych do tworzenia gier.

Użyj JavaScript w <canvas> rysowanie, pisanie tekstu, wstawianie obrazów itp.

.getContext("2d")

<canvas> element ma wbudowany obiekt nazywany getContext("2d") obiekt, który dostarcza metody i właściwości do rysowania.

Możesz nauczyć się więcej o Kursykanwa Canvas naucz się więcej o <canvas> elementy i getContext("2d") Więcej informacji o obiektach.

Zacznijmy więc

Aby stworzyć grę, najpierw utwórz obszar gry i przygotuj się do rysowania:

instancja

funkcjaRozpocznijGre() {
  twójObszarGry.rozpocznij();
}
twójObszarGry = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  }
}

spróbuj sam

W późniejszej części tego przewodnika, obiekt mojeDzielnicaGry uzyskają więcej właściwości i metod.

funkcja rozpocznijGre() wywołanie mojeDzielnicaGry obiektu. start() metoda.

start() Metoda utworzyła <canvas> element, i jako pierwszy węzeł wstawiony do <body> w elemencie.