原生JS实现的碰撞检测功能示例


Posted in Javascript onMay 18, 2018

本文实例讲述了原生JS实现的碰撞检测功能。分享给大家供大家参考,具体如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3water.com JS碰撞检测</title>
<style>
div{width:100px;
  height:100px;
}
#box{background:red; position:absolute; }
#box1{background:green;position:absolute;top:300px; left:300px;}
</style>
<script>
//两个碰撞的盒子。是建立在一个不动的基础上。所以可以根据不动的盒子求出四个方向的left和top值。然后再判断其是否碰撞,且碰撞的过程随时改变其层级,(原需 var 8个变量,现在只需4个变量)
function collText(obj,left,top,obj1){
      var l1=obj.offsetLeft-obj.offsetWidth;
      var t1=obj.offsetTop-obj.offsetHeight;
      var r1=obj.offsetLeft+obj.offsetWidth;
      var b1=obj.offsetTop+obj.offsetHeight;
      if(left<l1||top<t1||left>r1||top>b1){
        obj.style.zIndex=3;
        obj1.style.zIndex=1;
        return true;
      }else{
        obj.style.zIndex=1;
        obj1.style.zIndex=3;
        return false;
      }
};
window.onload=function(){
  var oBox=document.getElementById('box');
  var oBox1=document.getElementById('box1');
  oBox.onmousedown=function(ev){
    var oEvent= ev  ||  event;
    var disX=oEvent.clientX-oBox.offsetLeft;
    var disY=oEvent.clientY-oBox.offsetTop;
    document.onmousemove=function(ev){
      var oEvent= ev ||  event;
      var l=oEvent.clientX-disX;
      var t=oEvent.clientY-disY;
      oBox.style.left=l+'px'  ;
      oBox.style.top=t+'px'  ;
      if(collText(oBox1,l,t,oBox)){
        oBox1.style.background='green';
      }else{
        oBox1.style.background='yellow';
      }
    };
    document.onmouseup=function(){
      document.onmousemove=null;
      document.onmouseup=null;
      oBox.reseaseCapture&&oBox.reseaseCapture();
    };
    oBox.setCapture&&oBox.setCapture();
    return false;
  }
  oBox1.onmousedown=function(ev){
    var oEvent= ev ||  event;
    var disX1=oEvent.clientX-oBox1.offsetLeft;
    var disY1=oEvent.clientY-oBox1.offsetTop;
    document.onmousemove=function(ev){
      var oEvent= ev ||  event;
      var le=oEvent.clientX-disX1;
      var to=oEvent.clientY-disY1;
      oBox1.style.left=le+'px'  ;
      oBox1.style.top=to+'px'  ;
      if(collText(oBox,le,to,oBox1)){
        oBox.style.background='red';
      }else{
        oBox.style.background='#000';
      }
    };
    document.onmouseup=function(){
      document.onmousemove=null;
      document.onmouseup=null;
      oBox1.reseaseCapture&&oBox1.reseaseCapture();
    }
    oBox1.setCapture&&oBox1.setCapture();
    return false;
  }
}
</script>
</head>
<body>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>

这里使用在线HTML/CSS/JavaScript运行工具http://tools.3water.com/code/HtmlJsRun测试运行效果如下(碰撞判定时颜色改变):

 原生JS实现的碰撞检测功能示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 #Javascript
vue.js使用3DES加密的方法示例
May 18 #Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 #Javascript
JS实现调用本地摄像头功能示例
May 18 #Javascript
React全家桶环境搭建过程详解
May 18 #Javascript
vue单页开发父子组件传值思路详解
May 18 #Javascript
Node.js Buffer用法解读
May 18 #Javascript
You might like
无线电广播的开始
2002/01/30 无线电
php学习之变量的使用
2011/05/29 PHP
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
python爬虫实例详解
2018/06/19 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
解决python3输入的坑——input()
2020/12/05 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
实习生个人的自我评价
2013/12/08 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
申论倡议书范文
2014/05/13 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
北京青年观后感
2015/06/15 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
七个Python必备的GUI库
2021/04/27 Python
pandas提升计算效率的一些方法汇总
2021/05/30 Python
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android