基于javascript实现碰撞检测


Posted in Javascript onMarch 12, 2020

本文实例为大家分享了javascript实现碰撞检测的具体代码,供大家参考,具体内容如下

<html>
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; z-index:2;}
#div2 {width:100px; height:100px; background:yellow; position:absolute; left:230px; top:220px; z-index:1;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.οnlοad=function ()
{
 var oDiv=document.getElementById('div1');
 var oDiv2=document.getElementById('div2');
 
 oDiv.οnmοusedοwn=function (ev)
 {
 var oEvent=ev||event;
 var disX=oEvent.clientX-oDiv.offsetLeft;
 var disY=oEvent.clientY-oDiv.offsetTop;
 
 document.οnmοusemοve=function (ev)
 {
  var oEvent=ev||event;
  
  oDiv.style.left=oEvent.clientX-disX+'px';
  oDiv.style.top=oEvent.clientY-disY+'px';
  
  var l1=oDiv.offsetLeft;//红块左边线
  var r1=oDiv.offsetLeft+oDiv.offsetWidth;//红块右边线
  var t1=oDiv.offsetTop;//红块上边线
  var b1=oDiv.offsetTop+oDiv.offsetHeight;//红块下边线
  
  var l2=oDiv2.offsetLeft;//黄块左边线
  var r2=oDiv2.offsetLeft+oDiv2.offsetWidth;//黄块右边线
  var t2=oDiv2.offsetTop;//黄块上边线
  var b2=oDiv2.offsetTop+oDiv2.offsetHeight;//黄块下边线
  
  if(r1<l2 || l1>r2 || b1<t2 || t1>b2)
  {
  oDiv2.style.background='yellow';
  }
  else
  {
  oDiv2.style.background='green';
  }
 };
 
 document.οnmοuseup=function ()
 {
  document.οnmοusemοve=null;
  document.οnmοuseup=null;
 };
 };
};
</script>
</head>
 
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

基于javascript实现碰撞检测

碰撞检测原理图如上:

我们检测碰撞时,发现两个div碰上检测比没碰上的检测要难,所以以没碰上作为检测条件。画上九宫格,当红色div在黄色div左边线或是右边线或是上边线或是下边线外时是永远不可能碰上的,只要这四个条件都不满足,意味着两个div相撞了,将黄块变绿。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
Openlayers实现图形绘制
Sep 28 Javascript
原生js中运算符及流程控制示例详解
Jan 05 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 #jQuery
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 #Javascript
javascript实现拖拽碰撞检测
Mar 12 #Javascript
原生js实现碰撞检测
Mar 12 #Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 #Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 #Javascript
JS实现碰撞检测效果
Mar 12 #Javascript
You might like
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
实习期自我鉴定
2013/10/11 职场文书
学生感冒英文请假条
2014/02/04 职场文书
商场主管竞聘书
2014/03/31 职场文书
学校消防安全责任书
2014/07/23 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
工作收入证明模板
2014/10/10 职场文书
关于感谢信的范文
2015/01/23 职场文书
单身申明具结书
2015/02/26 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
2015年林业工作总结
2015/05/14 职场文书
天那边观后感
2015/06/09 职场文书
宿舍管理制度范本
2015/08/07 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android