socket.io多人游戏玩家的视图

Question

我对nodejs和socket.io非常陌生。我正试图创建一个简单的多人纸牌游戏实时。我现在的问题是我无法从玩家的角度让玩家的视角显示在正确的div上。例如，我希望我的比赛区域显示在底部框中，我的对手要显示在顶部框中，并且与我的对手的观众一样。他会看到自己在底部的div，并看到我在顶部div。你如何才能达到这个效果？

客户

<div class='top'></div> 
<div class='bottom></div> 

<script> 
    var socket = io(); 
    socket.on('playerinfo', function(data){ 
    $('.top').html(data[0]); 
    $('.bottom')html(data[1]); 
    }); 
</script> 

服务器

var players = []; 
io.on('connection', function(socket){ 
    //player is given 'P' with random number when connection is made to represent username 
    socket.name = "P" + Math.floor(Math.random() * (20000)); 
    players.push(socket.name); 
    io.emit('playerinfo', players); 
} 

而且这将是巨大的，如果你能指点与此相关的教程或博客。谢谢。

Answer 1

看看这7部分的教程。我觉得它给你约需要通过Socketio在一个典型的多人游戏做什么好的图片：

http://www.tamas.io/online-card-game-with-node-js-and-socket-io-episode-1/

http://www.tamas.io/online-card-game-with-node-js-and-socket-io-episode-2/

http://www.tamas.io/online-card-game-with-node-js-and-socket-io-episode-3/

http://www.tamas.io/online-card-game-with-node-js-and-socket-io-episode-4/

http://www.tamas.io/online-card-game-with-node-js-and-socket-io-episode-5/

http://www.tamas.io/online-card-game-with-node-js-and-socket-io-episode-6/

http://www.tamas.io/online-card-game-with-node-js-and-socket-io-episode-7

Answer 2

你需要给每一个客户某种身份证，并告诉每个客户端连接时，它们的ID是什么。当客户端连接时，为他们生成一个随机的唯一ID，然后将其发回给他们，以便他们知道他们的ID。当您发回其他玩家的数据时，客户可以根据id找出他们的数据并将其显示在正确的区域。

Answer 3

您正在通过某种唯一性权利区分自我和其他用户，例如唯一性是用户电子邮件或用户标识。

解决方案1：

在制作socket连接，发送用户ID /电子邮件也，你可以存储为Socket对象本身的一部分。因此，当玩家1做了一些动作时，发送ID也会随着您发送的任何数据一起发送。

解决方案2：

当PLAYER1做了一些举动，你将数据发送到服务器，同时发送数据，也发送用户ID /电子邮件。并在服务器再次发出用户ID。

在客户端你可以检查 - 如果id是self，那么在底部更新。如果id不是self，则更新顶部。 注：如果你有多个对手球员，你仍然可以处理这个。

例：

在客户端：

<script> 
    var socket = io(); 
    var selfId; 
     socket.on('playerinfo', function(data){ 
     selfId = data.name; 
     playerInfo = data.players; 
     $('.top').html(playerInfo); 
     $('.bottom')html(selfId); 
     }); 
     socket.on('move', function(data){ 
     if(data.uid == selfId) 
     { 
      $('.top').html(data.card); 
     } 
     else 
     { 
      $('.bottom')html(data.card); 
     } 
     }); 
     socket.emit('move', {card:A, uid:56836480193347838764}); 
    </script> 

在服务器：

var players = []; 
io.on('connection', function(socket){ 


    //player is given 'P' with random number when connection is made to represent username 
    socket.name = "P" + Math.floor(Math.random() * (20000)); 
    // Here may be you can assign the position also where the user is sitting along with the user name. 
    //players will be an array of object which holds username and their position 
    //So that in client you can decide where the user will sit. 
    players.push(socket.name); 
    io.emit('playerinfo', {'players':players, 'name':socket.name); 
    socket.on('move', function (data) { 
    socket.emit('move', data); 
    }); 
}