Beispiel für die Erstellung eines Weltraumspiels mit HTML5-Canvas_HTML5-Tutorial-Tipps

HTML5 Canvas kann schnell leichte Bilder erstellen, die die Spieleentwicklung unterstützen. In diesem Abschnitt wird erläutert, wie Sie mit Canvas ein Weltraumflugspiel im Retro-Stil erstellen, das auf einer Webseite ausgeführt wird. Dieses Spiel dient in erster Linie dazu, die Grundprinzipien der Entwicklung von Webspielen mithilfe der Canvas-Funktion zu demonstrieren. Das Ziel dieses Weltraumspiels ist es, Ihr Raumschiff sicher durch ein Sternenfeld voller explodierender Asteroiden zurück zur Basis zu bringen.
Dieses Tutorial enthält den vollständigen Code zum Ausführen des Spiels. Der Code wurde mit HTML5 Canvas und JavaScript geschrieben und enthält vier separate kommentierte Codebeispiele. Jedes Beispiel beinhaltet eine wichtige Programmieraufgabe, die zur Entwicklung eines anderen Aspekts des Spiels erforderlich ist. Das vierte Codebeispiel kombiniert alle Aufgaben zu einem voll funktionsfähigen Spiel, in dem Sie Ihr Schiff mit den Pfeiltasten durch ein Labyrinth aus Sternenfeldern bewegen, die mit explodierenden roten Asteroiden übersät sind. Wenn Ihr Schiff einen Planeten trifft, wird es zerstört. Um sicher zur Basis zurückzukehren, müssen Sie Asteroiden ausweichen oder sie in die Luft jagen, bevor Sie sie treffen. Punkte werden basierend darauf vergeben, wie oft Sie Ihr Schiff bewegen und wie viele Bomben Sie abfeuern.
Dieses Thema enthält ein eigenständiges, mit Anmerkungen versehenes Codebeispiel, das Ihnen zeigt, wie Sie mit HTML5 Canvas und JavaScript einen zufälligen Bereich aus weißen Sternen erstellen und ein orange-grünes Raumschiff in Form eines Frisbee zeichnen. Dieses Spielbild wurde mit Pixeln erstellt. Im Sofortmodus hat Canvas die Möglichkeit, Pixel direkt auf dem Bildschirm zu platzieren. Mit dieser Funktion können Sie ganz einfach Punkte, Linien und Formen an der gewünschten Stelle und in der Farbe Ihrer Wahl zeichnen. Dieses Codebeispiel zeigt Ihnen, wie Sie ein Raumschiff erstellen, indem Sie mathematische Bezier-Kurven und Farben in Formen kombinieren. Anschließend wird erklärt, wie man Sterne zeichnet, indem man kleine Kreise aus Bögen verwendet.
Dieses Codebeispiel enthält die folgenden Aufgaben, um die Grundprinzipien der Verwendung von Canvas zum Zeichnen dieser Spielelemente zu demonstrieren:
1. Fügen Sie der Webseite ein Canvas-Element hinzu
2. Erstellen Sie einen schwarzen Hintergrund
3 . Zeichnen Sie zufällige Sterne auf den Hintergrund
4. Fügen Sie ein Raumschiff zum Hintergrund hinzu
Am Ende des Codebeispiels finden Sie Diskussionsmaterial, in dem Details zum Design und zur Struktur dieser Missionen sowie zu deren Funktionsweise erläutert werden.
Canvas-Codebeispiel:

Code kopieren

Der Code lautet wie folgt:

Canvas Space Game
< /h1>

Toile 代码示例讨论

本节说明本代码示例的设计和结构. Il s'agit d'une page HTML5 et d'une page HTML5. 。

代码分成两个主要部分：
1.主体代码
2.脚本代码

主体代码
在页面加载时，主体标记使用 onload 函数调用 canvasSpaceGame 函数。 Canvas 标记是主体的一部分。 指定了 Canvas 初始宽度和高度，还指定了 ID 属性。 必须使用 ID，才能将 canvas元素添加到页面的对象模型中。

脚本代码
脚本代码包括三个函数： canvasSpaceGame, stars et makeShip.从 canvasSpaceGame 调用的。

canvasSpaceGame 函数
加载页面时将调用此函数。 它通过在主体代码中使用 Canvas 元素 ID 来获取画布， 然Il s'agit d'un modèle 2D,使用 fillStyle、rect et fill 方法将画布绘制为黑色。

étoiles 函数
此函数是从 canvasSpaceGame 调用的。 它使用 for loop 在二维平面上生成 50 个潜在的星星位置，然后使用 fillStyle 创建白色。 随后，会进行一项检查，确认 x, y 坐标是否与左上角过于靠近.会妨碍宇宙飞船。 随后，使用 arc 方法绘制每个星星并使用相应的填充颜色。
makeShip
此函数是从 canvasSpaceGame 调用的。 Il s'agit de beginPath、moveTo、bezierCurveTo、closePath、fillStyle et fill 方法，绘制一个简单的宇宙飞船。
飞船是通过绘制两个椭圆Il s'agit d'Adobe Illustrator CS5 qui utilise Ai2Canvas pour Canvas.生成的 Canvas 代码已复制并粘贴到此示例的代码中。