无法读取未定义 Phaser.js 的属性 add()答案

【问题标题】：Cannot read property add() of undefined Phaser.js无法读取未定义 Phaser.js 的属性 add()
【发布时间】：2018-11-14 11:17:36
【问题描述】：

game.state.add() 函数存在问题。出于某种原因，game 未定义：

Uncaught TypeError: Cannot read property 'add' of undefined at Object.init (main.js:51) at main.js:58

这是我的代码：

var socket; // global bir socket değişkeni.
    socket = io.connect(); // server a bağlantı isteği gönderir.
                           //Server bağlantı isteğini dinler ve clientlara başarılı olursa geri "connect" mesajını emitler.

    //Oyunun ekrana oturması için boyutları ayarlıyoruz.Browserla ilgili.
    var canvas_width = window.innerWidth * window.devicePixelRatio;
    var canvas_height = window.innerHeight * window.devicePixelRatio;   
    //Oyunumuzu belirlediğimiz divin içinde yaratıyoruz.
    var game = new Phaser.Game(canvas_width,canvas_height,Phaser.CANVAS,'gameDiv');

    var gameProperties = {
      //oyunun gerçek boyutları.oyun dünyasının genişliği ve uzunluğu.
      gameWidth:4000,
      gameHeight:4000,
    }

    //Oyunun ana state i.
    var main = function(game){

    };
    main.prototype ={
    preload:function(){

    },
    create:function(){ // oyun yaratıldığında çağrılır.
    console.log("Client yaratıldı.")
    //serverdan connect mesajı gelince onSocketConnected fonksiyonunu çalıştır.
    socket.on("connect",onSocketConnected); //serverdan gelecek connect mesajı için dinler.Socket.io bir client
                                            // servera bağlandığında otomatik olarak connect mesajını client a gönderir.
                                            //serverın clientlara mesaj göndermesine "emit"  denir.

    },    
    }
    function onSocketConnected(){
      console.log("Sunucuya bağlanıldı.")    
    };

    var gameBootStrapper = {
         init:function(gameContainerId){
             game.state.add('main',main);   //error here
             game.state.start('main');
         }
    };    
    gameBootStrapper.init('gameDiv');

我的 index.html：

<body>
    <div id="gameDiv">
    </div>    
</body>
<script src="client/lib/phaser.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src ="client/main.js"></script>

这里有一张index.html的图片： ..................................................... ......

【问题讨论】：

如果你在 var game = ... 之后使用 console.log(game) 你会看到什么
我看到了里面的游戏对象
prntscr.com/j2jzty
这意味着游戏在此期间变得未定义。奇怪。

标签： javascript phaser-framework

【解决方案1】：

我认为这与范围和上下文有关。

您从gameBootStrapper 的上下文中调用init，而变量game 在该上下文中不存在。换句话说，我认为您还需要将game 变量传递给init 函数，以便gameBootStrapper 对象能够访问该变量。所以是这样的：

var gameBootStrapper = {
     init:function(gameContainerId, game){
         game.state.add('main', main);
         game.state.start('main');
     }
};    
gameBootStrapper.init('gameDiv', game);

您也可以以某种方式将init 绑定到不同的上下文，尽管我忘记了如何执行此操作。我必须说，我发现 JavaScript 中的作用域和上下文是棘手且不直观的恕我直言。

【讨论】：

【解决方案2】：

我遇到了同样的问题，这就是我解决它的方法。碰巧我正在使用'phaser 3'，现在使用game.scene而不是game.start。所以我只是改变了场景的开始，它起作用了。

【讨论】：