矩形碰撞检测和圆形碰撞检测。
矩形碰撞检测：
<!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>
