JS实现碰撞检测效果
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. python模拟哔哩哔哩滑块登入验证的实现2. JSP之表单提交get和post的区别详解及实例3. java初学者如何让编程学习起来更简单4. jsp学习之scriptlet的使用方法详解5. Vue Router的手写实现方法实现6. Nodejs 连接 mysql时报Error: Cannot enqueue Query after fatal error错误的处理办法7. 关于Python Socket编程的要点详解8. 浅谈从Java中的栈和堆,进而衍生到值传递9. Python调用ffmpeg开源视频处理库，批量处理视频10. ThinkPHP6使用最新版本Endroid/QrCode生成二维码的方法实例
网公网安备