Spielkomponenten
Fügen Sie dem Spielbereich ein rotes Quadrat hinzu:
Fügen Sie eine Komponente hinzu
Erstellen Sie einen Komponentenkonstruktor, mit dem Sie Komponenten zum Spielbereich hinzufügen können.
Der Objektkonstruktor heißt
component, und wir erstellen unsere erste Komponente namens 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 ihr Aussehen und ihre Bewegungen zu steuern.
Rahmen
Um das Spiel einsatzbereit zu machen, werden wir die Anzeige 50 Mal pro Sekunde aktualisieren, was den Einzelbildern in einem Film sehr ähnlich ist.
Erstellen Sie zunächst eine neue Funktion namens updateGameArea().
Fügen Sie im myGameAreaObjekt ein Intervall hinzu, das die updateGameArea()Funktion alle 20 Millisekunden (50 Mal pro Sekunde) ausführt. Fügen Sie auch eine Funktion namens hinzu clear(), die die gesamte Leinwand löscht.
Fügen Sie im componentKonstruktor eine Funktion namens hinzu
update(), um das Zeichnen der Komponente zu handhaben.
Die updateGameArea()Funktion ruft die clear()und die update()Methode auf.
Das Ergebnis ist, dass die Komponente 50 Mal pro Sekunde gezogen 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();
}
Bewegen Sie es
Um zu beweisen, dass das rote Quadrat 50 Mal pro Sekunde gezeichnet wird, ändern wir die x-Position (horizontal) jedes Mal um ein Pixel, wenn wir den Spielbereich aktualisieren:
Beispiel
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Warum den Spielbereich räumen?
Es mag unnötig erscheinen, den Spielbereich bei jedem Update zu löschen. Wenn wir die
clear()Methode jedoch weglassen, hinterlassen alle Bewegungen der Komponente eine Spur davon, wo sie im letzten Frame positioniert war:
Beispiel
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Ändern Sie die Größe
Sie können die Breite und Höhe der Komponente steuern:
Beispiel
Erstellen Sie ein 10 x 140 Pixel großes Rechteck:
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
Ä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);
}
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);
}
Ändern Sie die Position
Wir verwenden x- und y-Koordinaten, um Komponenten auf der Spielfläche zu positionieren.
Die obere linke Ecke der Leinwand hat die Koordinaten (0,0)
Bewegen Sie den Mauszeiger über den Spielbereich unten, um seine x- und y-Koordinaten anzuzeigen:
Du kannst die Komponenten beliebig auf der Spielfläche positionieren:
Beispiel
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
Viele Komponenten
Auf der Spielfläche kannst du beliebig viele Komponenten 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();
}
Bewegliche Komponenten
Lassen Sie alle drei Komponenten in verschiedene 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();
}