37-使用像素检测物体碰撞

4.10　使用像素检测物体碰撞

用户可以使用context.getImageData()函数对两个图像对象执行像素级的碰撞检测。

提示

在写作本书时，笔者必须通过Web服务器来运行这个应用程序，才能在画布上操作本地图片的数据。如果读者使用的是Safari浏览器（本书使用5.1.7版），那么可以在本地硬盘上成功测试这个应用程序。

虽然这不是一个简单的任务，但也不难。不过有一点必须记住：当调用getImageData()函数时，只是从画布上复制图像的颜色值，而不是复制图像本身。因此，不能只是简单地使用图片对象作为碰撞实验的数据源，而是应该将从画布复制到的数据赋值给一个变量，并使用该变量进行碰撞测试。

提示

读者可以通过访问相关网站来了解关于碰撞检测以及相关内容的详细信息。

检测两个物体每一个像素的透明度是一个开销巨大的操作。所以，在检测每个物体的每个像之前，需要先检测物体的边缘是否发生了碰撞。这里将使用boundingBoxCollide()函数进行检测。在例4-18以及第8章和第9章中创建Canvas游戏时都使用了该函数。

function boundingBoxCollide(object1, object2) {
　　var left1 = object1.x;
　　var left2 = object2.x;
　　var right1 = object1.x + object1.width;
　　var right2 = object2.x + object2.width;
　　var top1 = object1.y;
　　var top2 = object2.y;
　　var bottom1 = object1.y + object1.height;
　　var bottom2 = object2.y + object2.height;
　　if (bottom1 < top2) return(false);
　　if (top1 > bottom2) return(false);
　　if (right1 < left2) return(false);
　　if (left1 > right2) return(false);
　　return(true);
}

可以看到，该函数共有两个参数。这两个参数就是需要检测是否发生碰撞的两个对象。只要传入的对象包含x、y和width、height属性，该函数就能正确运行。首先，来看看进行碰撞检测的对象。