Javascript 将此单玩家游戏转换为多玩家游戏

我正在尝试使用WebSocket将这个singleplayergame转换成一个多层次的游戏

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

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

在游戏文件的“创建：”部分，我添加了以下内容：

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

---

仅传输头部位置不足以处理数据。相反，您必须序列化节及其位置：

 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秒传输一次snakes数据：

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

const snakeByPlayer=newmap/**/（）；
socket.on（“snakemit”，函数（数据）{
if（snakeByPlayer.has（data.username））{
//用数据更新snake
}否则{
const snake=反序列化snake（数据）；
游戏。蛇。推（蛇）；
snakeByPlayer.set（snake.username，snake）；
}
});

仅传输头部位置不足以处理数据。相反，您必须序列化节及其位置：

 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秒传输一次snakes数据：

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

const snakeByPlayer=newmap/**/（）；
socket.on（“snakemit”，函数（数据）{
if（snakeByPlayer.has（data.username））{
//用数据更新snake
}否则{
const snake=反序列化snake（数据）；
游戏。蛇。推（蛇）；
snakeByPlayer.set（snake.username，snake）；
}
});

你能检查它是连接问题还是渲染问题吗？你能检查它是连接问题还是渲染问题吗？好的，蛇现在每2秒被发送到服务器，当我控制台登录节点时，我看到每个clents蛇的位置X和Y。但是当它们被广播到客户端时，它说；“game.js:63 Uncaught ReferenceError:game未定义”我尝试将其改为“this.game”，但当我这样做时，我遇到了一个新错误：“game.js:63 Uncaught ReferenceError:snake未定义”。有什么想法吗@乔纳斯Wilms@ja你必须在全球范围内公开它，我想是吗？我将编辑帖子，使其包含index.html文件，以便您可以see@ja

var-game

是一个局部范围的变量，请删除它周围的

（function（）{/*..*/}）（

，使其成为全局变量。在开始编写代码之前，您应该真正了解作用域…@ja和我链接了文件以便查看，没有理由编辑该问题，index.html的内容不是您问题的一部分好吧，现在蛇每2秒发送一次到服务器，当我在节点中登录时，我看到每一条克伦茨蛇的位置都是X和Y，但当它们被广播给客户时，它说：；“game.js:63 Uncaught ReferenceError:game未定义”我尝试将其改为“this.game”，但当我这样做时，我遇到了一个新错误：“game.js:63 Uncaught ReferenceError:snake未定义”。有什么想法吗@乔纳斯Wilms@ja你必须在全球范围内公开它，我想是吗？我将编辑帖子，使其包含index.html文件，以便您可以see@ja

var-game

是一个局部范围的变量，请删除它周围的

（function（）{/*..*/}）（

，使其成为全局变量。在开始编写代码之前，您应该真正了解范围…@ja和我链接了文件，所以我看了一下，没有理由编辑这个问题，index.html的内容不是您问题的一部分