计算两个碰撞物体的重叠？

Question

更新：我发现this enormously helpful article解释了每像素碰撞检测画布。

我正在使用HTML5画布进行javascript游戏的碰撞系统。每个对象都有一个图像作为精灵，当任何一个对象的非透明像素与另一个对象重叠时，触发碰撞代码。但在此之前，需要移动物体，使它们只是相互接触而不再触发碰撞。我需要帮助计算任何两个对象在x和y方面的重叠，以便相应地移动一个。这就是我们所知道的：

• 相对于每个对象的碰撞点坐标
• 物体的位置（以及它们之间的距离）
• 对象的宽度和高度
• 物体在x和y方向上的速度（向量）

另外注意：这些物体的图像是不均匀的形状，没有完美的圆形，但可以计算从中心到碰撞点的半径。

编辑：我没有看到很多回复，所以我会更具体。在下图中，两个物体发生碰撞。重叠区域为红色。你会如何找到绿线的长度？

Answer 1

老实说，我对HTML 5以及如何用纯HTML 5制作游戏一无所知。但是你还需要知道速度（IE，他们的方向。这样你就可以从他们来的地方向后发送）< / p>

如果是标准编程语言，一种方法是使用while循环（将精灵移回到碰撞== false）。另一种方法是对交叉点的距离进行更复杂的计算，并减去单个x和y值，使它们不会发生碰撞。

编辑： 然后最简单的方法就像我说的那样，把对象移动到while循环中，在每个轴上向后移动1个像素，直到它的碰撞测试为假。例如：

    int x1 = 500; //x location on screen
    int y2 = 500; //y location

    public boolean fixOffSetX(Sprite s) {
         int x2 = s.getX();
         int y2 = s.getY();

         //not writing the whole thing
         //enter a while loop until its not colliding anymore

         while(collision is still true) {
            x--;  or x++; 

            //depending on direction 
            //(which is why you need to know velocity/direction of your sprites)
            //do the same for the Y axis. 
        }
    }


    //This method will return if the 2 sprites collided, you do this one
    public boolean collisionTest(Sprite s1, Sprite s2) {}

你应该看看做非常基本的碰撞，因为它是编程的一个非常复杂的部分

Answer 2

如果这还是一个问题，我在一个名为Foundation Game Design with HTML5 en Javascript的电子书中找到了有关该主题的信息。在这里：link to relevant pages。希望这有助于将来的任何人。