这篇文章主要介绍了 JS 实现碰撞检测的方法, 结合实例形式分析了 javascript 碰撞检测的原理与相关操作技巧, 需要的朋友可以参考下
本文实例讲述了 JS 实现碰撞检测的方法分享给大家供大家参考, 具体如下:
一个简单的碰撞检测例子, 检测 div1 是否和 div2 发生碰撞, 当 div1 碰到 div2 时, 改变 div2 的颜色, 看测试图
看一下分析图:
当 div1 在 div2 的上边线 (t2) 以上的区域活动时, 始终碰不上
当 div1 在 div2 的右边线 (r2) 以右的区域活动时, 始终碰不上
当 div1 在 div2 的下边线 (b2) 以下的区域活动时, 始终碰不上
当 div1 在 div2 的左边线 (r2) 以左的区域活动时, 始终碰不上
除了以上四种情况, 其他情况表示 div1 和 div2 碰上了, 下面试完整测试代码
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;top: 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.top = ev.clientY - disY +'px';
- }
- document.onmouseup = function () {
- document.onmousemove = null;
- document.onmouseup = null;
- }
- return false;
- }
- }
- </script>
希望本文所述对大家 JavaScript 程序设计有所帮助
来源: http://www.phperz.com/article/18/0312/362911.html