如何对玩家和墙壁进行像素完美的碰撞检测(JavaScript游戏) [英] How to do pixel-perfect collision detection of a player and the walls (JavaScript Game)

问题描述

我正在用JavaScript制作2D游戏.为此，我需要能够完美地"检查我的玩家(游戏中有两个玩家，请打开图片)和墙壁之间的碰撞！我的意思是，我有一个实际起作用的功能，但是当我让它们跳到墙壁上时，它们会穿过墙壁并不断移动直到它们到达另一个区域甚至离开画布！ 另外，如果它们掉落了，而我让它们与墙壁碰撞，它们就停在那里，这也很糟糕！ 我真的需要帮助！！这是一个大学项目，我必须很快完成它！

I'm making a 2D game in JavaScript. For it, I need to be able to "perfectly" check collision between my players(the game has two players, open the picture please) and the walls! I mean, I have a function that actually works, but when I make them jump against the walls they pass through the walls and keep moving until they reach another area or even leave the canvas! Also, if they are falling down and I make them collide with a wall, they just stop there wich is also pretty bad! I really need help with that!! It's a university project and I have to finnish it really soon!

我的游戏看起来像这样

我具有的碰撞检测功能在这里:

function blockRectangle (objA, objB) {
  var distX = (objA.x + objA.width / 2) - (objB.x + objB.width / 2);
  var distY = (objA.y + objA.height / 2) - (objB.y + objB.height / 2);

  var sumWidth = (objA.width + objB.width) / 2;
  var sumHeight = (objA.height + objB.height) / 2;

  if (Math.abs(distX) < sumWidth && Math.abs(distY) < sumHeight) {
    var overlapX = sumWidth - Math.abs(distX);
    var overlapY = sumHeight - Math.abs(distY);

    if (overlapX > overlapY) {
      objA.y = distY > 0 ? objA.y + overlapY : objA.y - overlapY;
    }
    else {
      objA.x = distX > 0 ? objA.x + overlapX : objA.x - overlapX;
    }
  }
}

我用迷宫做墙壁，并且使用for循环检查与数组中保存的所有墙壁的碰撞！ 如您所见:

I did the walls with a maze and I'm using a for cycle to check the collisions with all of the walls I have saved in an array! As you can see here:

for (var i in walls) {
  var wall = walls[i];
  
  if ((player.x < (wall.x + wall.width)) && ((player.x + player.width) > wall.x) && (player.y < (wall.y + wall.height)) && ((player.height + player.y) > wall.y)) {
    player.falling = false;
  }
  blockRectangle(player, wall);
}

请帮助我！！！谢谢大家！

Please help me!!! Thank you all!

推荐答案

在您的情况下，我怀疑是否需要像素完美的碰撞.

In your case I doubt a pixel perfect collision is required.

您可以维护一个布尔矩阵来存储实体对象的位置.固体物体，例如墙壁或播放器.然后，在每个帧中，您都可以检查播放器是否试图移动到有固体物体的位置，如果有，则停止它.您不必创建以像素为单位的width x height网格，而是选择一个最大的块(网格中的单个元素)，其中每个实体对象合理地占据了大部分块.

You can maintain a boolean matrix to store the position of solid objects. Solid objects like walls or players. Then in every frame you can check if your player is trying to move to a position where there is a solid object, if it is then stop it. You don't have to create grid of width x height in pixels, but rather choose a largest block (single element in the grid) in which each solid object reasonably occupies most of the block.

例如，您可以选择块大小为player_width / 2 x player_height /2.

For example you can choose block size to be player_width / 2 x player_height /2.

查看带有网格的下图

另一种简单的方法可能是仅检查背景像素颜色.由于您的游戏很简单，因此背景和对象的颜色是不同的.因此，您只需要检查播放器是否试图移动到像素颜色不具有背景的某个位置，因此就存在一个稳定的物体，播放器应该停止.您无需测试很多像素，只需测试玩家尝试移动的方向上的1个像素即可. (1表示水平，1表示垂直).但是，如果背景色不清晰，则无法使用此功能.在前面的建议中，这里的背景颜色对我们来说是一种布尔网格.

Another simple way could be to just check the background pixel color. Since your game is simple, background and object colors are different. So you just have to check if the player is trying to move somewhere where pixel color is not of background, thus there is a solid object and player should stop. You don't have to test for a lot of pixels, just 1 pixel in the direction the player is trying to move. (1 for horizontal and 1 for vertical). This however can not be used if you don't have a clear background color. Background color here is kind of the boolean grid for us in the previous suggestion.

这篇关于如何对玩家和墙壁进行像素完美的碰撞检测(JavaScript游戏)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！