如何对玩家和墙壁进行像素完美的碰撞检测（JavaScript游戏）

-1

我正在用JavaScript制作2D游戏。对此，我需要能够“完美”地检查我的球员之间的碰撞（比赛有两名球员，请打开图片）和墙壁！我的意思是，我有一个实际上可行的功能，但是当我让他们跳到墙壁上时，他们会穿过墙壁并继续移动，直到他们到达另一个区域，甚至离开画布！另外，如果他们掉下来，我让他们与墙壁碰撞，他们只是停在那里，这也很糟糕！ 我真的需要帮助！这是一个大学项目，我必须尽快芬兰！如何对玩家和墙壁进行像素完美的碰撞检测（JavaScript游戏）

My game looks like this

冲突检测功能我是在这里：

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

请帮帮我！谢谢你们！

来源

2017-05-12 M. Fanfa

有关于正确执行碰撞检测的完整书籍。你读过一些吗？ –

给你一个上述的短篇故事答案：不要，它太贵了。你想要使用边界框，只有靠近确切的像素，如果你必须 –

问题：你的墙壁瓷砖为基础（一块长方形的墙实际上是由几个方块组成）？如果是这样，以最短的方向分流玩家可能会导致玩家分流到另一个墙段。 –

在你的情况下，我怀疑像素完美的碰撞是必需的。

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

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

见与电网

以下图像另一种简单的方式可以是只检查的背景像素的颜色。由于你的游戏很简单，背景和物体颜色是不同的。所以你只需要检查玩家是否试图移动像素颜色不是背景的地方，因此存在一个坚实的物体，玩家应该停下来。你不必测试很多像素，只有1个像素在玩家试图移动的方向。（1代表水平，1代表垂直）。但是，如果您没有清晰的背景色，则无法使用。这里的背景颜色对于我们在前面的建议中是一种布尔网格。

来源

2017-05-15 12:15:37 11thdimension

如何对玩家和墙壁进行像素完美的碰撞检测（JavaScript游戏）

回答

相关问题