HTML5 を使用して、単一画面の小さなゲームを作成しました。今回は、メニュー、ゲーム、結果画面など、複数の画面を持つものを作ろうとしています。これを実装する方法がわかりません。
ゲームはクイズであり、質問によっては、一部のクイズ画面にテキスト、オーディオ、またはビデオを表示する必要がある場合があります (ハードコードされていません。データベースからのものです)。このため、安定性が心配です。これらの画面を HTML5 で実装するにはどうすればよいですか? また、ゲームを安定させるにはどうすればよいですか?
実装している画面のアイデアを示すために、画面フロー図を含めました。
私のゲームでは、「状態」システムを使用しています。各画面を状態と見なします。
実際には、状態は画面だけでなく、複数の画面になることもあります (「クリックしてプレイ」サブ状態、「プレイ中」サブ状態、および「負け/勝ち」を含む「ゲームをプレイ」状態など)。サブステート。
各状態は、プロパティ、メソッド、スプライトなどを持つクラスです。各状態は、「setImage」、「render」、「processKeyboard」などのメソッドをカプセル化します。
アプリのメイン クラスは、すべてのイベント (キーボード、マウス、ディスプレイ、スプライト シートの読み込み) を処理し、それらを現在の状態にディスパッチします。現在の状態を変更したい場合は、メインクラスの「setCurrentState」を呼び出します。
さて、メイン クラスはアプリケーションの中心点であり、すべての状態は単なるプラグインです。このようにして、新しい状態を簡単に追加できます。
完璧なテンプレートを得るには、ワークフロー エンジンも必要ですが、これは大規模なゲームにより適しています...おそらく、アプリにそのような大きな機能は必要ありません。
キャンバスの場合は完璧です。ロード状態はデフォルトです。メインクラスがスプライトシート画像をロードしている間に、「ロード中」のテキストをレンダリングします。すべての画像が読み込まれると、メイン クラスは「ホームページ」状態に切り替わります。「ホームページ」状態には、独自のメソッド、ボタンなどがあります...
cgSceneGraph を使用した例を見ることができます (ただし、フレームワークの有無にかかわらず、すべての開発でデザインは同じである必要があります): http://gwennaelbuchet.github.com/cgSceneGraph/examples/05_Game_CatchTheFlowers/js/class.main. js (ここ の例へのリンク、「Game : Catch them all」を選択)。テンプレート peoject (前のゲームで使用) のコードは、こちらの GitHubにあります: https://github.com/GwennaelBuchet/cgSceneGraph/tree/master/examples/TEMPLATE_GAME
実装の詳細についてはお気軽にお問い合わせください。喜んでお手伝いします:)