原生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 相关文章推荐
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
详解vue在项目中使用百度地图
Mar 26 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
微信小程序实现分页加载效果
Nov 19 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
用ODBC的分页显示
2006/10/09 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
JavaScript高级程序设计
2006/12/29 Javascript
JQuery live函数
2010/12/24 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
js实现小星星游戏
2020/03/23 Javascript
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
python中调试或排错的五种方法示例
2019/09/12 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
培训主管岗位职责
2014/02/01 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书