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


Posted in Javascript onJanuary 19, 2018

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

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

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

看一下分析图:

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

当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>

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

Javascript 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
angular1配合gulp和bower的使用教程
Jan 19 #Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 #Javascript
Angular实现搜索框及价格上下限功能
Jan 19 #Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 #Javascript
web前端vue实现插值文本和输出原始html
Jan 19 #Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 #Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 #jQuery
You might like
目录,文件操作详谈―PHP
2006/11/25 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
PHP7内核之Reference详解
2019/03/14 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
PHP7 弃用功能
2021/03/09 PHP
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
老生常谈javascript的面向对象思想
2017/08/22 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
Python中的进程分支fork和exec详解
2015/04/11 Python
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
python线程中同步锁详解
2018/04/27 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
政法学院毕业生求职信
2014/02/28 职场文书
蓝颜请假条
2014/04/11 职场文书
小学教师岗位职责
2015/04/02 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python