javascript - 使用 Node.JS 进行实时图形处理

Question

我是 Node JS 和 Socket.IO 的新手，对 JS 也几乎是新手...我正在尝试制作一个迷你多人游戏，只是为了学习。我在服务器中对玩家的位置进行所有处理，并将所有位置传递给每个客户端，以便每个客户端在浏览器中生成所有图表。

在服务器端我有这些:

函数玩家(x,y){
    有些事...
    this.graph = '';
}
设置间隔(函数(){
    对于(我在玩家中){
    玩家位置(玩家[i])；
    }
    io.sockets.emit('new_data', 玩家);
}, 100);

(这样我每 100 毫秒发送一次所有玩家的位置)

然后在客户端:

var r = Raphael('field', 800, 600)
对于(我在玩家中){
        Players[i].graph = r.circle(players[i].x,players[i].y).attr({fill:'blue'});
        玩家[i].graph = 玩家[i].graph.attr({cx : 玩家[i].x , cy:玩家[i].y});

(这在开始时制作了每个玩家的图表，效果很好)

 socket.on('new_data', function(players){
            对于(我在玩家中){
                玩家[i].graph = 玩家[i].graph.attr({cx : 玩家[i].x , cy:玩家[i].y});


}

我的问题是这里说它没有方法 ATTR。就好像 object.graph 实际上并不是我想要的那样。我希望我已经说得足够清楚了。如果没有，请告诉我。

非常感谢。

Answer 1

你的问题有点不清楚，但我认为你正在尝试通过 socket.io 传递整个 raphael 对象？

socket.on('new_data', function(players){
   // here players is just a plain object without any methods
}

只需在浏览器中创建一个 console.log(players)，您就会看到发生了什么。我希望这几行代码能给您一个想法。

var local_players = [] // < store your clientside players and the raphael objects

socket.on('new_data', function(playerdata){
//for every player data recieved update your local players data..
  for(var i in playerdata)
    local_players[i].attr({cx : playerdata[i].x , playerdata[i].y});
}

您还必须确保每个玩家都能获取自己的玩家数据，因此为每个玩家提供一个唯一的 ID，如果玩家数据中的 ID 相同，则更新玩家位置。