将这个单人游戏转换为多人游戏

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

在游戏文件的 "create:" 部分，我添加了：

        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 控制台以及 google 的客户端控制台中看到头部的位置 chrome。

在这些坐标上实际画一条蛇，我已经试过了，但它不起作用。我真的不确定从这里去哪里，所以如果有人想参与其中，我会很高兴！

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

将这个单人游戏转换为多人游戏

converting this singleplayergame into a multiplayergame

javascript

multiplayer

websocket

socket.io

phaser-framework