摘要：碰撞检测，故名思议，两个元素在运动的过程中是否有接触。接下来，我们从简单到复杂的碰撞一一解析其中的算法。假设求出碰撞无碰撞下篇继续讲解当圆与矩形碰撞，等更复杂的碰撞检测
碰撞检测，故名思议，两个元素在运动的过程中是否有接触。
接下来，我们从简单到复杂的碰撞一一解析其中的算法。编码使用JavaScript。
ps:下列图形均指实心图形
这个太简单了，不多说，就是当坐标一致的时候就是碰撞.
//A（x1,y1）B(x2,y2)
if(x1===x2 && y1===y2){
//碰撞
}else{
//无碰撞
}
点与圆的碰撞
点A(x1,y1) 圆心(x2,y2) 半径 r
我们可以看出红色的点与圆心的距离若小于半径，那么点与圆便发生碰撞。
根据勾股定理可以得出距离 d = √((x1-x2)^2 + (y1-y2)^2)
//点A(x1,y1) 圆心(x2,y2) 半径 r
if(Math.sqrt(Math.pow(x1 - x2,2) + Math.pow(y1-y2,2)) <= r){
//碰撞
}else{
//无碰撞
}
圆与圆的碰撞
圆A(x1,y1) 半径r1 ; 圆B(x2,y2) 半径 r2
同样根据勾股定理可以得出距离 d = √((x1-x2)^2 + (y1-y2)^2)
if(Math.sqrt(Math.pow(x1 - x2,2) + Math.pow(y1-y2,2)) <= (r1 + r2)){
//碰撞
}else{
//无碰撞
}
点与矩形的碰撞
首先矩形的表达方式有：
已知四个角的一个顶点(x2,y2)与宽w高h
已知几何中心点(x2,y2)与宽w高h
左上角与右下角两个顶点(x2,y2)、(x3,y3)
//1. 已知四个角的一个顶点(x2,y2)与宽w高h，以左上角为例
if(x1>=x2 && x1<=(x2+w) || (y1>=y2 && y1<=(y2+h))){
//碰撞
}else{
//无碰撞
}
//2. 已知几何中心点(x2,y2)与宽w高h
if(x1 >= (x2-w/2) && x1 <= (x2+w/2) || (y1 >= (y2-h/2) && y1 <= (y2 + h/2))){
//碰撞
}else{
//无碰撞
}
//3. 左上角与右下角两个顶点(x2,y2)、(x3,y3)
if(x1 >= x2 && x1 <= x3 || (y1 >= y2 && y1 <= y3)){
//碰撞
}else{
//无碰撞
}
矩形与矩形的碰撞
无论矩形是由什么数据表示。我们都可以求出几何中心A点与B点的坐标,与矩形宽w1 w2;高h1 h2。
假设求出A(x1,y1) B(x2,y2)
if(Math.abs(x2-x1) <= (w1+w2)/2 && Math.abs(y2-y1) <= (h1+h2)){
//碰撞
}else{
//无碰撞
}
下篇继续讲解当圆与矩形碰撞，等更复杂的碰撞检测
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81735.html
摘要：这篇我们将讲解圆与矩形的碰撞圆与矩形的碰撞检测通常在或者中我们会这样表示一个圆圆心，半径表示矩形中心点坐标平移并以几何中心旋转任意角度展示的矩形即几何中心点你可能会问，如果矩形被旋转了怎么办我们可以在矩形的中心点建立一个新的坐标系统。 这篇我们将讲解圆与矩形的碰撞； 圆与矩形的碰撞检测 通常在svg或者canvas中我们会这样表示一个圆: 圆心(cx,cy)，半径r; 表示矩形：中心...
摘要：来源编程精解中文第三版翻译项目原文译者飞龙协议自豪地采用谷歌翻译部分参考了编程精解第版所有现实都是游戏。黑色的方块表示玩家，玩家任务是收集黄色的方块硬币，同时避免碰到红色素材岩浆。网格中的元素可能是空气固体或岩浆。 来源：ApacheCN『JavaScript 编程精解 中文第三版』翻译项目原文：Project: A Platform Game 译者：飞龙 协议：CC BY-NC-SA...
阅读 1206·2019-08-30 15:55
阅读 954·2019-08-30 15:55
阅读 2149·2019-08-30 15:44
阅读 2879·2019-08-29 14:17
阅读 1129·2019-08-29 12:45
阅读 3301·2019-08-26 10:48
阅读 3132·2019-08-23 18:18
阅读 2599·2019-08-23 16:47
