矩形碰撞检测和圆形碰撞检测。

矩形碰撞检测：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
#wrap {
margin: 50px auto;
position: relative;
border: 1px solid #000;
width: 600px;
height: 500px;
}
#div {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: red;
cursor: move;
}
#div2 {
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="wrap">
<div id="div2"></div>
<div id="div">文字</div>
</div>
<script type="text/javascript">
(function(){
var div = document.querySelector('#div');
var maxX = div.offsetParent.clientWidth - div.offsetWidth;
var maxY = div.offsetParent.clientHeight - div.offsetHeight;
div.addEventListener('mousedown', function(e) {
e.preventDefault();
var start = {x: e.clientX,y: e.clientY};
var elOffset = {x: div.offsetLeft,y: div.offsetTop};
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', end);
function move(e){
var dis = {x:e.clientX - start.x,y:e.clientY - start.y};
var x = dis.x + elOffset.x;
var y = dis.y + elOffset.y;
x = x<0?0:(x>maxX?maxX:x);
y = y<0?0:(y>maxY?maxY:y);
console.log(x);
div.style.left = x + "px";
div.style.top = y + "px";
if(getCollide(div,div2)){
div2.style.background = "green";
} else {
div2.style.background = "yellow";
}
}
function end(){
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', end);
}
});
})();
//碰撞返回 true 否则返回 false
function getCollide(el,el2){
var rect = el.getBoundingClientRect();
var rect2 = el2.getBoundingClientRect();
if(rect.right < rect2.left
||rect.left > rect2.right
||rect.bottom<rect2.top
||rect.top>rect2.bottom){
return false;
}
return true;
}
</script>
</body>
</html>

圆形碰撞检测：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
#wrap {
margin: 50px auto;
position: relative;
border: 1px solid #000;
width: 600px;
height: 500px;
}
#div {
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 80px;
background: red;
cursor: move;
border-radius: 50%;
}
#div2 {
position: absolute;
left: 50%;
top: 50%;
margin: -60px 0 0 -60px;
width: 120px;
height: 120px;
background: yellow;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="div2"></div>
<div id="div"></div>
</div>
<script type="text/javascript">
(function(){
var div = document.querySelector('#div');
var maxX = div.offsetParent.clientWidth - div.offsetWidth;
var maxY = div.offsetParent.clientHeight - div.offsetHeight;
div.addEventListener('mousedown', function(e) {
e.preventDefault();
var start = {x: e.clientX,y: e.clientY};
var elOffset = {x: div.offsetLeft,y: div.offsetTop};
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', end);
function move(e){
var dis = {x:e.clientX - start.x,y:e.clientY - start.y};
var x = dis.x + elOffset.x;
var y = dis.y + elOffset.y;
x = x<0?0:(x>maxX?maxX:x);
y = y<0?0:(y>maxY?maxY:y);
console.log(x);
div.style.left = x + "px";
div.style.top = y + "px";
if(getCollide(div,div2)){
div2.style.background = "green";
} else {
div2.style.background = "yellow";
}
}
function end(){
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', end);
}
});
})();
//碰撞返回 true 否则返回 false
function getCollide(el,el2){
var rect = el.getBoundingClientRect();
var rect2 = el2.getBoundingClientRect();
var R1 = rect.width/2;
var R2 = rect2.width/2;
var centerX = rect.left + R1;
var centerY = rect.top + R1;
var center2X = rect2.left + R2;
var center2Y = rect2.top + R2;
var x = Math.abs(center2X - centerX);
var y = Math.abs(center2Y - centerY);
if(Math.sqrt(x*x + y*y) <= R1+R2){
return true;
}
return false;
}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/catEatBird/p/7068209.html

矩形碰撞检测和圆形碰撞检测。相关推荐

unity物理碰撞检测和触发器碰撞检测的区别
场景: 在 Unity 中,物理碰撞检测和触发器碰撞检测是两种不同的机制. 物理碰撞检测物理碰撞检测是指两个物体之间发生了物理碰撞,例如两个物体相撞或者一个物体撞上了墙壁等等.当两个物体发生物理碰撞 ...
Opencv(六)模板匹配、轮廓检测、轮廓周围绘制矩形框和圆形框
模板匹配介绍模板匹配就是在整个图像区域发现与给定子图像匹配的小块区域. 所以模板匹配首先需要一个模板图像T(给定的子图像) 另外需要一个待检测的图像-源图像S 工作方法,在带检测图像上,从左到右,从 ...
2D游戏中的碰撞检测：圆形与矩形碰撞检测（JavascriptC++版）
这几天放寒假了,时间也多了起来,当然又有时间搞搞程序了.哈哈~ 昨天在开发我的塔防游戏时突然发现人物实际攻击范围比规定的范围小,按理说应该是一样大的,但偏偏不是,我被这个问题搞得糊里糊涂的,一直没想出 ...
碰撞检测算法：点和矩形碰撞、点和圆形碰撞、矩形碰撞、圆形碰撞
一,原理介绍这回有点复杂,不过看懂了还是很好理解的.当然,我不敢保证这种算法在任何情况下都会起效果,如果有同学测试时,发现出现错误,请及时联系我. 我们首先来建立一个以圆心为原点的坐标系: 然后要检 ...
2d游戏碰撞检测C语言,2D游戏中的碰撞检测：圆形与矩形碰撞检测（Javascrip版）...
一,原理介绍这回有点复杂,不过看懂了还是很好理解的.当然,我不敢保证这种算法在任何情况下都会起效果,如果有同学测试时,发现出现错误,请及时联系我. 我们首先来建立一个以圆心为原点的坐标系: 然后要检 ...
java 像素级碰撞检测,» 像素级碰撞检测类
//像素级碰撞检测 package { import flash.display.BitmapData; import flash.display.BlendMode; import flash.di ...
JAVA碰撞检测无效_碰撞检测不适用于Pygame中的精灵
我最近尝试通过将我的基本 rect 和图像更改为更高级的 Class 系统来升级我正在处理的游戏的代码 . 但是,我似乎遇到了我的碰撞检测问题,当我告诉我的精灵 hg 在与 floor (或任何输入的 ...
Glide加载常用类型图片（带白色边框的圆形图、圆角矩形图片、圆形图片）
一:依赖包: Glide_github implementation 'com.github.bumptech.glide:glide:4.8.0' annotationProcessor 'com. ...
Python 将矩形图片转为圆形图片
使用PIL库将矩形图片转为原型图片 from PIL import Image, ImageDraw, ImageFilterdef crop_max_square(pil_img):return c ...

矩形碰撞检测和圆形碰撞检测。

矩形碰撞检测和圆形碰撞检测。相关推荐

最新文章

热门文章