使用html5 canvas創建太空遊戲的範例_html5教學技巧

HTML5 Canvas 可以快速建立有助於遊戲開發的輕型圖片。 本部分說明如何使用 Canvas 創建將在網頁中運行的懷舊風格外太空飛行遊戲。 此遊戲的設計主要是為了展示使用 Canvas 功能開發 Web 遊戲的基本原則。 這個太空遊戲的目標是，讓您的太空船穿越分佈著爆炸小行星的星域，安全返回基地。
本教學包含運行遊戲的完整程式碼。程式碼是使用 HTML5 Canvas 和 JavaScript 編寫的，包含四個獨立的註解程式碼範例。 每個範例都涉及一項關鍵的程式設計任務，這些任務是開發遊戲的不同方面所必需的。 第四個程式碼範例將所有任務組合在一起，創建了一個完整有效的遊戲，您可以使用箭頭鍵移動飛船，穿越分佈著爆炸紅色小行星的星域迷宮。 如果您的飛船撞到行星，則將被毀壞。 為了安全返回基地，您必須避開小行星，或在您撞上小行星之前將其炸毀。 將根據您移動飛船的次數和您發射的炸彈數來進行計分。
本主題包括一個獨立的註釋程式碼範例，為您示範如何使用 HTML5 Canvas 和 JavaScript 建立包含白色星星的隨機區域，以及繪製外形像飛盤一樣的橙綠相間的太空船。 此遊戲圖像是使用像素創建的。 透過使用即時模式，Canvas 具有將像素直接放在螢幕上的能力。 此功能您能夠輕鬆地在需要的位置，以選擇的顏色繪製點、線和形狀。 此程式碼範例將為您示範如何透過在形狀中組合數學貝塞爾曲線和顏色來建立太空船。 然後，它將說明如何使用由弧形組成的小圓圈來繪製星星。
此程式碼範例包含以下任務來示範使用Canvas 繪製這些遊戲元素的基本原則：
1.在網頁上新增Canvas 元素
2.建立黑色背景
3.在背景上繪製隨機星星
4.在背景中添加太空船
程式碼範例的末尾是討論材料，說明有關這些任務的設計和結構以及工作方式的詳細資訊。
Canvas 程式碼範例:

複製程式碼

程式碼如下:

キャンバス スペース ゲーム
< /h1>

キャンバス文字数例讨论

このサンプルでは、​​キャンバスのサンプルのデザインと構造を説明しており、ブラウザがそれを HTML5 の一部として認識できるように、標準の HTML5 サンプルを使用して、それらを統合しています。

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

ホスト代コード
ホスト 面のロード時に、本体マークは onload 関数を使用して CanvasSpaceGame 関数を制御します。 Canvas マークは、本体の一部です。 Canvas の初期の高さと高さが指定され、ID プロパティも指定されます。 ID を使用する必要があり、Canvas を使用することはできません。元素は、表面のオブジェクトモデルに追加されます。

脚本

脚本には、canvasSpaceGame、stars、makeShip の 3 つの関数が含まれています。
canvasSpaceGame 関数

は、ページを追加するときにこの関数を使用します。これは、本体コード内で Canvas 元素 ID を使用して画布を取得し、その後画布の上下文を取得し、図を良好に受信できるように準備します。 fillStyle、rect、fill メソッドを使用して、画布を黄色に作成します。

stars 関数
この関数は、canvasSpaceGame から使用されます。この関数は、for ループを使用して 2 平面上で 50 個の潜在的な星の位置を生成し、その後、fillStyle を使用して白色を構築します。 y 座標が左上角に近いかどうか。星が左上角に近い場合は、宇宙船を妨げないように、fillStyle がさらに暗い色に変更される可能性があります。

makeShip

この関数は、canvasSpaceGame から使用されます。 beginPath、moveTo、bezierCurveTo、closePath、fillStyle および fill メソッドを使用して、単一の宇宙船を作成します。作成されたキャンバス コードは、最初に Adob​​e Illustrator CS5 で作成され、その後、使用される Ai2Canvas によって画像が Canvas に出力されます。