基于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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
js控制input框只读实现示例
Jan 20 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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实现插入排序
2015/03/29 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
详解Python的Lambda函数与排序
2016/10/25 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
Django中间件实现拦截器的方法
2018/06/01 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
工作交流会欢迎词
2014/01/12 职场文书
《狼》教学反思
2014/03/02 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
Python实现科学占卜 让视频自动打码
2022/04/09 Python