Spiel-Komponenten

Fügen Sie in das Spielgebiet einen roten Quadrat hinzu:

Komponenten hinzufügen

Erstellen Sie einen Komponenten-Konstruktor, der es Ihnen ermöglicht, Komponenten in das Spielgebiet hinzuzufügen.

Dieser Objekt-Konstruktor wirdKomponente (component)， wir haben den ersten Komponenten erstellt, benannt myGamePiece:

Beispiel

var myGamePiece;
function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
}

Selbst ausprobieren

Diese Komponenten besitzen Eigenschaften und Methoden zur Kontrolle ihres Erscheinungsbilds und ihrer Bewegung.

Frame

Um sicherzustellen, dass das Spiel bereit für Bewegungen ist, aktualisieren wir die Anzeige 50 Mal pro Sekunde, was sehr ähnlich ist wie die Frames in einem Film.

首先，创建一个名为 updateGameArea() neue Funktion. Zunächst, erstellen Sie eine Funktion namens

in myGameArea in das Objekt hinzu, die alle 20 Millisekunden ausgeführt wird updateGameArea() Funktion (50 Mal pro Sekunde). Und fügen Sie eine Funktion namens clear(); der Funktion, die das whole Canvas löscht.

in component Im Konstruktor wurde eine Funktion namens update() der Funktion, die das Zeichnen des Komponenten behandelt.

updateGameArea() Funktionsaufrufe clear(); und update() Methode.

Das Ergebnis ist, dass die Komponente jede Sekunde 50 Mal gezeichnet und gelöscht wird:

Beispiel

var myGameArea = {
  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]);
    this.interval = setInterval(updateGameArea, 20);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.update();
}

Selbst ausprobieren

Lassen Sie es bewegen

Um zu beweisen, dass der rote Quadrat jede Sekunde 50 Mal gezeichnet wird, ändern wir bei jedem Update des Spielbereichs die x-Position (horizontal) um einen Pixel:

Beispiel

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

Selbst ausprobieren

Warum sollte der Spielbereich bereinigt werden?

Es scheint nicht notwendig zu sein, den Spielbereich bei jedem Update zu bereinigen. Allerdings, wenn wir clear(); Methode: Alle Bewegungen des Komponenten hinterlassen Spuren ihrer Position im letzten Frame:

Beispiel

function updateGameArea() {
  // myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

Selbst ausprobieren

Ändern Sie die Größe

Sie können die Breite und Höhe der Komponente steuern:

Beispiel

Erstellen Sie ein 10x140 Pixel großes Rechteck:

function startGame() {
  myGameArea.start();
  myGamePiece = new component(140, 10, "red", 10, 120);
}

Selbst ausprobieren

Ändern Sie die Farbe

Sie können die Farbe der Komponente steuern:

Beispiel

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "blue", 10, 120);
}

Selbst ausprobieren

Sie können auch andere Farbwerte verwenden, z.B. Hexadezimal, rgb oder rgba:

Beispiel

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}

Selbst ausprobieren

Ändern Sie den Ort

Wir verwenden die x- und y-Koordinaten, um die Komponenten im Spielbereich zu positionieren.

Die Koordinaten des linken oberen Ecks des Canvas sind (0,0).

Bewegen Sie den Mauszeiger über den folgenden Spielbereich, um die x- und y-Koordinaten anzuzeigen:

Sie können die Komponenten an jeder beliebigen Position im Spielbereich platzieren:

Beispiel

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
}

Selbst ausprobieren

Mehrere Komponenten

Sie können eine beliebige Anzahl von Komponenten im Spielbereich platzieren:

Beispiel

var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
  redGamePiece = new component(75, 75, "red", 10, 10);
  yellowGamePiece = new component(75, 75, "yellow", 50, 60);
  blueGamePiece = new component(75, 75, "blue", 10, 110);
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

Selbst ausprobieren

Bewegte Komponente

Bewegen Sie die drei Komponenten gleichzeitig in verschiedene Richtungen:

Beispiel

function updateGameArea() {
  myGameArea.clear();
  redGamePiece.x += 1;
  yellowGamePiece.x += 1;
  yellowGamePiece.y += 1;
  blueGamePiece.x += 1;
  blueGamePiece.y -= 1;
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

Selbst ausprobieren