JS实现碰撞检测效果
2020-03-13 12:08
393 查看
本文实例为大家分享了JS实现碰撞检测效果的具体代码,供大家参考,具体内容如下
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #all{ width: 500px; height: 500px; border: 2px solid sandybrown; position: relative; margin: 0 auto; } #div1{ width: 50px; height: 50px; background-color: red; position: absolute; } #center{ width: 150px; height: 150px; background-color: black; position: absolute; margin: 175px; } </style> </head> <body> <div id="all"> <div id="div1"></div> <div id="center"></div> </div> <script type="text/javascript"> var oAll = document.getElementById("all"); var oDiv1 = document.getElementById("div1"); var oCenter = document.getElementById("center"); var maxL = oAll.clientWidth - oDiv1.clientWidth; var maxT = oAll.clientHeight - oDiv1.clientHeight; oDiv1.onmousedown = function(){ var ev = ev || window.event; var lessX = ev.clientX - oDiv1.offsetLeft; var lessY = ev.clientY - oDiv1.offsetTop; document.onmousemove = function(){ var ev = ev || window.event; var posL = ev.clientX - lessX; var posT = ev.clientY - lessY; if(oCenter.offsetLeft-oDiv1.offsetWidth<posL && posL<325 && oCenter.offsetLeft-oDiv1.offsetWidth<posT && posT<325 ){ oCenter.style.backgroundColor = "red" }else{ oCenter.style.backgroundColor = "black" } if(posL<0){ posL = 0; } if(posT<0){ posT = 0; } if(posL>maxL){ posL = maxL; } if(posT>maxT){ posT = maxT; } oDiv1.style.left = posL + "px"; oDiv1.style.top = posT + "px"; } } document.onmouseup = function(){ document.onmousemove = null; oDiv1.onmousemove = null; } </script> </body>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 原生js实现碰撞检测
- JS实现的碰撞检测与周期移动完整示例
- OpenGL实现碰撞检测与模拟重力效果(简单的物理系统)
- js实现碰撞检测特效代码分享
- 原生JS实现多个小球碰撞反弹效果示例
- js实现碰撞检测特效代码分享
- js实现碰撞检测
- JS实现碰撞检测的方法分析
- JS实现小球的弹性碰撞效果
- JS实现简单的浮动碰撞效果示例
- JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
- JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
- JS实现闪动的title消息提醒效果
- js点击弹出div层实现可拖曳的弹窗效果
- [Unity3D]在Unity3D中实现简单的碰撞检测
- JS实现光滑展开合拢的菜单效果代码
- js实现的定时关闭页面或定时提醒效果代码
- coco2d js 碰撞检测
- Unity胶囊体的碰撞检测实现
- js实现拉幕效果的广告代码