在日常项目开发中，碰撞检测很多地方用到，特别是在游戏开发中，碰撞检测更是无处不在，当然游戏中的碰撞检测算法是非常复杂的，我们今天要讨论的是一个很简单的碰撞检测，如果检测一个点是否在一个旋转后的矩形中。

首先我们看一下点与为旋转情况下矩形的碰撞检测：

从上图可以看出要判断点x是否在矩形中是很简单的，如果我们把矩形的x，y记做rx，ry，width，height记做rw，rh，x点的坐标记做（x，y），则：

if (x >= rx && x <= rx + rw && y >= ry && y <= ry + rh) {
  // 点在矩形中
}

看完了点与未旋转图形的碰撞检测，我们接着看点与旋转图形的碰撞检测：

在图形旋转的情况下，我们发现再也不能轻易的去检测他们是否碰撞了，那么怎么办呢？我们需要换个思路，既然在当前这种状态下很难检测，那么我们能不能考虑将这种状态转变成一种我们比较容易比较的状态呢？譬如说未旋转的状态，说到这儿解决办法就已经出来了，就是旋转坐标系，矩形的旋转默认是以其宽高的中心点来旋转的，那么如果我们将点也以这个中心点来旋转不就达到了旋转坐标系的的效果了吗？

旋转后，我们得到了如下状态：

现在我们又回到了未旋转的状态，接下来的检测就不用多说了，旋转坐标系的过程中，矩形旋转不用多说，点的旋转还是利用了坐标旋转公式，这点在之前一片文章《js旋转后元素的缩放》中有提到。

现在再回想一下，点与旋转图形的碰撞检测，是不是很简单呢？当然在实际开发中，碰撞检测会比这个复杂的太多太多，比如不规则图形的碰撞检测，还涉及什么投影之类的，但是只有学会了基础的，我们才能学好复杂的不是吗？

最后的最后附上最终的效果，猛戳这里查看