JS、Socket.io、Phaser3、未创建对象

Question

我是 JS、phaser3 和 Socket.io 新手，我真的很想学习。

代码上下文：

• Phaser3
• Socket.io
• socket 连接前游戏房间的加载状态
• 生成 NPC 和玩家
• 尝试在创建 NPC 的同一回调中访问 NPC（质量）精灵时失败

问题：

• 无法访问 sprite 属性，通常看起来对象不是一开始就创建的

在连接到套接字服务器后，我在 Phaser3 的“create()”函数中监听“universeState”的套接字。 index.js：

this.socket.on('universeState',(universe)=>
    {
        console.log(`mass? ${JSON.stringify(universe.sys.mass[1].id)}`)
        for(let i = 0;i < universe.sys.mass.length; i++)
        {
            console.log(universe.sys.mass[i].id,universe.sys.mass[i].x,universe.sys.mass[i].y,universe.sys.mass[i].asset);
            this.utils.genMass(universe.sys.mass[i].id,universe.sys.mass[i].x,universe.sys.mass[i].y,universe.sys.mass[i].asset);
            console.log(`check: 3 ${JSON.stringify(this.state.state.mass)}`);
            this.state.state.mass[universe.sys.mass[i].id].sprite.setScale(0.5,0.5); //issue here
            console.log('check: 4');

            this.physics.add.collider(this.state.state.mass[universe.sys.mass[i].id].sprite, this.state.state.playerMass[this.state.id].sprite, function(mass, player) {
                mass.destroy();
                player.setScale(player.scaleX + 0.03);
                let camera = this.cameras.main;
                camera.zoomTo(camera.zoom * 0.975);
            }, null, this);
        }

用于在 utils.js 中创建“质量”的函数：

genMass(id,x,y,tex)
{
    console.log(`creating sprite with operands: ${id},${x},${y},${tex}`);
    let sprite = this.scene.physics.add.sprite(50,50,tex)//needs to be a physics object
    if(id.substring(0,5)=='mass:')
    {
        console.log(`is equal`)
    }
    id.substring(0,4)=='mass:'?
    this.scene.state.state.mass[id] = {id:id,sprite:sprite,x:x,y:y}:
    this.scene.state.state.playerMass[id] = {id:id,sprite:sprite,x:x,y:y}; //generate an extra parameter argument for quantified mass
    console.log('check: 0');
    id.substring(0,4)=='mass:'?
    this.scene.physics.world.enable(this.scene.state.state.mass[id].sprite):
    this.scene.physics.world.enable(this.scene.state.state.playerMass[id].sprite); 
    console.log('check: 1');
    id.substring(0,4)=='mass:'?
    this.scene.state.state.mass[id].sprite.body.collideWorldBounds = true:
    this.scene.state.state.playerMass[id].sprite.body.collideWorldBounds = true;
    console.log('check: 2');

}

在第一个代码 sn-p 中，所有内容都首先出现错误，其中注释为“issue here”。由于我使用的是 webpack，捆绑的文件几乎没有帮助。控制台：

Player ID returned:null
bundle.min.js:1 connected to game
bundle.min.js:1 mass? "mass:3961482"
bundle.min.js:1 mass:7107097 19134 14999 arc_purple
bundle.min.js:1 creating sprite with operands: mass:7107097,19134,14999,arc_purple
bundle.min.js:1 is equal
bundle.min.js:1 check: 0
bundle.min.js:1 check: 1
bundle.min.js:1 check: 2
bundle.min.js:1 check: 3 {}
bundle.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'sprite')
    at Q.<anonymous> (bundle.min.js:1:978636)
    at Q.i.emit (bundle.min.js:1:40837)
    at Q.emitEvent (bundle.min.js:1:969227)
    at Q.onevent (bundle.min.js:1:969030)
    at Q.onpacket (bundle.min.js:1:968708)
    at et.i.emit (bundle.min.js:1:40837)
    at et.ondecoded (bundle.min.js:1:973286)
    at q.i.emit (bundle.min.js:1:40837)
    at q.add (bundle.min.js:1:964368)
    at et.ondata (bundle.min.js:1:973261)

问题：

为什么我创建的对象在记录时是空的？如何成功创建对象并访问它？

注意事项：

我怀疑这是某种回调行为，您无法初始化某些内容并在同一个回调中访问它。我比较新，我想学习谢谢。

Answer 1

我们在评论部分说了两件事。

1. 您的子字符串需要包含冒号才能通过创建质量类型对象的测试。

2. 没有创建 playerMass 的对象。

你在正确的轨道上。

Answer 2

你不能访问该属性的原因是“容易”，因为this.state.state.mass对象是空的。

自从输出：

...
bundle.min.js:1 check: 3 {}
bundle.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'sprite')

和代码行：

console.log(`check: 3 ${JSON.stringify(this.state.state.mass)}`);

所以如果this.state.state.mass 是一个空的object/{}，那么object 中就没有属性universe.sys.mass[i].id。

所以this.state.state.mass[universe.sys.mass[i].id] 是undefined，而 undefined 没有属性sprite，这就是错误信息。

为什么这是undefined 很难说没有更多代码，但是使用当前共享代码，我不得不猜测：在套接字函数中，你是使用 this.state.state.mass 并在 genMass 函数中使用 this.scene.state.state.mass，这可能是原因，因为这可能是不同的对象。

更新：
重新阅读代码后，您应该检查代码中比较 substring 和 'mass:' 的部分，因为这里只会执行 if/else 块的第二部分，因为id.substring(0,4) 的字符串长度为 4，'mass:' 的字符串长度为 5，因此它们将从不匹配。

顺便说一句：使用ternary operator ?: 而不是if/else 不是最好的选择，并且会降低代码的可读性。

    id.substring(0,4)=='mass:'?
        this.scene.state.state.mass[id] = {id:id,sprite:sprite,x:x,y:y}:
        this.scene.state.state.playerMass[id] = {id:id,sprite:sprite,x:x,y:y}; //generate an extra parameter argument for quantified mass
    console.log('check: 0');
    id.substring(0,4)=='mass:'?
        this.scene.physics.world.enable(this.scene.state.state.mass[id].sprite):
        this.scene.physics.world.enable(this.scene.state.state.playerMass[id].sprite); 
    console.log('check: 1');
    id.substring(0,4)=='mass:'?
        this.scene.state.state.mass[id].sprite.body.collideWorldBounds = true:
        this.scene.state.state.playerMass[id].sprite.body.collideWorldBounds = true;
    console.log('check: 2');

这更具可读性：

    if(id.substring(0,4)=='mass:'){
        this.scene.state.state.mass[id] = {id:id,sprite:sprite,x:x,y:y};
        this.scene.physics.world.enable(this.scene.state.state.mass[id].sprite);
        this.scene.state.state.mass[id].sprite.body.collideWorldBounds = true;
    } else {
        this.scene.state.state.playerMass[id] = {id:id,sprite:sprite,x:x,y:y};
        this.scene.physics.world.enable(this.scene.state.state.playerMass[id].sprite);
        this.scene.state.state.playerMass[id].sprite.body.collideWorldBounds = true;
    }

...或者这个，这可能更清楚：

    let mass = {id:id,sprite:sprite,x:x,y:y};
    this.scene.physics.world.enable(sprite);
    sprite.body.collideWorldBounds = true;

    if(id.substring(0,4)=='mass:'){
        this.scene.state.state.mass[id] = mass;
    } else {
        this.scene.state.state.playerMass[id] = mass;
    }