Javascript 平台游戏碰撞检测

Question

所以这个问题之前可能已经被问过几次了，但我似乎找不到一种方法来使碰撞检测正常工作。

我正在尝试制作 HTML Canvas /Javascript 平台游戏。如果你想了解它的作用，可以在 codepen 上找到它:https://codepen.io/Arthurvanhoorebeke/pen/zpaZYM

我正在做的是检查我的播放器的 Angular 落在哪些图 block /“盒子”中。这意味着我对玩家上方和下方的方 block 进行了良好的检测，但侧面检测非常糟糕。

我知道底部碰撞的检查是导致侧向检测困惑的原因，但我似乎无法修复它。 这就是我现在所拥有的:

function tileCheck(world){
  var player_topy = Math.ceil(player1.pos[1] / world.squareHeight) || 0;
  var player_bottomy = Math.ceil((player1.pos[1]+player1.height)/world.squareHeight) || 0;
  var player_leftx = Math.floor(player1.pos[0]/world.squareWidth) || 0;
  var player_rightx = Math.floor((player1.pos[0]+player1.width)/world.squareWidth) || 0;

  var topRightBlock = getSquare(world1,player_rightx,player_topy-1); 
  var topLeftBlock = getSquare(world1,player_leftx,player_topy-1);
  var bottomRightBlock = getSquare(world1,player_rightx,player_bottomy-1);
  var bottomLeftBlock = getSquare(world1,player_leftx,player_bottomy-1);
  //checks if blocks are solid
  var topRightSol = world.legend[topRightBlock].solid;
  var topLeftSol = world.legend[topLeftBlock].solid;
  var bottomRightSol = world.legend[bottomRightBlock].solid;
  var bottomLeftSol = world.legend[bottomLeftBlock].solid;

  //This kinda messes up my 'sideways collision detection'.
  if((bottomRightSol && !topRightSol) || (bottomLeftSol && !topLeftSol)){
    player1.pos[1] -= (player1.pos[1]+player1.height) - (player_bottomy-1)*world.squareHeight;
    player1.vel[1] = 0;
    player1.grounded = true;
  }
  else{
    player1.grounded = false;
    }
  if((topLeftSol && !bottomLeftSol) || (topRightSol && !bottomRightSol)){
    player1.pos[1] += player_topy*world.squareHeight - player1.pos[1];
    player1.vel[1] = 0;
  }
  //This doesn't work properly.
  if(topLeftSol && bottomLeftSol){
    player1.vel[0] = 0;
    player1.wallLeft = true;
    player1.pos[0] += (player_leftx+1)*world.squareWidth - player1.pos[0];
  }
  else{player1.wallLeft = false}
  if(topRightSol && bottomRightSol){
    player1.vel[0] = 0;
    player1.wallRight = true;
    player1.pos[0] -= (player1.pos[0]+player1.width) - (player_rightx)*world.squareWidth;
  }
  else{player1.wallRight = false}
}

我知道当玩家方 block 的一个 Angular 碰到其他物体时，侧向检测将不起作用。问题是，当玩家击中一个方 block 时，其垂直位置会被底部碰撞检查器改变(至少我认为这就是问题所在。)。

如果您想查看确切的问题，请尝试打开 codepen 链接并跳转一下...

是否有解决此问题的方法，或者我是否需要重新考虑我的整个功能？

Answer 1

彻底反射(reflection)。碰撞检测的想法是预测路径，这适用于 2d 和 3d，我建议更多的完整模拟，那么如果路径被阻挡，您必须找到(最重要的是经常错过)撞击点。 所以在二维中使用盒子时就变得微不足道了。 计算具有 X Y 分量的轨迹向量。 然后测试每个盒子的碰撞情况，如果许多盒子使用实例检测球体，只需检查之间的距离以检查是否靠近碰撞点，并获得碰撞点。 然后，冲击向量应该用作 Angular 色的下一个位置。这允许在弹起和反弹的边缘上滑动。 希望我有所帮助。否则请指出任何错误，您的代码将被检查。