Canvas做游戏实践分享(七)
4.2 加速度
??? 加速度是改变速度大小及方向的一个属性，在物体受力的过程中，会产生加速度来改变速度的大小及方向。加速度的处理与速度的处理非常类似。
一维坐标系统下的加速度??? 一维坐标系统下加速度的实现很简单，我们仍然使用小球系统来模拟，为小球对象添加X轴与Y轴上的加速度属性。实现起来有两步：初始化加速度值，在每一帧开始时为速度增加加速度的值。如下：
ball.ax=INITIAL_ACCELERATE_VELOCITY;ball.vx+=ball.ax; //将此句放置于animationLoop中?二维坐标系统下的加速度
?? ?与二维坐标系统下的速度处理方式相同，二维坐标系统下的加速度处理如下：
ball.ax=INITIAL_ACCELERATE_VELOCITY_X;ball.ay=INITIAL_ACCELERATE_VELOCITY_Y;ball.vx+=ax; //将此两句放置于animationLoop中ball.vy+=ay;?重力加速度
?? ?重力加速度是一种特殊的加速度。对其的处理可以当作一维坐标（Y轴）系统下的加速度来处理：
ball.vy+=gravity; //gravity是重力加速度常量?已知初始方向及大小的加速度
????? 前面我们实现的都是已知两个正交坐标轴方向加速度大小的运动，但在实际应用中，这种情况很少见，更多的是已知加速度的大小及方向的运动。此时，我们就需要使用之前介绍的三角函数。常见的变换如下：
ax=Math.cos(angle)*A;ay=Math.sin(angle)*A;
?
我们对之前在速度处理中实现的鼠标跟随效果进行改进，在其中引入加速度处理,核心代码实现如下：
window.onload=function(){ //初始化变量 ?var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");var mouse=utils.captureMousePosition(canvas);var accelerateSpeed=1; //绘制箭头var arrow=new Arrow();arrow.x=canvas.width/2;arrow.y=canvas.height/2;(function animationLoop(){window.requestAnimFrame(animationLoop,canvas); context.clearRect(0,0,canvas.width,canvas.height); //取得由箭头中心指向鼠标位置的向量方向，并旋转箭头var dx=mouse.x-arrow.x;var dy=mouse.y-arrow.y;var angle=Math.atan2(dy,dx);arrow.rotation=angle; //通过三角函数求得加速度，并对应改变速度及位置 ?arrow.vx+=Math.cos(angle)*accelerateSpeed;arrow.vy+=Math.sin(angle)*accelerateSpeed;arrow.x+=arrow.vx;arrow.y+=arrow.vy;arrow.paint(context);})();};?运行代码，会发现效果很像一个水平摆。
加速度实例——宇宙飞船?? ?加速度一个很好的实例就是飞船的起飞和降落。我们会逐渐实现一个简易的飞船。如下，是一个用三角形构成的飞船模型：
function Ship(){ //定义飞船属性 ?this.x=0;this.y=0; this.vx=0; this.vy=0; ?this.rotation=0;this.width=25;this.height=20;this.showFlame=false;}Ship.prototype.paint=function(context){context.save(); //定义画面属性 ?context.translate(this.x,this.y);context.rotate(this.rotation);context.lineWidth=1;context.strokeStyle='#ffffff'; //绘制飞船 ?context.beginPath();context.moveTo(10,0);context.lineTo(-10,10);context.lineTo(-5, 0);context.lineTo(-10, -10);context.lineTo(10, 0);context.stroke(); //绘制喷火 ?if(this.showFlame){context.beginPath();context.moveTo(-7.5, -5);context.lineTo(-15, 0);context.lineTo(-7.5, 5);context.stroke();}context.restore();};?以上代码实现了一个简单的飞船模型，飞船在加速时会喷火，如下图：
?
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Arrow</title> <style type="text/css"> #canvas { border-bottom: 1px solid #ffffff; background-color: #000000; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="ship.js"></script> <script type="text/javascript"> window.onload=function(){ var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); var ship=new Ship(); ship.x=canvas.width/2; ship.y=canvas.height/2; var vr=0; var f=0; //处理键盘事件 window.addEventListener("keydown",function(event){ console.log(event.keyCode); switch(event.keyCode){ case 37: //左，逆时针转 vr=-3; break; case 39: //右，顺时针转 vr=3; break; case 38: //上，加速 f=0.05; ship.showFlame=true; break; } }); //按键松开时恢复相关属性为默认值 window.addEventListener("keyup",function(event){ ship.showFlame=false; vr=0; f=0; },false); (function animationLoop(){ window.requestAnimFrame(animationLoop,canvas); context.clearRect(0,0,canvas.width,canvas.height); //通过角度和大小来确定加速度，从而确定飞船的速度与位置 ?ship.rotation+=vr*Math.PI/180; ship.vx+=Math.cos(ship.rotation)*f; ship.vy+=Math.sin(ship.rotation)*f; ship.x+=ship.vx; ship.y+=ship.vy; ship.paint(context); })(); }; </script> </body></html>?如此，实现了一个利用加速度的飞船模型，左右箭头是用来控制旋转方向的，上箭头是用来加速的。但很快飞船就跑出画布了，之后我们会介绍如何来进行边界控制。