检测一个对象何时在另一个对象之上?(HTML5)

Question

我正在HTML5 Canvas中创建一款游戏，该游戏要求在一个对象(图形(经过另一个对象(也是图形(时执行操作。

我尝试了我在网上看到的方法，但它们似乎不起作用。我期望代码类似于鼠标悬停功能，但我尝试过这个，但它不起作用。

这是一个可能的功能吗？可以用图形实现吗？

这是我在 AS3 中的原始代码：

        object1.addEventListener( Event.ENTER_FRAME, handleCollision)
        function handleCollision( e:Event ):void
        {
            if (object2.hitTestPoint(object1.x, object1.y, true))
            {
               // object2 collided with object1
                trace("Collision");u
            }
        }

Answer 1

您必须使用 BitmapData.hitTest 进行像素级检测。这是一个参数，因此您需要像 enter_frame 这样的函数来不断检查重叠。

在这里，您可以找到使用 BitmapData.hitTest 检测与表示游玩区域的精灵失去联系的示例。您的要求是相反的，检测与另一个精灵的接触。但这本质上是同样的想法。

希望对你有帮助

Answer 2

经过一些研究，我发现由于某种原因，在HTML5中无法进行图形之间的冲突检测。相反，我使用了一种替代方法，如果 object2 的坐标与 object1 的坐标相同，并且 Y 轴不在其上方，则会发生反应。