Question

我正在使用HTML5画布和JavaScript创建一个简单的基于Web的游戏。我目前在画布上显示一些图像，每个图像代表在快餐店中找到的物品。我还有四个“描述框”，每个都标有资产，负债，收入或支出。

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

我计划通过使用包含框图像的JS变量的名称以及每个项目图像的HTML alt标签来检查用户是否已将图像拖动到正确的框中，即img“chair”具有alt标记“资产”，资产的描述框有变量名称“assetsDescriptionBox”，所以我会使用'if'语句来检测用户拖动的图像是否被拖动到画布的同一区域。正在显示描述框，如果该图像具有alt标签“asset”，它将从画布中消失（并添加到数组中以供以后在游戏中使用）。

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

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

有谁知道这是否是最好的方法？如果是这样，你能发布一个如何使用getBoundingClientRect方法的例子吗？或者如果没有，你会怎么做呢？

编辑17/12/2012 @ 16:45

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

有人有什么想法吗？

编辑01/01/2013 @ 12:35

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

要将“dropzone”功能添加到我的描述框中，我应该将它们添加到带有行的画布

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标记。< / p>

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);

然后你有一个循环，当你移动它时更新了拖动图像的坐标。请注意，您不能在画布内的绘制精灵上使用单击处理程序，只能在画布本身上使用;检查鼠标坐标是否在绘制的精灵中。

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

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

为画布上绘制的图像添加碰撞检测

1 个答案: