Canvasはゲームの実践を共有します(六)

4.1速度
運動の最も基本的な属性は速度です.ここでの速度は物理的に言う速度(Velocity)であり、大きさと方向の2つの部分から構成されていることに注意してください.アニメーションでは、現在のフレームオブジェクトの位置と速度が既知であれば、次のフレームで物体の位置を計算できます.ほとんどの場合、速度の大きさはピクセル/フレーム単位ですが、実際の実行ではブラウザのフレームレートが不安定なため、小さな差が出ます.統一フレームレートに対する適用が厳しい場合は、他の方法で処理できます.その後、この知識について説明します.
ベクトル(Vector)
物理では、サイズと方向の2つのプロパティを含むベクトルを使用して速度を表します.そのサイズは非負の整数です.ベクトルには位置がなく、ある方向の大きさの変化が速いことを示すしかありません.2つのベクトルは、サイズと方向が同じ場合に等しい.ベクトルの加算については、通常、ベクトルを座標軸で直交分解し、その後、各座標軸方向に対応する加算を行い、最後に2つの座標軸上の結果を直交合成し、ベクトル加算の結果を得る.
1 D座標系での速度
以前のBallクラスにvxとvyを追加して,X軸およびY軸における速度の大きさをそれぞれ表した.オブジェクトの移動は、フレームの開始ごとに座標に対応する速度の大きさを加えることで実現できます.次のようになります.

   window.onload=function(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				var ball1=new Ball();
				ball1.vx=1;
				ball1.x=100;
				
				(function animationLoop(){
					window.requestAnimFrame(animationLoop,canvas);
					context.clearRect(0,0,canvas.width,canvas.height);
					ball1.x+=ball1.vx;
					ball1.paint(context);
				})();
			};

上記コードに示すように、フレームの開始毎に、我々は小球のX座標ballである.xはX軸上での速度ballを増加する.vxは、ボールが初期位置から右に移動する効果を実現します.
 
2 D座標系での速度
 
2 D座標での速度計算は非常に簡単で、XとY軸上のモーションオブジェクトの位置プロパティに対応する軸上のモーションオブジェクトの速度サイズを追加するだけでいいです(速度が逆の場合は速度サイズを減らす必要があります).コードは次のとおりです.

                      window.onload=function(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				var ball1=new Ball();
				ball1.vx=1;
				ball1.vy=1;
				ball1.x=100;
				ball1.y=100;
				(function animationLoop(){
					window.requestAnimFrame(animationLoop,canvas);
					context.clearRect(0,0,canvas.width,canvas.height);
					ball1.x+=ball1.vx;
					ball1.y+=ball1.vy;
					ball1.paint(context);
				})();
			};

上記コードに示すように、フレームの開始毎に、我々は小球のX座標ballである.xはX軸上での速度ballを増加する.vxは、同時に小球Y座標ballである.yはY軸での速度ballを増加する.vy.これにより、運動中に速度が直交してマージされると、小球が初期位置からマージ方向に移動して速度の大きさで移動する効果が得られる.
 
既知の初期方向およびサイズの速度
 
前に我々が実現したのは,いずれも既知の2つの直交座標軸方向速度の大きさの動きであるが,実際の応用では,このような状況は珍しく,既知の速度の大きさと方向の動きがより多い.この場合、前に説明した三角関数を使用する必要があります.一般的な変換は次のとおりです.

vx=Math.cos(angle)*V;
vy=Math.sin(angle)*V;

このとき、私たちの前の運動ボールのコードは以下の通りです.

                         window.onload=function(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				var angle=45;
				var speed=1;

				var ball1=new Ball();
				//              
				angle=angle*Math.PI/180;
				ball1.vx=Math.cos(angle)*speed;
				ball1.vy=Math.sin(angle)*speed;
				ball1.x=100;
				ball1.y=100;
				(function animationLoop(){
					window.requestAnimFrame(animationLoop,canvas);
					context.clearRect(0,0,canvas.width,canvas.height);

                                        ball1.x+=ball1.vx;
					ball1.y+=ball1.vy;
					ball1.paint(context);
				})();
			};

このとき,小球が初期位置から方向45度,大きさ1の速度で移動する効果を実現した.
マウス追従効果
以前は、マウスの位置に従って回転する矢印を実現しました.ここでは、矢印に速度を追加し、矢印をマウスに従って移動させます.まず、矢印に2つの座標軸方向の速度プロパティを追加する必要があります.次に、各フレームで矢印の中心からマウスの位置までのベクトルを計算し、矢印の速度が矢印の位置にこのベクトルを追加すればよい.コードは次のように実装されます.

                         window.onload=function(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				var mouse=utils.captureMousePosition(canvas);
				var speed=5;

				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)*speed;
					arrow.vy=Math.sin(angle)*speed;
					arrow.x+=arrow.vx;
					arrow.y+=arrow.vy;
					arrow.paint(context);
				})();
                            };

そくどかくちょう
モーションオブジェクトの位置を速度で変更するだけでなく、モーションオブジェクトの他のアトリビュートをこの方法で変更することもできます.たとえばオブジェクトの回転プロパティは、ゲームでよく使われる機能です.次に,オブジェクトスピンの機能を実現する.

window.onload=function(){ 
             var canvas=document.getElementById("canvas"); 
             var context=canvas.getContext("2d"); 
             var rotationSpeed=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); 
                  //          
                  arrow.rotation+=rotationSpeed*Math.PI/180;
                  arrow.paint(context); 
              })(); 
};