例を理解するPhaserゲームコード

Question

Phaserのhtml 5ゲームエンジンで動作するいくつかのゲームコードを見つけました。以下の例のコード

がある

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); 

function preload() { 
    game.load.image('someKey','someUrl'); 

} 

function create() { 
} 

function update() { 
} 

私は関数宣言を参照して画像を追加することにより、ゲームオブジェクトに位相器が機能に渡して達成することが可能である方法を把握しようとしている（、プリロードを作成、および更新）よ、例えば、変数名「ゲーム」を介してオブジェクトに送信する。上記の例は、私が一般的にWeb（あるいは少なくとも類似したもの）について見たものです。

以下、私はフェイザーを模倣し、そのプロセスを理解するために自分自身のゲームエンジン（楽しみのため）に取り組み始めました。残念ながら、私は正常に上記の効果を達成することはできません。

マイEngine.js（フェイザー模倣ファイル）

function Game(holderId,canvasOptions,functionDeclarations){ 
    this.test="testing"; 
    functionDeclarations.init();//this does not work :(because game in init() is undefined. 
} 

マイMain.js

var game= new Game("canvas-holder",{width:1500,height:600, unit:"px"},{init:init,core:core,update:update}); 

function init(){ 
    console.log(game.test);//game is undefined. Seems like a scope issue 
} 

私は、これはスコープの問題で感知します。私はフェイザーのソースコードを見てみましたが、それには97k行が含まれていて、Ctrl + Fは役に立たなかったのです。

Answer 1

コードでinitはgameを使用します。 gameは、Gameコンストラクタによって定義されます。コンストラクタは、完了する前に（したがって、gameが割り当てられる前に）initを呼び出そうとします。これは、循環依存性をもたらし、は、initコールの間にundefinedになります。

この問題を解決する方法の1つは、initの実行を遅らせることです。 initへの直接呼び出しの代わりにsetTimeout(functionDeclarations.init, 0)を使用すると、コンストラクターが終了し、正しい値をgameに割り当てて、JSファイルにあるものを実行します。すべての作業が完了すると、initが呼び出され、誰もが幸せになれます。

Answer 2

Phaserコンストラクタに渡されるオブジェクトは、ゲームの状態です。 Phaserレポのsrc/core/State.jsを見て、状態ファイルの例と、各機能とプロパティが何をするかについての説明を参照してください。

私はこれを十分に言うことはできません：1つのphaser.jsファイルを読むことを試みてはいけません！代わりにレポをチェックアウトし、ファイルを1つずつ順番に調べてください。彼らは論理的かつ健全な構造をとっており、パスをたどる方がはるかに簡単です。

Phaserゲームが作成されると、DOM Readyイベントを待ちます。それを受け取ったときだけ、状態オブジェクトを実行し始め、順番に関数を呼び出します。このため、preload関数内でgameを参照することができ、スコープエラーが発生しないのは、呼び出された時点で存在するためです。

上記の例（およびPhaserサンプルサイトにあるすべてのもの）gameはグローバルなJSオブジェクトとして作成されています。サンプルコードをあまり冗長でなく、簡単にするためにこれを行うのは純粋です。プロダクションレベルのゲームでは、これを行うことはほとんどありません。プロジェクトテンプレートの「リソース」フォルダにあるPhaserリポジトリを見ると、より良い構造化された選択肢がそこにあります。