1

更新：我发现这篇解释画布每像素碰撞检测的非常有用的文章。

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

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

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

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

4

2 回答 2

2

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

如果它使用标准编程语言，一种方法是使用 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) {}

您应该考虑进行非常基本的碰撞，因为它是编程中非常复杂的部分

于 2012-07-29T06:23:52.507 回答
0

如果这仍然是一个问题，我在一本名为 Foundation Game Design with HTML5 en Javascript 的电子书中找到了有关该主题的信息。这里：链接到相关页面。希望这对将来的任何人都有帮助。

于 2013-07-26T13:38:52.033 回答