碰撞檢測

首先我們先要了解一下碰撞檢測有什么用?

碰撞檢測常用於游戲開發,通過碰撞檢測判斷前面是否有障礙物以及兩個物體是否發生碰撞,根據檢測的結果做出不同的處理,

碰撞檢測就是查看物體是否重合

下面寫一個簡單的碰撞檢測代碼

 

首先創建兩個正方形div

        <div id="box1">移動</div>
	<div id="box2">障礙</div>        

　　

在設置顏色

			div{
				width:100px;
				height: 100px;
				position: absolute;
				background: bisque;
				text-align: center;
				line-height: 100px;
				color:rebeccapurple;
			}
			#box2{
				left:300px;
				top:200px;
			}

　寫出移動正方形判斷是否碰撞

var box = document.getElementsByTagName('div');
		box[0].onmousedown = function(){
			var disX = event.clientX - this.offsetLeft;
			var disY = event.clientY - this.offsetTop;
			document.onmousemove = function(){
				box[0].style.left = event.clientX - disX + "px";
				box[0].style.top = event.clientY - disY + "px";
				if(collision(box[0],box[1])){
					//碰到了
					box[1].style.background = "pink"
				}else{
					box[1].style.background = "lightseagreen";
				}
			}
			document.onmouseup = function(){
				document.onmousemove = null;
			}
		}

　　

 

　這邊把檢測寫成函數了

function collision(obj1,obj2){
			//obj1的四條邊
			var l1 = obj1.offsetLeft;
			var r1 = l1 + obj1.offsetWidth;
			var t1 = obj1.offsetTop;
			var b1 = t1 + obj1.offsetHeight;
			//obj2的四條邊
			var l2 = obj2.offsetLeft;
			var r2 = l2 + obj2.offsetWidth;
			var t2 = obj2.offsetTop;
			var b2 = t2 + obj2.offsetHeight;

			if(r2 < l1 || b2 < t1 || l2 > r1 || t2 > b1){
				return false
			}else{
				return true
			}

		}

　　調用函數, obj是要指定傳參數

	function drag(obj){
			obj.onmousedown = function(){
				//記錄鼠標在元素上的坐標位置
				var disX = event.clientX - this.offsetLeft;
				var disY = event.clientY - this.offsetTop;
				document.onmousemove = function(){
					obj.style.left = event.clientX - disX + "px";
					obj.style.top = event.clientY - disY + "px";
				}
				document.onmouseup = function(){
					document.onmousemove = null;
				}
			}
		}
		drag(box[1])