Spiel-Canvas

Das HTML <canvas>-Element wird auf der Webseite als rechteckiges Objekt angezeigt:

HTML-Canvas

<canvas> Elemente sind besonders gut geeignet, um Spiele in HTML zu entwickeln.

<canvas> Elemente bieten alle Funktionen, die für die Erstellung von Spielen erforderlich sind.

Verwenden Sie JavaScript in <canvas> zeichnen, Text schreiben, Bilder einfügen und mehr.

.getContext("2d")

<canvas> Element verfügt über ein internes Objekt namens getContext("2d") Objekt, das Methoden und Eigenschaften für die Zeichnung bereitstellt.

Sie können in unseren Canvas-Tutorial erlernen Sie mehr über <canvas> Elemente und getContext("2d") weitere Informationen über das Objekt.

Dann, fangen wir an

Um ein Spiel zu erstellen, erstellen Sie zunächst einen Spielbereich und bereiten Sie die Zeichnung vor:

Beispiel

function startGame() {
  meinSpielBereich.start();
}
var meinSpielBereich = {
  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]);
  }
}

selbst ausprobieren

In einem späteren Teil dieses Tutorials wird das Objekt meinSpielBereich erhält zusätzliche Eigenschaften und Methoden.

Funktion startGame() aufrufen meinSpielBereich Objekts. start() Methode.

start() Das Methode erstellt ein <canvas> Element, und als erster Kindknoten eingefügt in <body> im Element.