Neueste Web-Entwicklung Tutorials
 

HTML Spielmaterial


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);
}

Versuch es selber "

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:

X
Y

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 "