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

Вы должны дать каждому клиенту какой-то идентификатор, и сказать каждому клиенту при подключении, что их идентификатор. Когда клиент подключается, создайте для них случайный уникальный идентификатор, а затем отправьте его обратно, чтобы они знали свой идентификатор. Когда вы отправляете данные других игроков, клиент может определить, какие данные принадлежат им на основе идентификатора и отобразить его в правильной области.

Answer 3

Вы дифференцируете себя и других пользователей с помощью некоторой уникальности, например, уникальность - это адрес электронной почты пользователя или пользователя.

Решение 1:

О внесении сокет-соединение, отправить идентификатор пользователя/электронной почты также и вы можете хранить, что как часть самого объекта сокета. Таким образом, когда когда-либо игрок1 делал какое-то движение, на emit отправлял идентификатор вместе с любыми данными, которые вы отправляете.

Решение 2:

Когда player1 сделал некоторый шаг, вы будете передавать данные на сервер, при отправке данных, отправить идентификатор пользователя/электронную почту также. А на сервере снова испускают вместе с идентификатором пользователя.

В клиенте вы можете проверить - если идентификатор сам, а затем обновить снизу. Если идентификатор не сам, то обновите верх. Примечание: Если у вас есть несколько игроков противника, все равно вы можете справиться с этим.

Пример:

В клиенте:

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