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();	
};

 以上代码实现了一个简单的飞船模型，飞船在加速时会喷火，如下图：

 

 

如此，实现了一个利用加速度的飞船模型，左右箭头是用来控制旋转方向的，上箭头是用来加速的。但很快飞船就跑出画布了，之后我们会介绍如何来进行边界控制。

• 
• 大小: 3.6 KB

• 查看图片附件