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 相关文章推荐
几个javascript操作word的参考代码
Oct 26 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
浅谈Vue的响应式原理
May 30 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
Python JSON编解码方式原理详解
2020/01/20 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
美国最大点评网站:Yelp
2018/02/14 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
平面设计的岗位职责
2013/11/08 职场文书
优秀大学生推荐信范文
2013/11/28 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
关于学习的演讲稿
2014/05/10 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
导游词之长城八达岭
2019/09/24 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL