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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
Jquery中map函数的用法
Jun 03 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 Javascript
用webAPI实现图片放大镜效果
Nov 23 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/10/09 PHP
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
js实现单一html页面两套css切换代码
2013/04/11 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
JS实现简单打字测试
2020/06/24 Javascript
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
django基础学习之send_mail功能
2019/08/07 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
普天C++笔试题
2016/03/20 面试题
优秀党支部事迹材料
2014/01/14 职场文书
家长会欢迎标语
2014/06/24 职场文书
主题党日活动总结
2014/07/08 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python