简单前端——圆与圆碰撞检测

最新推荐文章于 2024-07-09 11:56:29 发布

放肆青春的博客

最新推荐文章于 2024-07-09 11:56:29 发布

阅读量2.1k

点赞数 1

分类专栏： Javascript

Javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

只是没什么做搞个来玩玩，顺便练练手

鼠标按着红球，就可以移动红球，如果以黄球发生碰撞，红球就变为绿球，否则颜色不变。

[html]view plain copy 
   
 <!DOCTYPE html>  
 <html>  
 <head>  
     <meta charset="utf-8">  
     <title></title>  
     <style>  
         #a , #b {  
             width: 100px;  
             height: 100px;  
             position: absolute;  
             border-radius: 50%;  
         }  
         #a{  
             left: 0;  
             top: 0;  
             background-color: red;  
             z-index: 1;  
         }  
         #b {  
             left: 0;  
             top: 0;  
             right: 0;  
             bottom: 0;  
             margin: auto;  
             background-color: yellow;  
         }  
     </style>  
 </head>  
 <body>  
     <div id="a"></div>  
     <div id="b"></div>  
 <script>  
     var a = document.getElementById('a');    
     var b = document.getElementById('b');  
     a.onmousedown = function (ev) {   
         aX = ev.clientX - a.offsetLeft;    
         aY = ev.clientY - a.offsetTop;  
         document.onmousemove = function (ev) {  
             var t1 = a.offsetTop;    
             var l1 = a.offsetLeft;  
   
             var t2 = b.offsetTop;    
             var l2 = b.offsetLeft;   
             if (Math.sqrt(Math.pow(t1 - t2, 2) + Math.pow(l1 - l2, 2)) <= 100) {    
                 // 如果两圆的圆心距小于或等于两圆半径和则认为发生碰撞    
                 a.style.background = 'green';  
             }else{  
                 a.style.background = 'red';  
             }  
   
             a.style.left = ev.clientX - aX +'px';    
             a.style.top = ev.clientY - aY +'px';    
         }  
         document.onmouseup = function () {    
             document.onmousemove = null;    
             document.onmouseup = null;    
   
         }    
         return false;    
     }  
 </script>  
 </body>  
 </html>  
 
  
  
 
 
  
  
 
 
  转载来自：http://blog.csdn.net/zhuxiongyin/article/details/71499843 
 

放肆青春的博客

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单前端——圆与圆碰撞检测

只是没什么做搞个来玩玩，顺便练练手鼠标按着红球，就可以移动红球，如果以黄球发生碰撞，红球就变为绿球，否则颜色不变。[html] view plain copy> html> head> meta charset="utf-8"> title>title> s
复制链接

扫一扫

专栏目录