ゲーム：公海での戦い、パート1

この記事では、シンプルなHTML5ゲームであるSeaBattleを紹介し、Webページに埋め込まれ、そのアーキテクチャの概要を示しています。 Chrome、Firefox、Internet Explorer 9、Opera 12、およびSafari 5でプレイ可能なSeaBattleは、深度電荷と魚雷を使用して潜水艦と戦う駆逐艦を特徴としています。 ゲームは、いずれかの戦闘員が破壊されるまで続き、再起動時にスコアをリセットします。

図1：SeaBattleのタイトル画面は、プレイヤーにリターンキーから始めるように促します。 ゲームプレイ（図2）は、星空の背景に対する駆逐艦を示しており、現在および高得点を表示します（ローカルストレージから）。駆逐艦の生活は画像で示されています。 プレイヤーは船尾のキーを使用して、魚雷を回避し、宇宙船を発射して深さの料金を発射します。 潜水艦を打つと、100ポイントスコアを獲得し、超過した場合はハイスコアを更新します。駆逐艦または潜水艦のいずれかが破壊されたときにゲームは終了し、勝ち/失いメッセージが表示されます。

図2：駆逐艦対潜水艦。深さの電荷と魚雷のサイズは、明確にするために誇張されています

海鳥の埋め込み：

SeaBattleはSeaBattle.js、Jquery、およびJQuery Hotkeysプラグインを使用します（パート2で詳細）。 リスト1は、Webページに含めることを示しています。 リスト2では、スムーズなアニメーションに

を使用して、初期化とゲームループを示しています（サポートがないブラウザーの場合は

）。

関数はキャンバスをセットアップし、リソースをロードします。はゲームロジックを処理し、キャンバスを再描画します。

SeabattleのJavaScriptアーキテクチャ：

requestAnimationFrame setIntervalSeaBattleオブジェクト（リスト3）には、init()、update()、およびdraw()のAPIが搭載されています。 内部の擬似コンスタントは、ゲーム状態（init、タイトル、プレイ、ウィンローズ、再起動）および制限（max_dc、max_torp）を管理します。 関数は、リソースの負荷（）、オブジェクトの作成（makedepthcharge、makeexplosion、makehip、ma​​keub、maketorpedo）、乱数生成（

）、およびhtml5ストレージチェック（）を処理します。 。

結論：init()update() draw()SeaBattleは、オーディオ、キャンバス、およびWebストレージAPIを使用してHTML5ゲーム開発を紹介します。 将来の部分は、その機能をより深く掘り下げます allResourcesLoaded()intersects()

このセクションは、HTML5ゲーム記事のコアコンテンツとは無関係であるため、書き換えられた出力で省略されています。 それを追加すると、応答の焦点と長さが大幅に変更されます。 WordPress統合の質問に対処する別の回答が必要な場合は、それらを別のプロンプトとして提供してください。

以上がゲーム：公海での戦い、パート1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。