有谁知道 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，但他们声称“The Box2DJS API 与 Box2DFlashAS3 的 API 完全相同”

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

Answer 2

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

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（著名的 Python 游戏库）的 Javascript 端口。它有精灵和精灵组的概念，并具有相当先进的碰撞检测。