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

Question

更新:我找到了 this enormously helpful article解释 Canvas 每像素碰撞检测。

我正在为一款使用 HTML5 Canvas 的 javascript 游戏开发碰撞系统。每个对象都有一个图像作为 Sprite ，当任何一个对象的非透明像素与另一个对象重叠时，就会触发碰撞代码。但首先需要移动物体，使它们相互接触，不再触发碰撞。我需要帮助计算任何两个对象在 x 和 y 方面的重叠，以便相应地移动一个对象。这是我们所知道的:

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

另外注意:这些物体的图像是不规则的形状，不是正圆，但是可以计算出圆心到碰撞点的半径。

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

Answer 1

老实说，我对 HTML 5 以及如何在纯 HTML 5 中制作游戏一无所知。但是您还需要知道速度(IE，它们的方向。这样您就可以将它们从它们来的地方向后发送)

如果使用标准编程语言，一种方法是使用 while 循环(将 Sprite 向后移动，直到碰撞 == 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) {}

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