Fügen Sie ein rotes Quadrat auf dem Spielfeld:
Eine Komponente hinzufügen
Machen Sie eine Komponente Konstruktor, die Sie Komponenten auf die gamearea hinzufügen können.
Der Objektkonstruktor heißt component , und wir machen unsere erste Komponente, die so genannte 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);
} Die Komponenten haben Eigenschaften und Methoden, um ihre Auftritte und Bewegungen zu steuern.
Frames
Um das Spiel bereit zum Handeln machen, werden wir die Anzeige 50 Mal pro Sekunde aktualisiert werden, die ähnlich wie Frames in einem Film.
Erstellen Sie zunächst eine neue Funktion namens updateGameArea() .
Im myGameArea Objekt, fügen Sie ein Intervall , das das läuft updateGameArea() Funktion jedes 20. Millisekunden (50 times per second) . Fügen Sie auch eine Funktion namens clear() , die die gesamte Leinwand löscht.
In der component Konstruktor, fügen Sie eine Funktion namens update() , um die Zeichnung des Bauteils zu behandeln.
Die updateGameArea() Funktion ruft die clear() und update() Methode.
Das Ergebnis ist, dass das Bauteil gezogen und gelöscht wird 50 mal pro Sekunde:
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();
} Versuch es selber " Machen Sie es sich bewegen
Um zu beweisen , dass das rote Quadrat wird 50 mal pro Sekunde gezogen wird, werden wir die x - Position ändern (horizontal) um ein Pixel jedes Mal , wenn wir das Spielfeld zu aktualisieren:
Beispiel
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Versuch es selber " Warum Klar The Game Area?
Es könnte unnötig scheinen, um die Spielfläche bei jedem Update zu löschen. Wenn wir jedoch den auslassen clear() Methode, alle Bewegungen des Bauteils wird eine Spur von verlassen , wo es in den letzten Frame positioniert wurde:
Beispiel
function updateGameArea() {
//myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Versuch es selber " Ändern Sie die Größe
Sie können die Breite und Höhe der Komponente zu steuern:
Beispiel
Erstellen Sie ein 10x140 Pixel Rechteck:
function startGame() {
myGameArea.start();
myGamePiece = new
component( 10 , 140 , "red" , 10, 120);
} Versuch es selber " Ändern Sie die Farbe
Sie können die Farbe der Komponente zu steuern:
Beispiel
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "blue" , 10, 120);
} Versuch es selber " Sie können auch andere Farbwerte wie hex, RGB- oder RGBA verwenden:
Beispiel
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "rgba(0, 0, 255, 0.5)" , 10, 120);
} Versuch es selber " Ändern Sie die Position
Wir verwenden x- und y-Koordinaten-Komponenten auf den Spielbereich zu positionieren.
Die obere linke Ecke der Leinwand hat die Koordinaten (0,0)
Maus über die Spielfläche unterhalb seiner x- und y-Koordinaten, um zu sehen:
Sie können die Komponenten zu positionieren, wo Sie auf dem Spielfeld wie:
Beispiel
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "red" , 2 , 2 );
} Versuch es selber " viele Komponenten
Sie können beliebig viele Komponenten setzen, wie Sie auf dem Spielfeld wie:
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();
}
Versuch es selber " Bewegte Bauteile
Machen Sie alle drei Komponenten in unterschiedliche Richtungen bewegen:
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();
}
Versuch es selber "