JavaScript 简单碰撞检测

引子

碰撞检测（Collision Detection）这个东西，之前找 canvas 相关资料的时候碰到过，有些好奇，就去尝试了解一下。

• Origin
• My GitHub

简介

与碰撞检测有些类似的一个概念：命中检测（Hit-testing），也被广泛运用。

在计算机图形编程中，命中检测是确定用户控制的光标（或触摸屏上的触摸点）是否与屏幕上绘制的给定图形对象（如形状）产生相交的过程。根据这个定义，web 开发中碰到鼠标点击下拉菜单等这些交互都属于这个范畴。

碰撞检测用于检测多个不同图形对象的交叉点，不是光标与一个或多个图像对象的交叉点。在 web 游戏中也涉及到这些，2D 游戏中的碰撞检测算法，依赖于碰撞物体的形状（例如矩形与矩形、矩形与圆形、圆形与圆形）。基于 canvas，下面看看几种简单的情景。

光标碰撞检测

使用 canvas 创建交互时，在画布内点击，如果需要判断点击所在的图形，就需要做碰撞检测。思路比较简单，就是要检测光标点击的坐标是否在某个形状里面。在测试中发现几点需要注意：

• 遍历形状的顺序，因为绘制的图形可能重叠，后绘制的一般在上层，这个时候倒序遍历才合理。
• 获取点击坐标时，注意移动端和 PC 端对应属性，移动端 touch 属性中可能有多个坐标。
• 图形的形状，规则图形和非规则图形判断的方式有差异。

这是简单的示例，移动端访问如下：

基于像素颜色碰撞检测

上面数学计算的方式，如果在一些图案信息较多的情况下，需要存储大量的数据，会非常的不方便。另外的一种方式就是取得像素块，检测它们的颜色。例如这个示例，移动端访问如下：

示例中矩形区域是图片，其中线条颜色都是黑色，实现的思路是在小球移动之前，先取包含了小球且比小球稍