原生JS實(shí)現(xiàn)判斷碰撞的方法（趣味實(shí)例）

<div id="d1"></div> 
<div id="d2"></div>

<style type="text/css"> 
 * { 
 padding: 0px; 
 margin: 0px; 
 } 
 #d1{ 
 width: 100px; 
 height: 100px; 
 background: red; 
 position: absolute; 
 } 
 #d2{ 
 width: 200px; 
 height: 200px; 
 background: yellow; 
 position: absolute; 
 top: 200px; 
 left: 400px; 
 position: absolute; 
 } 
</style>

<script type="text/javascript"> 
 div=document.querySelectorAll("div"); 
function hit(obj){ 
 obj.onmousedown=function(e){ 
 var e=e||window.event; 
 var dX=e.offsetX; 
 var dY=e.offsetY; 
 document.onmousemove=function(e){ 
 var x=e.clientX; 
 var y=e.clientY; 
 obj.style.left=x-dX+"px"; 
 obj.style.top=y-dY+"px"; 
 if(div[0].offsetTop+div[0].offsetHeight>=div[1].offsetTop && div[0].offsetTop<=div[1].offsetTop+div[1].offsetHeight && div[0].offsetLeft+div[0].offsetWidth>=div[1].offsetLeft && div[0].offsetLeft<=div[1].offsetLeft+div[1].offsetWidth){ 
 console.log("你撞我了！再撞一個(gè)試試！") 
 }; 
 } 
 document.onmouseup=function(){ 
 document.onmousemove=null; 
 } 
} 
} 
hit(div[0]); 
hit(div[1]); 
</script>