HTML5技术

javascript运动系列第九篇——碰撞运动 - 小火柴的蓝色理想

字号+ 作者:H5之家 来源:H5之家 2016-10-29 18:00 我要评论( )

目录 前面的话 碰撞可以分为碰壁和互碰两种形式,上篇介绍了碰壁运动,本文将从浅入深地介绍碰撞运动的互碰形式 碰撞检测 对于互碰形式的碰撞运动来说,首先要解决的是碰撞检测。对于矩形元素的碰撞检测前面的博文已经详细介绍过,下面主要介绍圆形元素的碰

× 目录

前面的话

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

 

碰撞检测

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

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

  由示意图可知,元素一的圆心位置为(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时,停止运动。由于代码相似,就不再重复,源码见此

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 深究angularJS系列 - 第二弹 - 雨夜羽翼

    深究angularJS系列 - 第二弹 - 雨夜羽翼

    2016-10-29 10:00

  • MVC系列——MVC源码学习:打造自己的MVC框架(一) - 懒得安分

    MVC系列——MVC源码学习:打造自己的MVC框架(一) - 懒得安分

    2016-10-27 13:00

  • 深究angularJS系列 - 初识 - 雨夜羽翼

    深究angularJS系列 - 初识 - 雨夜羽翼

    2016-10-27 11:00

  • Bootstrap框架系列 - 初识 - 雨夜羽翼

    Bootstrap框架系列 - 初识 - 雨夜羽翼

    2016-10-26 16:00

网友点评
O