HTML5 移动端实现九宫格碰撞

来源：互联网发布：windows phone 应用编辑：程序博客网时间：2024/06/07 09:09

九宫格碰撞

getClientRects()方法
返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合。DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

相关代码：    <!DOCTYPE html>    <html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *{                margin: 0;                padding: 0;            }            #box{                position: absolute;                width: 100px;                height: 100px;                background-color: yellowgreen;                z-index: 2;            }            #wrap{                position: absolute;                top: 200px;                left: 400px;                width: 300px;                height: 200px;                background-image: url(img/b.jpg);                background-repeat: no-repeat;                background-size: 100% 100%;            }        </style>    </head>    <body>        <div id="box"></div>        <div id="wrap"></div>    </body>    <script type="text/javascript">        var box=document.getElementById('box');        var wrap=document.getElementById('wrap');        var eleP={left:0,top:0};        var mouseS={left:0,top:0};        box.onmousedown=function (event) {            eleP.top=box.offsetTop;            eleP.left=box.offsetLeft;            mouseS.top=event.clientY;            mouseS.left=event.clientX;            document.onmousemove=function (event) {                var mouseE={left:0,top:0};                mouseE.top=event.clientY;                mouseE.left=event.clientX;                var disX=mouseE.left-mouseS.left;                var disY=mouseE.top-mouseS.top;                var top=disY+eleP.top;                var left=disX+eleP.left;                var leftM=document.documentElement.clientWidth-box.offsetWidth;                var topM=document.documentElement.clientHeight-box.offsetHeight;                if(top<0){                    top=0;                }else if(top>topM){                    top=topM;                }                if(left<0){                    left=0;                }else if(left>leftM){                    left=leftM;                }                box.style.left=left+'px';                box.style.top=top+'px';                var T1=box.getBoundingClientRect().top;                var L1=box.getBoundingClientRect().left;                var R1=box.getBoundingClientRect().right;                var B1=box.getBoundingClientRect().bottom;                var T2=wrap.getBoundingClientRect().top;                var L2=wrap.getBoundingClientRect().left;                var R2=wrap.getBoundingClientRect().right;                var B2=wrap.getBoundingClientRect().bottom;                if( R1<L2 || B1<T2 || R2<L1 || B2<T1){                    wrap.style.backgroundImage='url(img/b.jpg)';                }else {                    wrap.style.backgroundImage='url(img/a.jpg)';                }            };            document.onmouseup=function () {                document.onmousemove=document.onmouseup=null;            }            return false;        };    </script>    </html>

阅读全文

0 0

HTML5 移动端 实现九宫格碰撞

九宫格碰撞

HTML5 移动端实现九宫格碰撞