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

Question

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

代码上下文：

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

问题：

无法访问 sprite 属性，一般来说似乎对象不是首先创建的

在连接到套接字服务器后，我让套接字在Phaser3 的“universeState”的“create()”函数中侦听。 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');

}

在注释为“此处问题”的第一个代码片段中，一切都首先出现错误。因为我使用的是 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

你不能访问属性的原因很“简单”，因为this.state.state.mass对象是空的。

自 te 输出：

...
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[= 的第二部分63=] 块将被执行，因为 id.substring(0,4) 的字符串长度为 4，而 'mass:' 的字符串长度为 5，所以它们 永远不会 匹配。

btw.: to use the ternary operator ?: instead of if/else is not the best option, and makes the code less readable.

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

Answer 2

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

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

你走在正确的轨道上。

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

JS, Socket.io, Phaser3, Object Not Being Created

javascript

sockets

callback

node.js

phaser-framework