Tiny Wings物理运动效果

这几天研究了下游戏Tiny Wings的物理运动实现，没有看原版的原理，自己思考着重新做了一套，目前效率不是太高，还可以再优化。

说明一下几个技术要点：

1.碰撞检测

碰撞是用的象素级别的检测，这也是导致性能不太高的其中一个原因。原理是圆形区域在运动时，会判断是否有地图的数据点与圆心的距离小于圆半径，如果有的话会将这些点存起来(如图1)

碰撞检测代码：

function collisionDetection(){

var i=points.length,
             cdPoints=[],
             ret;

while(i--){
             if(getPointsDistance([bX,bY],points[i]) <= bR){
cdPoints.push([points[i][0],points[i][1]]);
points.splice(i,1);
}
}
return cdPoints;
}

2.碰撞后的方向

之前碰撞后产生的点集取第一点和最后一点，两点可以生成一条直线，通过求出这条直线的斜率就可以得到碰撞后的运动方向(如图2)：

3.贴边校准

因为碰撞时会产生圆形区域嵌入到地图中的情况，所以必须通过校准来让圆形区贴着地图(如图3)

校准步骤(如图4)：

1.蓝色线段AB为碰撞产生的象素点集合；

2.点D为线段的中点，也是最后贴边时会与圆形区域相交的点；

3.计算出圆心O点和D点的距离，得出线段OD，然后再由圆的半径OC减去OD，则得出线段CD；

4.线段CD的长度为圆形区域位移的长度，方向由CD的斜率决定，这样就完成了校准的位移。

其它说明：

目前做的只是一个研究Demo，实现了基本物理运动，地图的生成是暂时用的cos(a)函数图像，各系数也是随便设定了一些，还不是很优化。

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body bgcolor="#000"> <div style="width:1000px;height:600px;background-color:#fff;"> <canvas id="screen" width="1000" height="600">骚瑞，您的浏览器不支持canvas</canvas> </div> <script type="text/javascript"> var $=function(id){ return document.getElementById(id); }; var screen=document.getElementById("screen"), context=screen.getContext("2d"), WIDTH=1000, points=[], t=0, bX=210, bY=300, bR=25, v=10, vRange=[2,50], aX=0, aY=0, itvID=0, dltX=v, dltY=0, pbX=0, pbY=0, bColor="red", itvVT=0, controlV=1, isMouseDown=false; function drawPoint(x,y,c,b) { !b && (b=2); context.fillStyle=c || "red"; context.fillRect(x,y,b,b); } function getPointsDistance(point1,point2){ return Math.sqrt(Math.pow(point1[0]-point2[0],2) + Math.pow(point1[1]-point2[1],2)); } function drawHill(){ var x, y; points=[]; for(var i=0;i<500;i++){ x=i*2; y=Math.cos(i/25)*50+400; points.push([x,Math.ceil(y)]); drawPoint(x,y,"blue"); } } function drawBall(x,y){ context.fillStyle=bColor; context.beginPath(); context.arc(x,y,bR,0,Math.PI*2,true); context.closePath(); context.fill(); } function getNearestPoint(p,points){ var min=0, i=points.length, d, ret; min=getPointsDistance(p,points[0]); ret=points[0]; while(i--){ d=getPointsDistance(p,points[i]); if(d < min){ min=d; ret=points[i]; } } return ret; } function ballMotion(){ var cdps; var distX=0; var distY=0; aY+=0.5*isMouseDown?2:1; bX = bX+aX; bY = bY+aY; bX = bX+dltX; bY = bY+dltY; cdps=collisionDetection(); if(cdps.length){ x1=cdps[0][0]; y1=cdps[0][1]; x2=cdps[cdps.length-1][0]; y2=cdps[cdps.length-1][1]; if(y1!==y2 && x1!==x2){ k=(y2-y1)/(x2-x1); //下坡 if(k>0){ v=Math.min(v+0.5*controlV,vRange[1]); //上坡 }else{ k2=(bY-pbY)/(bX-pbX); if(k2!==k){ v=Math.max(v-v*(1-Math.abs(Math.abs(k2)-Math.abs(k)))*controlV*aY*0.02,vRange[0]); } } dltX = v * Math.cos(Math.atan(k)); dltY = v * Math.sin(Math.atan(k)); }else if (x1 === x2) { bY = bY + dltY + aY; }else if (y1 === y2) { bX = bX + dltX + aX; } //贴边校准 var nPoint=getNearestPoint([bX,bY],cdps); var nD1=getPointsDistance([bX,bY],nPoint); var nX=nPoint[0]-bX; var nY=nPoint[1]-bY; var nD2=bR-nD1; distX=nX*nD2/nD1; distY=nY*nD2/nD1; bX = bX-distX; bY = bY-distY; aY=0; } bX=bX%WIDTH; drawBall(bX,bY); pbX=bX; pbY=bY; v=Math.max(v-0.01,vRange[0]); } function collisionDetection(){ var i=points.length, cdPoints=[], ret; while(i--){ if(getPointsDistance([bX,bY],points[i]) <= bR){ cdPoints.push([points[i][0],points[i][1]]); points.splice(i,1); } } return cdPoints; } function refresh(){ context.clearRect(0,0,2000,800); drawHill(); ballMotion(); } itvID=setInterval(function(){ refresh(); },30); screen.addEventListener("mousedown",function(){ bColor="yellow"; controlV=2; isMouseDown=true; },false); screen.addEventListener("mouseup",function(){ bColor="red"; controlV=1; isMouseDown=false; },false); </script></body> </html>