有谁知道 HTML5 Canvas 是否有任何碰撞检测 API ..？答案

【问题标题】：Does any one know is there any collision detection API for HTML5 Canvas..?有谁知道 HTML5 Canvas 是否有任何碰撞检测 API ..？
【发布时间】：2012-03-29 16:09:21
【问题描述】：

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

【问题讨论】：

我很好奇你对“碰撞检测 js”的第一个谷歌点击的看法 :)

标签： html canvas collision-detection

【解决方案1】：

最近我自己也在尝试这个。我发现 Box2DJS 是一个很棒的牛顿物理引擎，如果你想试试的话。 http://box2d-js.sourceforge.net/

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

祝你好运:)。

编辑：我在前面提到的网站上找到了此文档的链接：http://www.kyucon.com/doc/box2d/（由于我的声誉低，每篇文章只能写一个，所以无法将其设为超链接，我是菜鸟；P）

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

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

【讨论】：

无论如何，谢谢你的信息，SumWon.. 让我看看这个.. :)

【解决方案2】：

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

【讨论】：

【解决方案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);

【讨论】：

【解决方案4】：

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

【讨论】：