将此单人游戏转换为多人游戏

Question

我正在尝试使用 websockets 将此单人游戏转换为多人游戏。

https://github.com/Loonride/slither.io-clone/tree/master/slither-io

到目前为止，我已经制作了一个服务器和一个客户端套接字，因此客户端 A 和客户端 B 可以在各自的控制台中相互通信他们的蛇 X 和 Y 位置。到目前为止，这行得通。但现在我试图在那些 x,y 位置上画一条蛇，我对此有点麻烦，因为我真的不知道从哪里开始这样做。 （我是编程新手，并使用这个项目来学习和进入编码）。

这是我到目前为止所拥有的。在服务器文件（处理通信的部分）中：

  socket.on('snakeemit', snakeMsg);

  function snakeMsg(snakehead) {
    socket.broadcast.emit('snakeemit', snakehead);
    console.log(snakehead);
  }
}

在游戏文件的“创建：”部分，我添加了这个：

        socket = io.connect('http://localhost:8080');

          var snakehead = snake.head.position;

          socket.emit('snakeemit', snakehead);


          socket.on('snakeemit', newDrawing);

function newDrawing(snakehead){
  console.log(snakehead);
}

所以这似乎可以让客户端和服务器进行通信，并且我可以在我的 node.js 控制台以及谷歌浏览器的客户端控制台中看到头部的位置。

要在这些坐标上实际绘制一条蛇，我已经尝试过了，但它不起作用。我真的不知道从这里去哪里，所以如果有人想参与进来，我会很高兴！

  function newDrawing(snakehead){
      var snake = new PlayerSnake(this.game, 'circle', snakehead, snakehead);
    }

Answer 1

仅传输头部位置不足以对数据做任何有用的事情。相反，您必须序列化这些部分及其位置：

 var username = "test"; // to be set on game start

 function serializeSnake(snake) {
   return {
     username,
     sections: snake.sections.map(section => ({ x: section.x, y: section.y })),
     head: { x: snake.head.x, y: snake.head.y },
  };
}

function deserializeSnake(data) {
  const snake = new Snake(game, "circle", data.head.x, snake.data.y);
  for(const section of data.sections)
     snake.addSection(section.x, section.y);
}

现在您可以每 x 秒轻松传输蛇数据：

 setInterval(function () {
      socket.emit('snakeemit', serializeSnake(snake));
 }, 2000);

当它到达另一个客户端时，您可以将蛇添加到蛇中：

 const snakeByPlayer = new Map/*<string, Snake>*/();

 socket.on("snakeemit", function(data) {
   if(snakeByPlayer.has(data.username)) {
     // update the snake with the data
   } else {
     const snake = deserializeSnake(data);
     game.snakes.push(snake);
     snakeByPlayer.set(snake.username, snake);
 }
});