Question

im试图使用网络套接字将此单人游戏转换为多人游戏。

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

到目前为止，我已经制作了一个服务器和一个clientocket，以便客户端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控制台以及google chrome的clients控制台中看到头部的位置。

实际上是在那些坐标上画一条蛇，我已经试过了，但是没有用。我不是很确定从这里去哪里，所以如果有人想参加身份证，我会很高兴！

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

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

1 个答案: