标签：rx ry 碰撞检测 坐标 矩形 rh Rectangle
目录
引子
在 Collision Detection ：Point 中主要介绍了点的碰撞检测，接着来看看矩形的情况。
以下示例未做兼容性检查，建议在最新的 Chrome 浏览器中查看。
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; // 下边界
if (isTrue) {
return true; // 发生碰撞
} else {
return false; // 没有碰撞
}
}
Rectangle/Rectangle
这是示例页面。
矩形与矩形的碰撞检测，看下面一张图：
通过观察可以得知，两个矩形发生碰撞，需要符合的条件是：
/*
* (r1x,r1y) 矩形1顶点的坐标
* (r2x,r2y) 矩形2顶点的坐标
* r1w r1h 矩形1的宽度和高度
* r2w r2h 矩形2的宽度和高度
*/
function checkRectangleRectangle({r1x,r1y,,r1w,r1h,r2x,r2y,r2w,r2h}) {
const isTrue = r1x + r1w >= r2x && // 矩形 2 左边界
r1x <= r2x + r2w && // 矩形 2 右边界
r1y + r1h >= r2y && // 矩形 2 上边界
r1y <= r2y + r2h; // 矩形 2 下边界
if (isTrue) {
return true; // 发生碰撞
} else {
return false; // 没有碰撞
}
}
Rectangle/Circle
这是示例页面。
矩形与圆的碰撞检测，思路是：
- 首先要确定圆处于矩形那个边界；
- 然后在边界上确定与圆心距离最短的点；
- 最后使用勾股定理计算出距离，与圆心半径进行比较。
/*
* (cx,cy) 圆心的坐标
* radius 圆的半径
* (rx,ry) 矩形顶点的坐标
* rw 矩形的宽度
* rh 矩形的高度
*/
function checkRectangleCircle({cx,cy,radius,rx,ry,rw,rh}) {
let nearestX = cx,nearestY = cy; // 初始化边界上离圆心最近的点坐标
if (cx < rx) {
nearestX = rx;
} else if (cx > rx + rw) {
nearestX = rx + rw;
}
if (cy < ry) {
nearestY = ry;
} else if (cy > ry + rh) {
nearestY = ry + rh;
}
const distX = cx-nearestX;
const distY = cy-nearestY;
const distance = Math.sqrt( (distX*distX) + (distY*distY) );
if (distance <= radius) {
return true; // 发生碰撞
} else {
return false; // 没有碰撞
}
}
参考资料
标签：rx,ry,碰撞检测,坐标,矩形,rh,Rectangle 来源： https://www.cnblogs.com/thyshare/p/13625237.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。