碰撞检测 ：Rectangle

引子

在 Collision Detection ：Point 中主要介绍了点的碰撞检测，接着来看看矩形的情况。

以下示例未做兼容性检查，建议在最新的 Chrome 浏览器中查看。

• Origin
• My GitHub

Rectangle/Point

这是示例页面。

绘制矩形可以通过四个点的坐标进行绘制，也可以通过一个顶点的坐标，结合矩形的宽高进行绘制：

矩形与点的碰撞检测，只要点的坐标在矩形的坐标范围之内即可：

/*
 * (px,py) 点的坐标
 * (rx,ry) 矩形顶点的坐标
 * rw 矩形的宽度
 * rh 矩形的高度
 */
function checkRectanglePoint({
   px,py,rx,ry,rw,rh}) {
   
  const isTrue = px >= rx && // 左边界
                 px <= rx + rw && // 右边界
                 py >= ry && // 上边界
                 py <= ry + rh;