Beispiel Phaser Code

Question

Also bin ich auf ein Beispielspielcode gestoßen, der auf Phaser's html 5 Game Engine läuft. Unten ist der Beispielcode

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() { 
} 

Ich versuche, durch Bezugnahme auf die Funktionsdeklarationen und das Hinzufügen von Bildern in Funktionen vorbei (Vorspannung, zu erstellen und zu aktualisieren), um das Spiel-Objekt, um herauszufinden, wie Wellenversteller der Lage ist, zu erreichen, beispielsweise zu dem Objekt über den Variablennamen 'Spiel'. Das oben angegebene Beispiel ist das, was ich allgemein im Internet gesehen habe (oder zumindest etwas Ähnliches).

Unten habe ich begonnen, an meiner eigenen Spiel-Engine (zum Spaß) zu arbeiten, um Phaser zu imitieren und ihren Prozess zu verstehen. Leider kann ich den oben beschriebenen Effekt nicht erfolgreich erzielen.

Mein engine.js (Phaser Nachahmer-Datei)

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

Mein 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 
} 

Ich spüre dies eine Scoping-Problem. Ich habe versucht, den Quellcode von phaser durchzusehen, aber er enthält 97k Zeilen, und ctrl + f war keine Hilfe.

Answer 1

In Ihrem Code verwendet init . game ist durch den Konstruktor Game definiert, der versucht, init aufzurufen, bevor es fertig ist (und somit vor game zugewiesen ist). Dies führt zu einer zirkulären Abhängigkeit und wird undefined während des init Anrufs sein.

Eine Möglichkeit, dieses Problem zu lösen, besteht darin, die Ausführung von init zu verzögern. Unter Verwendung von setTimeout(functionDeclarations.init, 0) anstelle eines direkten Aufrufs an init beenden Sie den Konstruktor, weisen den korrekten Wert game zu und führen alles aus, was sich in Ihrer JS-Datei befinden könnte. Sobald alles fertig ist, wird init aufgerufen und alle werden glücklich sein.

Answer 2

Das Objekt, das an den Phaser-Konstruktor übergeben wird, ist das Spiel State. Sehen Sie sich src/core/State.js im Phaser Repo für eine Beispiel-Zustandsdatei und Beschreibungen an, was jede Funktion und Eigenschaft tut.

Ich kann das nicht genug sagen: Versuchen Sie niemals, die einzige phaser.js Datei zu lesen! Überprüfe stattdessen das Repo und gehe nacheinander durch die Dateien. Sie sind dort in einer logischen und gesunden Struktur und viel einfacher, dem Pfad zu folgen.

Wenn das Phaser-Spiel erstellt wird, wartet es auf ein DOM Ready-Ereignis. Nur wenn es das empfängt, beginnt es dann, durch das State-Objekt zu laufen und ruft die Funktionen der Reihe nach auf. Aus diesem Grund können Sie innerhalb der preload-Funktion auf game verweisen und keinen Bereichsfehler erhalten, weil es zu dem Zeitpunkt existiert, zu dem es aufgerufen wird.

Im obigen Beispiel (und allen auf der Phaser-Beispielseite gefundenen) wird game als globales JS-Objekt erstellt. Wir tun das nur, um den Beispielcode weniger ausführlich zu halten und leicht damit zu experimentieren. In einem Spiel auf Produktionsebene würden Sie dies jedoch selten tun. Schauen Sie in den Phaser Repo, 'Resources' Ordner in den Project Templates, dort gibt es besser strukturierte Alternativen.