× 目录

　　碰撞可以分为碰壁和互碰两种形式，上篇介绍了碰壁运动，本文将从浅入深地介绍碰撞运动的互碰形式

　　对于互碰形式的碰撞运动来说，首先要解决的是碰撞检测。对于矩形元素的碰撞检测前面的博文已经详细介绍过，下面主要介绍圆形元素的碰撞检测

　　矩形元素的碰撞检测利用九宫格分析法，而圆形元素的碰撞检测则简单很多，判断两个圆形元素的半径之和是否大于两个圆形元素的圆心点坐标之间的距离即可

　　由示意图可知，元素一的圆心位置为(x1,y1)，半径为r1，元素二的圆心位置为(x2,y2)，半径为r2

　　两个元素圆心之间的距离len = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2))

　　当len<= r1+r2时，说明两个圆形元素发生碰撞

Document getCSS(obj,style){ if(window.getComputedStyle){ return getComputedStyle(obj)[style]; } return obj.currentStyle[style]; } function bump(obj,objOther,bgColor){ r1; r1; r2; r2; y2)); r2){ obj.style.backgroundColor ; }else{ obj.style.backgroundColor = bgColor; } } function drag(obj){ obj.onmousedown = function(e){ e event; ; .offsetLeft; .offsetTop; e.clientX; e.clientY; ; document.documentElement.clientWidth; ; document.documentElement.clientHeight; obj.offsetHeight; obj.offsetWidth; document.onmousemove = function(e){ e event; e.clientX; y2 = e.clientY; x1); y1); X; EW; Y; EH; L0;} EW;} T0;} EH;} obj.style.left ; obj.style.top ; ) } document.onmouseup = function(e){ ; ; (obj.releaseCapture){ obj.releaseCapture(); } } ; (obj.setCapture){ obj.setCapture(); } } } drag(test1); drag(test2);

　　假设两个元素的碰撞，对元素的速度并不产生损耗，而只是改变元素速度方向

　　假设元素一在与元素二碰撞前的瞬时速度是v，将该速度分解为平行于碰撞方向的速度v1和垂直于碰撞方向的速度v2

　　碰撞发生后，碰撞方向的速度v1变成了反向的v1

　　将反向的v1分解到水平方向v1x和垂直方向v1y

　　将垂直于碰撞方向的速度v2分解到水平方向v2x和垂直方向v2y

水平方向的速度vx = v2x - v1x 垂直方向的速度vy = v2y - v1y

　　元素二的速度分解形式与元素一类似，就不再赘述

Document开始运动还原 //); test1.stepY ); test2.stepX ); test2.stepY ); btn1.onclick = function(){ collisionMove({ obj:test1 }) collisionMove({ obj:test2 }) } reset.onclick = function(){ history.go(); } function collisionMove(json){ json.obj; json.fn; curX,curY; json.dirX; json.dirY; dirX ; dirY ; obj.offsetWidth; obj.offsetHeight; json.activeWidth; json.activeHeight; document.documentElement.clientWidth; activeHeight document.documentElement.clientHeight; left,top; ;} (){ )); curY )); bump(test1,test2); obj.stepX; top obj.stepY; )){ left offsetWidth; } )){ left = curX; } )){ top offsetHeight; } )){ top = curY; } obj.style.left; obj.style.top ; curX){ obj.stepX = -obj.stepX; } curY){ obj.stepY = -obj.stepY; } ; dirY ; },20); } function getCSS(obj,style){ if(window.getComputedStyle){ return getComputedStyle(obj)[style]; } return obj.currentStyle[style]; } bump(obj,objOther){ obj.r obj.r; obj.y0 obj.r; objOther.r objOther.r; objOther.y0 objOther.r; objOther.y0)); objOther.r){ stepChange(test1,test2,a); stepChange(test2,test1,a); } } stepChange(obj,objOther,a){ obj.stepY); obj.b); Math.cos(obj.c); Math.sin(obj.c); objOther.y0){ obj.stepX Math.sin(a) obj.stepY Math.cos(a) } objOther.y0){ obj.stepX Math.sin(a) obj.stepY Math.cos(a) } objOther.y0){ obj.stepX Math.sin(a) obj.stepY Math.cos(a) } objOther.y0){ obj.stepX Math.sin(a) obj.stepY Math.cos(a) } }

　　匀速有损碰撞是在无损碰撞的基础上，每次碰撞都有一定的速度损耗，在碰撞或碰壁的瞬间乘以损耗因子即可

　　变速有损碰撞类似于击打台球，元素运动时，速度就一直在减小，碰撞或碰壁时，除了速度方向改变外，速度也有所损耗，当速度减小到0时，停止运动。由于代码相似，就不再重复，源码见此