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 性能优化指南 (1)
May 21 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 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(1)
2006/10/09 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
python安装与使用redis的方法
2016/04/19 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
python 实用工具状态机transitions
2020/11/21 Python
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
优秀员工个人的自我评价
2013/11/29 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
力学专业求职信
2014/07/23 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
个园导游词
2015/02/04 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
Python中的xlrd模块使用整理
2021/06/15 Python