JS实现碰撞检测的方法分析
网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章主要介绍了JS实现碰撞检测的方法,结合实例形式分析了javascript碰撞检测的原理与相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS实现碰撞检测的方法。分享给大家供大家参考,具体如下:
一个简单的碰撞检测例子,检测div1是否和div2发生碰撞,当div1碰到div2时,改变div2的颜色,看测试图
看一下分析图:
当div1在div2的上边线(t2)以上的区域活动时,始终碰不上
当div1在div2的右边线(r2)以右的区域活动时,始终碰不上
当div1在div2的下边线(b2)以下的区域活动时,始终碰不上
当div1在div2的左边线(r2)以左的区域活动时,始终碰不上
除了以上四种情况,其他情况表示div1和div2碰上了,狼蚁网站SEO优化试完整测试代码
HTML部分:
<div id="div1"></div> <div id="div2"></div>
css部分:
<style> #div1{ width:100px ;height: 100px;background: green; position: absolute; } #div2{ width:100px ;height: 100px;background: yellow; position: absolute;left: 300px;: 200px;z-index: -1; } </style>
JS部分:
<script> window.onload = function () { var oDiv = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var disX = 0; var disY = 0; oDiv.onmousedown = function (ev) { var ev = ev|| window.event; disX = ev.clientX - oDiv.offsetLeft; disY = ev.clientY - oDiv.offsetTop; document.onmousemove = function (ev) { var ev = ev|| window.event; var t1 = oDiv.offsetTop; var l1 = oDiv.offsetLeft; var r1 = oDiv.offsetLeft + oDiv.offsetWidth; var b1 = oDiv.offsetTop + oDiv.offsetHeight; var t2 = oDiv2.offsetTop; var l2 = oDiv2.offsetLeft; var r2 = oDiv2.offsetLeft + oDiv2.offsetWidth; var b2 = oDiv2.offsetTop + oDiv2.offsetHeight; if(b1<t2 || l1>r2 || t1>b2 || r1<l2){// 表示没碰上 }else{ oDiv2.style.background = 'blue'; } oDiv.style.left = ev.clientX - disX +'px'; oDiv.style. = ev.clientY - disY +'px'; } document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; } return false; } } </script>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程