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 相关文章推荐
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
jquery队列函数用法实例
Dec 16 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 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使用curl发送json格式数据实例
2013/12/17 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
php获取远程文件大小
2015/10/20 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
Python实现截屏的函数
2015/07/26 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
python matplotlib画图实例代码分享
2017/12/27 Python
解读python logging模块的使用方法
2018/04/17 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Python实现Restful API的例子
2019/08/31 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
公务员培训心得体会
2013/12/28 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
安全保证书
2015/01/16 职场文书
信息简报范文
2015/07/21 职场文书
如何用python反转图片,视频
2021/04/24 Python
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL