Das simpleGame

Motor Szene Objekt verwendet eine der aufregendsten neuen Funktionen von HTML5 - die Leinwand-Tag. Dieses aufregende Tag ermöglicht es Ihnen, Bilder und andere Elemente direkt auf einem Abschnitt des Browsers zu ziehen.

Ein kurzer Blick auf ein Spiel Leinwand

Hier ist eine einfache Seite eine Leinwand mit zwei Rechtecke und ein Bild angezeigt wird.

  
Grund Canvas Demo
Ihr Browser unterstützt nicht die Leinwand-Tag ...

Grund Leinwand Zeichnung für Ihr Spiel

Die Leinwand-Tag ist ein HTML-Tag, aber es ist in erster Linie als Platzhalter in HTML verwendet. Die Leinwand-Tag hat eine KontextAttribut, das der Programmierer Grafiken ermöglicht direkt auf der Seite zu ziehen. Hier ist, wie dieses Beispiel funktioniert:

1. Fügen Sie dem HTML-Tag eine Leinwand.

   Normalerweise finden Sie eine Leinwand-Tag im HTML erstellen, aber die simpleGame Bibliothek fügt automatisch eine Leinwand-Tag und hängt ihn an das Ende der Seite Körper.

2. Erstellen Sie eine Funktion zum Zeichnen.

   In diesem Beispiel wird die Leinwand in Abhängigkeit gezogen aufgerufen, wenn die Seite anfangs lädt. Im simpleGame, die Zeichenfunktion wird 20 Mal pro Sekunde aufgerufen werden.

3. Holen Sie sich eine Zeichnung Kontext.

   Die Leinwand-Tag unterstützt eine 2D-Zeichnung Kontext (ja, 3D kommt, aber es ist noch nicht weit unterstützt). Verwenden Sie die getContext () Methode, um eine Bezugnahme auf die Zeichnung Kontext zu machen.

4. Erstellen Sie einen javascript Image Objekt.

   Elf Objekte in der simpleGame Bibliothek sind auf javascript Bilder basieren. Beginnen Sie damit, eine Schaffung Image Objekt in javascript.

5. Stellen Sie die Quelle-Attribut des Bildes.

   So verknüpfen Sie eine Datei an die Image Objekt, stellen die src Eigentum der Image Objekt zu einer Bilddatei im selben Verzeichnis wie das Programm. Dies wird ein Bild mit Ihrem Dokument verknüpfen, aber das Bild wird nicht auf dem seiten- stattdessen gezogen werden, die im Speicher gespeichert ist im Code verwendet werden.

6. Stellen Sie den Füllstil.

   Sie können mit der Leinwand-Tag gefüllt und offene Zeichnungen zeichnen. Das fillStyle können sowie Muster und Verläufe Farben eingestellt werden.

7. Erstellen Sie Rechtecke.

   Sie können ein offenes Rechteck mit dem Unentschieden strokeRect () Verfahren und ein festes Rechteck mit der fillRect () Verfahren. In dem simpleGame Bibliothek, die Szene Objekt klar() Verfahren zieht einfach ein gefülltes Rechteck in die Hintergrundfarbe der Szene.

8. Zeichnen Sie das Bild in der Leinwand.

   Verwenden Sie die drawImage () Verfahren ein Bild innerhalb einer Leinwand zu zeichnen. Es gibt viele Variationen dieser Methode, aber die eine verwendet, in simpleGame gibt die Position und Größe des Bildes.