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 相关文章推荐
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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/02 日漫
PHP_MySQL教程-第一天
2007/03/18 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
pygame实现俄罗斯方块游戏
2018/06/26 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
Python猜数字算法题详解
2020/03/01 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
Python装饰器结合递归原理解析
2020/07/02 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
电子商务专员岗位职责
2013/12/11 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
自主招生学校推荐信
2014/09/26 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
信访维稳承诺书
2015/05/04 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android