原生JS實現的碰撞檢測功能示例

2019-11-19 13:48:54

字體：大中小

來源：轉載

供稿：網友

本文實例講述了原生JS實現的碰撞檢測功能。分享給大家供大家參考，具體如下：

<!doctype html><html><head><meta charset="utf-8"><title>www.survivalescaperooms.com JS碰撞檢測</title><style>div{width:100px;  height:100px;}#box{background:red; position:absolute; }#box1{background:green;position:absolute;top:300px; left:300px;}</style><script>//兩個碰撞的盒子。是建立在一個不動的基礎上。所以可以根據不動的盒子求出四個方向的left和top值。然后再判斷其是否碰撞，且碰撞的過程隨時改變其層級，（原需 var 8個變量，現在只需4個變量）function collText(obj,left,top,obj1){      var l1=obj.offsetLeft-obj.offsetWidth;      var t1=obj.offsetTop-obj.offsetHeight;      var r1=obj.offsetLeft+obj.offsetWidth;      var b1=obj.offsetTop+obj.offsetHeight;      if(left<l1||top<t1||left>r1||top>b1){        obj.style.zIndex=3;        obj1.style.zIndex=1;        return true;      }else{        obj.style.zIndex=1;        obj1.style.zIndex=3;        return false;      }};window.onload=function(){  var oBox=document.getElementById('box');  var oBox1=document.getElementById('box1');  oBox.onmousedown=function(ev){    var oEvent= ev  ||  event;    var disX=oEvent.clientX-oBox.offsetLeft;    var disY=oEvent.clientY-oBox.offsetTop;    document.onmousemove=function(ev){      var oEvent= ev ||  event;      var l=oEvent.clientX-disX;      var t=oEvent.clientY-disY;      oBox.style.left=l+'px'  ;      oBox.style.top=t+'px'  ;      if(collText(oBox1,l,t,oBox)){        oBox1.style.background='green';      }else{        oBox1.style.background='yellow';      }    };    document.onmouseup=function(){      document.onmousemove=null;      document.onmouseup=null;      oBox.reseaseCapture&&oBox.reseaseCapture();    };    oBox.setCapture&&oBox.setCapture();    return false;  }  oBox1.onmousedown=function(ev){    var oEvent= ev ||  event;    var disX1=oEvent.clientX-oBox1.offsetLeft;    var disY1=oEvent.clientY-oBox1.offsetTop;    document.onmousemove=function(ev){      var oEvent= ev ||  event;      var le=oEvent.clientX-disX1;      var to=oEvent.clientY-disY1;      oBox1.style.left=le+'px'  ;      oBox1.style.top=to+'px'  ;      if(collText(oBox,le,to,oBox1)){        oBox.style.background='red';      }else{        oBox.style.background='#000';      }    };    document.onmouseup=function(){      document.onmousemove=null;      document.onmouseup=null;      oBox1.reseaseCapture&&oBox1.reseaseCapture();    }    oBox1.setCapture&&oBox1.setCapture();    return false;  }}</script></head><body><div id="box"></div><div id="box1"></div></body></html>

這里使用在線HTML/CSS/JavaScript運行工具http://tools.VeVB.COm/code/HtmlJsRun測試運行效果如下（碰撞判定時顏色改變）：