zoukankan      html  css  js  c++  java
  • js碰撞检测

    这篇文章主要介绍了JS实现判断碰撞的方法,实例分析了通过js判断实体碰撞的技巧与相关应用,需要的朋友可以参考下

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    <html>  
     <head>  
      <title> demo </title>  
      <style type="text/css">  
      body{margin:0px;}  
        .main{position:relative;}  
        #f1{position:absolute; background:#FF0000; top:100px; left:100px; 200px; height:200px; z-index:999}  
        #f2{position:absolute; background:#FFFF00; top:0px; left:0px; 600px; height:150px;}  
      </style>  
     </head>  
     <body>  
     <div class="main">  
        <div id="f1"></div>  
        <div id="f2"></div>  
     </div>  
     <script type="text/javascript">  
        var o = document.getElementById("f1");  
        var d = document.getElementById("f2");  
        alert(impact(o, d)); 

        function impact(obj, dobj) {  
            var o = {  
                x: getDefaultStyle(obj, 'left'),  
                y: getDefaultStyle(obj, 'top'),  
                w: getDefaultStyle(obj, 'width'),  
                h: getDefaultStyle(obj, 'height')  
            } 

            var d = {  
                x: getDefaultStyle(dobj, 'left'),  
                y: getDefaultStyle(dobj, 'top'),  
                w: getDefaultStyle(dobj, 'width'),  
                h: getDefaultStyle(dobj, 'height')  
            } 

            var px, py; 

            px = o.x <= d.x ? d.x : o.x;  
            py = o.y <= d.y ? d.y : o.y;  
      
            // 判断点是否都在两个对象中  
            if (px >= o.x && px <= o.x + o.w && py >= o.y && py <= o.y + o.h && px >= d.x && px <= d.x + d.w && py >= d.y && py <= d.y + d.h) {  
                return true;  
            } else {  
                return false;  
            }  
        } 

        function getDefaultStyle(obj, attribute) {  
            return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute]);  
        }  
     </script>  
     </body>  
    </html>

  • 相关阅读:
    group_concat函数与find_in_set()函数相结合
    PHP获取指定时间的上个月
    CI框架 数据库批量插入 insert_batch()
    PHP可变长函数方法介绍
    js闭包理解
    Android百度地图开发(一)之初体验
    Activity的四种启动模式和onNewIntent()
    再探Java基础——throw与throws
    Failed to load JavaHL Library解决方法
    Eclipse中添加Android系统jar包
  • 原文地址:https://www.cnblogs.com/yuan010101/p/6011780.html
Copyright © 2011-2022 走看看