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 相关文章推荐
JavaScript脚本语言在网页中的简单应用
May 13 Javascript
javascript 树控件 比较好用
Jun 11 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
eslint 的三大通用规则详解
May 16 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 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脚本的10个技巧(8)
2006/10/09 PHP
初级的用php写的采集程序
2007/03/16 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript jQuery插件练习
2008/12/24 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
react redux入门示例
2018/04/19 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
Python 爬虫性能相关总结
2020/08/03 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
中专生毕业自我鉴定
2013/11/01 职场文书
工作时间上网检讨书
2014/02/03 职场文书
上课打牌的检讨书
2014/02/15 职场文书
生物制药专业求职信
2014/03/11 职场文书
洗发露广告词
2014/03/14 职场文书
促销活动总结模板
2014/07/01 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
工商行政处罚决定书
2015/06/24 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript