JS达成轻巧的转移碰撞效果示例,原生JS达成的碰撞检查评定效能示例

正文实例陈诉了原生JS达成的碰撞检测成效。分享给我们供我们仿照效法,具体如下:

本文实例汇报了JS达成轻便的退换碰撞效果。共享给大家供我们参考,具体如下:

<!doctype html><html><head><meta charset="utf-8"><title>www.jb51.net 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><head><meta charset="UTF-8"><title>www.jb51.net JS碰撞效果</title><script language="javascript"><!-- directX=1; //X轴方向 directY=1; //Y轴方向 sunX=0; sunY=0; function sunMov(){ //定两个方向 sunX+=directX*2; sunY+=directY*2; //修改div的left top sundiv.style.top=sunY+"px"; sundiv.style.left=sunX+"px"; //判断什么时候,转变方向 //x方向(offestWidth可以返回,当前这个对象的实际宽度) if(sunX+sundiv.offsetWidth>=document.body.clientWidth || sunX<=0){ directX=-directX; } if(sunY+sundiv.offsetHeight>=document.body.clientHeight || sunY<=0){ directY=-directY; } } setInterval("sunMov()",10);//--></script></head><body style="/*background-image:URL('a.jpg');background-size:cover; background-repeat:no-repeat*/"><div id="sundiv" style="position:absolute"><img src="//www.jb51.net/images/logo.gif"/></div></body></html>

此间运用在线HTML/CSS/JavaScript运维工具测验运转作效果果如下(碰撞判定期颜色改换卡塔尔:

运转作效果果:

 图片 1

图片 2

相关文章

Comment ()
评论是一种美德,说点什么吧,否则我会恨你的。。。