Exemple de création d'un jeu spatial à l'aide des astuces du didacticiel html5 canvas_html5

HTML5 Canvas peut créer rapidement des images légères qui facilitent le développement de jeux. Cette section explique comment utiliser Canvas pour créer un jeu de vol spatial de style rétro qui s'exécutera sur une page Web. Ce jeu est principalement conçu pour démontrer les principes de base du développement de jeux Web à l'aide de la fonctionnalité Canvas. Le but de ce jeu spatial est de ramener votre vaisseau spatial à la base en toute sécurité à travers un champ d'étoiles jonché d'astéroïdes explosifs.
Ce tutoriel contient le code complet pour exécuter le jeu. Le code est écrit à l'aide de HTML5 Canvas et de JavaScript et contient quatre exemples de code annotés distincts. Chaque exemple implique une tâche de programmation clé nécessaire au développement d'un aspect différent du jeu. Le quatrième exemple de code combine toutes les tâches pour créer un jeu entièrement fonctionnel dans lequel vous utilisez les touches fléchées pour déplacer votre vaisseau à travers un labyrinthe de champs d'étoiles parsemés d'astéroïdes rouges explosifs. Si votre vaisseau heurte une planète, celui-ci sera détruit. Pour rentrer à la base en toute sécurité, vous devez éviter les astéroïdes ou les faire exploser avant de les heurter. Les points sont attribués en fonction du nombre de fois que vous déplacez votre vaisseau et du nombre de bombes que vous lancez.
Cette rubrique comprend un exemple de code annoté autonome qui vous montre comment utiliser HTML5 Canvas et JavaScript pour créer une zone aléatoire d'étoiles blanches et dessiner un vaisseau spatial orange et vert en forme de frisbee. Cette image de jeu a été créée à l'aide de pixels. En mode immédiat, Canvas a la possibilité de placer des pixels directement sur l'écran. Cette fonctionnalité vous permet de dessiner facilement des points, des lignes et des formes à l'emplacement souhaité et dans la couleur de votre choix. Cet exemple de code vous montre comment créer un vaisseau spatial en combinant des courbes mathématiques de Bézier et des couleurs dans des formes. Il expliquera ensuite comment dessiner des étoiles à l'aide de petits cercles constitués d'arcs.
Cet exemple de code contient les tâches suivantes pour démontrer les principes de base de l'utilisation de Canvas pour dessiner ces éléments de jeu :
1. Ajouter un élément Canvas à la page Web
2. Créer un fond noir
3 . Dessinez des étoiles aléatoires sur l'arrière-plan
4. Ajoutez un vaisseau spatial à l'arrière-plan
À la fin de l'exemple de code se trouve un matériel de discussion expliquant les détails de la conception et de la structure de ces missions et de leur fonctionnement.
Exemple de code Canvas :

Copier le code

Le code est le suivant :

畫布太空遊戲

Canvas 程式碼範例討論

本節說明本程式​​碼範例的設計和結構。它為您講解程式碼的不同部分，以及整合它們的方式。 Canvas 範例使用標準 HTML5 標頭，方便瀏覽器可以將其作為 HTML5 規格的第一部分區別。

程式碼共用兩個主要部分：

1.主體程式碼

2.腳本程式碼

主體程式碼

在頁面載入時，主體標記使用onload函數呼叫canvasSpaceGame函數。 Canvas標記是主體的一部分。指定了Canvas的頭部寬度和高度，也指定了ID屬性。必須使用ID，才能將canvas將元素加入到頁面的物件模型中。

腳本程式碼

腳本程式碼包含三個函數：canvasSpaceGame、stars 和 makeShip。載入頁面時將呼叫 canvasSpaceGame 函數。 stars 和 makeShip 都是從 canvasSpaceGame 呼叫的。

canvasSpaceGame 函數

載入頁面時將呼叫此函數。它透過在主體程式碼中使用 Canvas 元素 ID 來獲取氧氣，然後獲取氧氣的上下文，並準備好接受地形。將氫氣初始化為 2D 以後，使用fillStyle、rect和fill方法將膚色亮度為黑色。

stars 函數

此函數是從 canvasSpaceGame 呼叫的。它使用 for 迴圈在二維平面上產生 50 個潛在的星星位置，然後使用 fillStyle 創建白色。夏威夷，會進行一次檢查，確認 x, y 座標是否與左上角接近。如果星星不一致得與左上角接近，則將填滿樣式變更為黑色，設定不會打斷宇宙座標。座標，使用弧方法相等每個星星並使用對應的填充顏色

makeShip
這個函數是從canvasSpaceGame呼叫的。使用一系列的beginPath、moveTo、bezierCurveTo、closePath、fillStyle和fill方法，相當於一台簡單的太空船。
飛船是透過相當於兩個飛船的飛船來實現的。首先在 Adob​​e Illustrator CS5 中建立一個，然後使用 Ai2Canvas 外掛程式將影像匯出到 Canvas。產生的 Canvas 程式碼已複製並貼上到此範例的程式碼中。