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实现检测浏览器及版本的脚本代码
Jan 22 Javascript
javascript调试说明
Jun 07 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
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反射API的中文说明
2014/07/02 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
prototype 的说明 js类
2006/09/07 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
javascript 回调函数详解
2014/11/11 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
python实现决策树分类(2)
2018/08/30 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
python实现代码统计程序
2019/09/19 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
会计电算化专业毕业生推荐信
2013/12/24 职场文书
小学生新学期寄语
2014/01/19 职场文书
乔迁之喜主持词
2014/03/27 职场文书
赔偿协议书范本
2014/09/12 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
Python快速实现一键抠图功能的全过程
2021/06/29 Python
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers