如何使用socket.io

时间:2016-10-12 16:41:43

标签: node.js html5 socket.io html5-canvas collision-detection

我正在学习多人游戏开发,我想知道如何检测碰撞并且不允许玩家进入碰撞但允许他们远离碰撞。我现在有一个碰撞检测设置,当玩家试图移动时,它是服务器端。虽然这种碰撞检测在玩家碰撞时完美无缺,但它们无法移出碰撞并永远陷入困境。这是我使用服务器端检测玩家何时移动的代码&或碰撞:

socket.on('moveEvent', function(data) {
  var player = players[find(connections, this.id)]
  var r1 = {
    left: player.position.x,
    top: player.position.y,
    bottom: player.position.y + 100,
    right: player.position.x + 100
  }
  var intersects = false;
  for (var i = 0; i < players.length; i++) {
    if (connections[i] != this.id) {
      var currPlayer = players[i]
      var r2 = {
        left: currPlayer.position.x,
        top: currPlayer.position.y,
        bottom: currPlayer.position.y + 100,
        right: currPlayer.position.x + 100
      }
      intersects = intersectRect(r1, r2)
    }
  }
  console.log(intersects)
  if (data.direction == "x+" && intersects == false) {
    player.position.x = player.position.x - speed
  }
  if (data.direction == "y+" && intersects == false) {
    player.position.y = player.position.y - speed
  }
  if (data.direction == "x-" && intersects == false) {
    player.position.x = player.position.x + speed
  }
  if (data.direction == "y-" && intersects == false) {
    player.position.y = player.position.y + speed
  }
});

function intersectRect(r1, r2) {
  socket.emit('checkPlayers', {
    p1: r1,
    p2: r2
  })
  if (!(r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top)) {
    return true;
  } else {
    return false;
  }
}

这是setInterval代码,它获取新坐标并将它们绘制到屏幕上。我目前在intersectRect函数中有一个emit事件,它发出正在检查碰撞的两个玩家。然后服务器将其发出并打印出它发送的两个播放器。这完全是为了修复错误:

setInterval(function() {
  if (w == true) {
    socket.emit('moveEvent', {
      direction: "y+",
      id: sesID
    })
  }
  if (a == true) {
    socket.emit('moveEvent', {
      direction: "x+",
      id: sesID
    })
  }
  if (s == true) {
    socket.emit('moveEvent', {
      direction: "y-",
      id: sesID
    })
  }
  if (d == true) {
    socket.emit('moveEvent', {
      direction: "x-",
      id: sesID
    })
  }
  gamectx.canvas.width = window.innerWidth;
  gamectx.canvas.height = window.innerHeight;
  gamectx.clearRect(0, 0, game.width, game.height);
  socket.emit('request', {
    request: "players",
    id: sesID
  });
  for (var i = 0; i < players.length; i++) {
    gamectx.fillStyle = "#ff0000"
    gamectx.fillRect(((game.width / 2) + (players[i].position.x - player.position.x)) - 50, ((game.height / 2) + (players[i].position.y - player.position.y)) - 50, 100, 100)
  }
  gamectx.fillStyle = "#0000ff"
  gamectx.fillRect((window.innerWidth / 2) - 50, (window.innerHeight / 2) - 50, 100, 100);
  gamectx.font = "48px sans-serif";
  gamectx.strokeText("x: " + GameX + ", y: " + GameY, 10, 50);
  var playersList = ""
  for (var i = 0; i < players.length; i++) {
    playersList += "x: " + players[i].position.x + ", y: " + players[i].position.y + ", "
  }
  gamectx.font = "30px sans-serif";
  gamectx.strokeText(playersList, 10, 100);
  console.log(p1, p2)
}, 30);

所以我认为我可能需要检测每一侧的碰撞,并且不允许玩家在碰撞时朝那个方向移动,或者当碰撞发生时将玩家从碰撞中移开。感谢您的帮助。没有答案所以我转发这个希望一些。谢谢!

0 个答案:

没有答案