html5 を使用した宇宙ゲームの作成例 Canvas_html5 チュートリアルのヒント

HTML5 Canvas では、ゲーム開発に役立つ軽量の画像をすばやく作成できます。 このセクションでは、Canvas を使用して、Web ページで実行されるレトロなスタイルの宇宙飛行ゲームを作成する方法を説明します。 このゲームは主に、キャンバス機能を使用した Web ゲーム開発の基本原則を示すことを目的として設計されています。 この宇宙ゲームの目標は、爆発する小惑星が散乱する星空を通って、宇宙船を安全に基地に帰還させることです。
このチュートリアルには、ゲームを実行するための完全なコードが含まれています。このコードは HTML5 Canvas と JavaScript を使用して記述されており、注釈付きの 4 つの個別のコード例が含まれています。 各例には、ゲームのさまざまな側面を開発するために必要な主要なプログラミング タスクが含まれています。 4 番目のコード例では、すべてのタスクを組み合わせて完全に機能するゲームを作成します。このゲームでは、矢印キーを使用して、爆発する赤い小惑星が点在する星空の迷路の中を船を移動します。 あなたの船が惑星に衝突すると、それは破壊されます。 安全に基地に戻るには、小惑星を避けるか、衝突する前に小惑星を爆破する必要があります。 船を移動した回数と爆弾を発射した数に応じてポイントが付与されます。
このトピックには、HTML5 Canvas と JavaScript を使用して白い星のランダムな領域を作成し、フリスビーのような形のオレンジと緑の宇宙船を描画する方法を示すスタンドアロンの注釈付きコード例が含まれています。 このゲーム画像はピクセルを使用して作成されています。 Canvas はイミディエイト モードを使用して、画面上にピクセルを直接配置することができます。 この機能を使用すると、点、線、図形を任意の位置と色で簡単に描くことができます。 このコード例では、数学的なベジェ曲線と図形内の色を組み合わせて宇宙船を作成する方法を示します。 次に、円弧で作られた小さな円を使って星を描く方法を説明します。
このコード サンプルには、Canvas を使用してこれらのゲーム要素を描画する基本原則を示す次のタスクが含まれています。
1. Web ページに Canvas 要素を追加します
2. 黒の背景を作成します
3背景にランダムな星を描画します
4. 背景に宇宙船を追加します
コード例の最後には、これらのミッションの設計と構造、およびそれらがどのように機能するかについての詳細を説明するディスカッション資料があります。
キャンバス コードの例:

コードをコピー

コードは次のとおりです:

キャンバス スペース ゲーム
< /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 に出力されます。