socket.io multiplayer game player's view

Question

I'm very new to nodejs and socket.io. I'm trying to create a simple multiplayer card game in real time. my problem right now is I can't get the player's view to display on the correct div from player's perspective. example is.. I want my playing area to display at the bottom box and my opponent to display on top box and same goes with my opponent's viewer. he will see himself on the bottom div and sees me on the top div. How do u get that effect to work?

client

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

server

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

Also it would be great if you can point me to a tutorial or blog related to this. thank you.

jerry · Accepted Answer · 2016-07-21 07:09:12Z

You are differentiating the self and other user by some uniqueness right, say for example uniqueness is user email or user id.

Solution 1:

On making socket connection, send the user id/email also and you can store that as part of socket object itself. So that when ever player1 did some move, on emit send the id also along with whatever data you are sending.

Solution 2:

When player1 did some move, you will send data to server, while sending the data, send the user id/email also. And in server again emit along with user id.

In client you can check - if id is self, then update at bottom. If id is not self then update the top. Note: If you have multiple opponent player, still you can handle with this.

EXAMPLE:

In client:

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

In server:

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

thank you for this. i will use it with part of the game logic. but what im trying to achieve is..let say when i join or sit down on a table.. similar to how poker table is. on my browser i will see myself sitting on the bottom center of the table even if i chose to sit at the top orginally. but on other people or opponent browser they will see me sitting at the top, left or right depending on user's view.
Okay. Is it you can't use the similar with playerInfo? U need to have some link object which says emit is with ur info or someone else info right.
i got it to work, thanks. i gave each user a unique id using socket.id when they make a connection and then push each id into an array. i would then emit the array to the client. on the client i would retrieve each user's socket.id using socket.io.engine.id and then compare it to the array to get the index of each user's id. with the index i would do some if statements to get the exact position i wanted for each user.

akardon · Accepted Answer · 2016-07-21 04:03:48Z

Take a look into this 7 part tutorial. I think it gives you a good picture about what needs to be done in a typical multiplayer game by 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

thank you. i've already looked through most of those before i post this question. i didn't specifically find what i need pertaining the player's position being at different place when view from different browser.

Greg Hornby · Accepted Answer · 2016-07-21 05:20:04Z

0

You need to give each client some kind of id, and tell each client when they connect, what their id is. When a client connects, generate a random unique id for them, and then send this back to them so they know their id. When you send back the data of other players, the client can figure out which data is theirs based on the id and display it in the right area.

edited Jul 21, 2016 at 5:20

answered Jul 21, 2016 at 5:14

Greg Hornby

7,8481 gold badge21 silver badges17 bronze badges

Collectives™ on Stack Overflow

socket.io multiplayer game player's view

3 Answers 3

3 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Related