我正在使用HTML5画布和JavaScript创建一个简单的基于web的游戏。我目前在画布上展示了一些图像，每个图像都代表在快餐店发现的物品。我还有四个"描述框"，每个都标有资产、负债、收入或支出。
每个图像都属于其中一个描述框，用户需要将每个图像拖放到正确的描述框中。
我计划检查用户是否使用持有框图像的JS变量的名称和每个项目图像的HTML alt标签将图像拖到了正确的框中，即img"chair"有alt标签"asset"，资产的描述框有变量名称"assetsDescriptionBox"，因此，我会使用"if"语句来检测用户拖动的图像是否被拖到了画布上与显示资产描述框的区域相同的区域，如果该图像带有alt标签"asset"，它就会从画布上消失(并添加到数组中以供游戏后期使用)。
然而，如果用户拖动的图像没有alt标签"asset"，而是有其他标签，即"responsibility"，那么它将被重新绘制在画布上，回到最初绘制的位置。
我不确定的是如何实现这一点。我已经研究过碰撞检测，似乎有一种方法是使用JS方法getBoundingClientRect来获取图像的"外部界限"，然后检查两个图像的外部界限是否重叠，如果重叠了，就做点什么。但是，我不确定如何使用这种方法，在谷歌快速搜索时也找不到任何特别有用的东西。
有人知道这是否是最好的方法吗？如果是的话，你能发布一个如何使用getBoundingClientRect方法的例子吗？如果没有，你还会怎么做？
编辑17/12/2012@16:45
顺便说一句，我正在使用KineticJS库(我在本地保存了一个副本，对其进行了一两次更改)来添加拖放功能，所以我认为库中有一些东西需要更改/添加才能添加碰撞检测。
有人有什么想法吗？
编辑2013年1月1日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);
就像你在你的例子中所做的那样？
我认为最好的方法是跟踪每个对象的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);
然后你会有一个循环，当你移动拖动的图像时，它会更新它的坐标。注意，你不能在画布内的绘制精灵上有点击处理程序，只能在画布本身上；检查鼠标坐标是否在绘制的精灵中。
当然，另一种方法是使用HTML5拖放API，尽管我没有使用经验，它可能更适合您的需求。
http://www.html5rocks.com/en/tutorials/dnd/basics/