javascript - 为在 Canvas 上绘制的图像添加碰撞检测

Question

我正在使用 HTML5 Canvas 和 JavaScript 创建一个简单的基于网络的游戏。我目前在 Canvas 上显示了一些图像，每个图像代表在快餐店找到的元素。我还有四个“描述框”，每个框都标有 Assets 、负债、收入或支出。

每张图片都属于这些描述框之一，用户需要将每张图片拖放到正确的描述框。

我计划通过使用保存框图像的 JS 变量的名称，以及每个项目图像的 HTML alt 标记，即 img“chair”具有 alt，来检查用户是否已将图像拖到正确的框标记“asset”，并且 Assets 的描述框具有变量名称“assetsDescriptionBox”，因此我将使用“if”语句来检测用户拖动的图像是否被拖动到与 Assets 所在的 Canvas 相同的区域正在显示描述框，如果该图像具有 alt 标签“asset”，它将从 Canvas 上消失(并添加到数组中以供稍后在游戏中使用)。

但是，如果用户拖动的图像没有 alt 标签“asset”，而是有一些其他标签，即“liability”，那么它将在 Canvas 上重新绘制，回到最初绘制的位置。

我不确定的是如何实现它。我看过碰撞检测，似乎一种方法是使用 JS 方法 getBoundingClientRect 获取图像的“外部限制”，然后检查两个图像的外部限制是否完全重叠，如果他们这样做，那就做点什么。但是，我不确定如何使用此方法，并且在进行快速 Google 搜索时找不到任何特别有用的东西。

有谁知道这是否是最好的方法？如果是这样，您能否发布一个如何使用 getBoundingClientRect 方法的示例？或者，如果不能，您还会怎么做？

编辑 17/12/2012 @ 16:45

顺便说一句，我正在使用 KineticJS 库(我在本地保存的一个副本以进行一两次更改)来添加拖放功能，所以我假设库中会有一些我需要的东西更改/添加以添加碰撞检测。

有人有什么想法吗？

编辑 01/01/2013 @ 12:35

您好，感谢您的回答 - 这似乎正是我想要做的。我已经将所有图像都显示在 Canvas 上，其中有四个“静态”图像，不能在 Canvas 上拖动——这些是我想用作“拖放区”的图像，并且可以拖动和放下其余的。我不太确定如何将您的代码提供的功能添加到我已有的功能中？如果您转到 URL:users.aber.ac.uk/eef8/project/development/featureset2dev，您将能够看到我已经在做的工作。

要将“dropzone”功能添加到我的描述框，我应该将它们添加到 Canvas 中吗

var i = new Image(200, 200, 50, 50, 'cat.jpg', 300, 300, 60, 60); 

正如您在示例中所做的那样？

Answer 1

我想说最好的方法是跟踪每个对象的 X/Y 位置以及宽度和高度；使用像这样的简单矩形碰撞函数获取两个对象并检查它们的边界框是否重叠。

function collides(a, b)
{
    if (a.x < b.x + b.width &&
        a.x + a.width > b.x &&
        a.y < b.y + b.height &&
        a.y + a.height > b.y) return true;
}

如果我要这样做，我可能会使用一个附加了拖放区对象的对象来设置它，这样图像只能触发一个拖放区，而不是使用纯 JS 检查 alt 标签。

function Image(x, y, w, h, i, dx, dy, dw, dh)
{
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
    this.image = i;
    this.dropzone = new DropZone(dx, dy, dw, dh);
}

function DropZone(x, y, w, h)
{
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
}

var i = new Image(200, 200, 50, 50, 'cat.jpg', 300, 300, 60, 60);

然后你会有一个循环，当你移动它时更新被拖动图像的坐标。请注意，您不能在 Canvas 内绘制的 Sprite 上使用点击处理程序，只能在 Canvas 本身上使用；您检查鼠标坐标是否在绘制的 Sprite 内部。

当然，另一种方法是使用 HTML5 拖放 API，尽管我没有使用它的经验，但它可能更适合您的需求。

http://www.html5rocks.com/en/tutorials/dnd/basics/