有没有人知道HTML5 Canvas有任何碰撞检测API ..？

Question

我一直在通过编写基本思维导图应用程序来试验HTML5画布。我试图找出是否有任何javascript API用于管理画布中的对象，如图像或形状之间的碰撞检测。 我认为编写自己的不是一个好主意，因为可能有一些好的API。 任何人都有这方面的线索或一些信息。我非常感激。

Answer 1

最近我一直在尝试这个。我发现Box2DJS是一个伟大的牛顿物理引擎，如果你想尝试一下。 http://box2d-js.sourceforge.net/

一开始很难掌握这个概念，但是随着你的继续，它会变得更容易，而且它还带有一些很好的例子。 Box2D已被移植到多种语言，大多数使用相同或非常类似的方法，因此任何端口的文档都可能适合您的需求。

祝你好运:)。

编辑：我在之前提到的网站上找到了这个文档的链接：http://www.kyucon.com/doc/box2d/（由于我的低声望限制我每个帖子一个，我不是一个超级链接，我是一个菜鸟; p）

适用于Box2DFlashAS3，但他们声称“Box2DJS API完全与Box2DFlashAS3相同”

编辑：哦，我刚注意到你正在寻找碰撞检测，而不是物理，我的坏......也许Box2D仍然可以工作，但也许不行。对不起...

Answer 2

看看Cake。它是canvas元素的场景图插件。我不认为它会进行碰撞检测，但它可能会帮助您找到正确的方向。您至少可以使用它将事件处理程序附加到画布对象。

Answer 3

Box2DWeb使用Box2D.Dynamics.b2ContactListener进行碰撞检测。

Box2DWeb是Box2DFlash 2.1a的一个端口（因此它有DebugDraw和ContactListeners）。以下是一个调度所有联系事件的示例。

var contactListener = new Box2D.Dynamics.b2ContactListener();           
    contactListener.BeginContact = function(contact) {
        console.log('something just hit something else');

        // example to narrow the field
        if( contact instanceof Box2D.Dynamics.Contacts.b2PolyAndCircleContact) {
            // collision of circle to polygon
        }
    };

world.SetContactListener(contactListener);

Answer 4

看一下GameJS，它是PyGame的一个Javascript端口（众所周知的Python游戏库）。它具有精灵和精灵组的概念，并具有相当先进的碰撞检测功能。