JS实现碰撞检测的方法分析

时间: 2018-01-26阅读: 1454标签: 方法

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

一个简单的碰撞检测例子,检测div1是否和div2发生碰撞,当div1碰到div2时,改变div2的颜色,看测试图


看一下分析图:


当div1在div2的上边线(t2)以上的区域活动时,始终碰不上
当div1在div2的右边线(r2)以右的区域活动时,始终碰不上
当div1在div2的下边线(b2)以下的区域活动时,始终碰不上
当div1在div2的左边线(r2)以左的区域活动时,始终碰不上

除了以上四种情况,其他情况表示div1和div2碰上了,下面试完整测试代码

HTML部分:

<div id="div1"></div>
<div id="div2"></div>


css部分:

<style>
    #div1{
      width:100px ;height: 100px;background: green;
      position: absolute;
    }
    #div2{
      width:100px ;height: 100px;background: yellow;
      position: absolute;left: 300px;top: 200px;z-index: -1;
    }
</style>


JS部分:

<script>
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function (ev) {
      var ev = ev|| window.event;
      disX = ev.clientX - oDiv.offsetLeft;
      disY = ev.clientY - oDiv.offsetTop;
      document.onmousemove = function (ev) {
        var ev = ev|| window.event;
        var t1 = oDiv.offsetTop;
        var l1 = oDiv.offsetLeft;
        var r1 = oDiv.offsetLeft + oDiv.offsetWidth;
        var b1 = oDiv.offsetTop + oDiv.offsetHeight;
        var t2 = oDiv2.offsetTop;
        var l2 = oDiv2.offsetLeft;
        var r2 = oDiv2.offsetLeft + oDiv2.offsetWidth;
        var b2 = oDiv2.offsetTop + oDiv2.offsetHeight;
        if(b1<t2 || l1>r2 || t1>b2 || r1<l2){// 表示没碰上
        }else{
          oDiv2.style.background = 'blue';
        }
        oDiv.style.left = ev.clientX - disX +'px';
        oDiv.style.top = ev.clientY - disY +'px';
      }
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      }
      return false;
    }
  }
</script>


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/396

前端常用60余种工具方法

邮箱,是否url地址,是否Symbol函数,是否Promise对象,是否Set对象,是否是微信浏览器,是否是爬虫,动态引入js,根据url地址下载

String 常用方法汇总

charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的 Unicode 编码。concat()连接两个或更多字符串,并返回新的字符串。indexOf()返回某个指定的字符串值在字符串中首次出现的位置。

Array数组的常用方法汇

concat()连接两个或更多的数组,并返回结果。every()检测数值元素的每个元素是否都符合条件。filter()检测数值元素,并返回符合条件所有元素的数组。

Number 常用方法汇总

toExponential()把对象的值转换为指数计数法。toFixed()把数字转换为字符串,并对小数点指定位数。toLocaleString()把数字转换为字符串,使用本地数字格式顺序。

Javascript中 toFixed

简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一。但是不论引入toFixed解决浮点数计算精度缺失的问题也好,它有没有使用银行家舍入法也罢,都是为了解决精度的问题

Javascript有重写吗?

JavaScript中有重写。有时子类并不想原封不动地继承父类的方法,而是想作一定的修改,这就需要采用方法的重写。方法重写又称方法覆盖。

javascript中的split方法怎么用?

split()方法可以利用字符串的子字符串的作为分隔符将字符串分割为字符串数组,并返回此数组,本文给大家介绍javascript split 方法。split() 方法用于把一个字符串分割成字符串数组。

JavaScript中Array.find()方法如何使用?

find()方法返回通过测试(函数内判断)的数组的第一个元素的值。当数组中的元素在测试条件时返回 true 时, find()返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回undefined。

自定义Buffer方法

Buffer类,是用来创建一个专门存放二进制数据的缓存区。每当需要处理二进制数据时,就有可能使用到Buffer类。Buffer存在于全局对象上,是必须要了解和掌握的知识。

javascript中怎么定义静态方法?

JavaScript中直接定义在构造函数上的方法和属性是静态的, 定义在构造函数的原型和实例上的方法和属性是非静态的。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广