這次為大家例項講述了JS實現判斷碰撞的方法。碰撞的應用場景非常多比如，放煙花、小球碰壁反彈、畫素鳥等，所以我們先要弄清除如何進行碰撞判斷，才能進行以後的操作。

HTML頁面程式碼：

<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("你撞我了！再撞一個試試！")
			};
	}
	document.onmouseup=function(){
		document.onmousemove=null;
	}
}	
}
hit(div[0]);
hit(div[1]);
</script>