原生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 相关文章推荐
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php实现webservice实例
2014/11/06 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
js表单验证实例讲解
2016/03/31 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
Python subprocess库的使用详解
2018/10/26 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
python中二分查找法的实现方法
2020/12/06 Python
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
个人自荐信
2013/12/05 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
教师节横幅标语
2014/10/08 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书