превращение этой одиночной игры в многопользовательскую игру - PullRequest
Новая
       27

превращение этой одиночной игры в многопользовательскую игру

0 голосов
/ 01 января 2019

Я пытаюсь превратить эту однопользовательскую игру в многопользовательскую игру с помощью веб-сокетов.

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

На данный момент я создал сервер и клиентскую розетку, чтобы клиент А и клиент В могли общаться друг с другом, чтобы получить друг от друга свои позиции змей 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);
    }

1 Ответ

0 голосов
/ 01 января 2019

Передача только положения головы недостаточно, чтобы сделать что-нибудь полезное с даннымиВместо этого вам придется сериализовать секции и их позиции: 

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