原生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 相关文章推荐
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
JavaScript Array对象详解
Mar 01 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 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
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
thinkphp分页集成实例
2017/07/24 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
python后端接收前端回传的文件方法
2019/01/02 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
英国综合网上购物商城:The Hut
2018/07/03 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
介绍一下linux的文件权限
2014/07/20 面试题
销售助理岗位职责
2014/02/21 职场文书
赡养老人协议书
2014/04/21 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
三八妇女节标语
2014/10/09 职场文书