js 碰撞检测
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>九宫格碰撞</title>
<style>
#box{ width:300px; height:300px; border:1px solid #ccc; margin:50px auto;}
#box span{ display:block; width:100px; height:100px; float:left; color:#000; font-size:40px; text-align:center; line-height:100px; cursor:pointer; }
#box span.bor{ border:1px dashed #f00; position:absolute;}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById(‘box‘);
var aSpan=oBox.getElementsByTagName(‘span‘);
for(var i=aSpan.length-1;i>=0;i--){
aSpan[i].innerHTML=i+1;
aSpan[i].style.background=‘rgb(‘+rand(0,255)+‘,‘+rand(0,255)+‘,‘+rand(0,255)+‘)‘;
var ls=getPos(aSpan[i]).left;
var ts=getPos(aSpan[i]).top;
aSpan[i].style.left=ls+‘px‘;
aSpan[i].style.top=ts+‘px‘;
aSpan[i].style.position=‘absolute‘;
//设置坐标 为什么这儿不能用这个函数呢？请牛人指教下；
//setAttr(aSpan[i],{left:ls+‘px‘,top:ts+‘px‘,position:‘absolute‘});
drag(aSpan[i]);
}
//生成n-m之间的随机数
function rand(n,m){
return parseInt( Math.random()*(m-n+1)+n)
};
//获取样式
function getStyle(obj,attr){
return getComputedStyle()?getComputedStyle(obj,flase)[attr]:obj.getCurrentStyle(attr)
};
//获取坐标
function getPos(obj){
var l=0,t=0;
while(obj){
l+=obj.offsetLeft;
t+=obj.offsetTop;
obj=obj.offsetParent;
}
return {left:l,top:t}
}
//设置css
function setAttr(obj,json){
//alert(obj)
for(i in json){
obj.style[i]=json[i];
}
}
function isPeng(obj1,obj2){
var l1 = obj1.offsetLeft,
r1 = obj1.offsetLeft + obj1.offsetWidth,
t1 = obj1.offsetTop,
b1 = obj1.offsetTop + obj1.offsetHeight,
l2 = obj2.offsetLeft,
r2 = obj2.offsetLeft + obj2.offsetWidth,
t2 = obj2.offsetTop,
b2 = obj2.offsetTop + obj2.offsetHeight;
if(r1<l2 || b1<t2 || l1>r2 || t1>b2)return false;
return true;
}
var z=0;
//拖动效果
function drag(obj){
obj.onmousedown=function(ev){
z++;
var oEvent=ev||event;
var oNewSpan=document.createElement(‘span‘);
oNewSpan.className=‘bor‘;
setAttr(oNewSpan,{left:obj.offsetLeft+‘px‘,top:obj.offsetTop+‘px‘});
var oPar=this.parentNode;
oPar.appendChild(oNewSpan)
obj.style.zIndex=z;
var disX=oEvent.clientX-this.offsetLeft;
var disY=oEvent.clientY-this.offsetTop;
//记录刚开始的创建的span的坐标；
var posJson={l:obj.offsetLeft,t:obj.offsetTop};
document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
setAttr(obj,{left:l+‘px‘,top:t+‘px‘});
var i=0,len=aSpan.length,m=9999999999999999,near;
for(i;i<len;i++){
if(aSpan[i]==obj)continue;
if(isPeng(aSpan[i],obj)){
var ls=Math.abs(aSpan[i].offsetLeft-obj.offsetLeft);
var ts=Math.abs(aSpan[i].offsetTop-obj.offsetTop);
var cs=ts*ts+ls*ls;
if(cs<m){
m=cs;
near=aSpan[i];
}
}
}
if(!near || near==obj){
return;
}else{
setAttr(oNewSpan,{left:near.offsetLeft+‘px‘,top:near.offsetTop+‘px‘});
setAttr(near,{left:posJson.l+‘px‘,top:posJson.t+‘px‘});
posJson.l=oNewSpan.offsetLeft;
posJson.t=oNewSpan.offsetTop;
}
}
document.onmouseup=function(){
document.onmousemove=document.onmouseup=null;
oPar.removeChild(oNewSpan)
setAttr(obj,{left:posJson.l+‘px‘,top:posJson.t+‘px‘});
}
return false;
}
}
}
</script>
</head>
<body>
<div id="box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
