JS实现判断碰撞的方法


Posted in Javascript onFebruary 11, 2015

本文实例讲述了JS实现判断碰撞的方法。分享给大家供大家参考。具体如下:

JS判断碰撞方法:

/** 判断是否碰撞 

 * @param obj 原对象 

 * @param dobj 目标对象 

 */  

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;  

    }  

}  

  

/** 获取对象属性 

 * @param obj       对象 

 * @param attribute 属性 

 */  

function getDefaultStyle(obj, attribute) {  

    return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute]);  

}

示例如下:

<!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; width:200px; height:200px; z-index:999}  

    #f2{position:absolute; background:#FFFF00; top:0px; left:0px; width: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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
用js实现放大镜效果
Oct 28 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
javascript异步编程代码书写规范Promise学习笔记
Feb 11 #Javascript
jquery实现动态操作select选中
Feb 11 #Javascript
JS操作HTML自定义属性的方法
Feb 10 #Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 #Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 #Javascript
javascript中定义类的方法详解
Feb 10 #Javascript
JavaScript判断浏览器类型的方法
Feb 10 #Javascript
You might like
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
PHP crc32()函数讲解
2019/02/14 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
说一说Python logging
2016/04/15 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
python 经典数字滤波实例
2019/12/16 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Django xadmin安装及使用详解
2020/10/26 Python
django中ImageField的使用详解
2020/12/21 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
css3实现动画的三种方式
2020/08/24 HTML / CSS
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
毕业自我鉴定范文
2013/11/06 职场文书
学生违反校规检讨书
2014/10/28 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS