Canvas做游戏实践分享(六)

feiyang10086

Canvas做游戏实践分享(六)

4.1速度
    运动最基本的属性就是速度。注意这里的速度是物理中所说的速度(Velocity)，它包括大小及方向两部分组成。在动画中，如果我们已知当前一帧对象的位置以及速度，那在下一帧我们就能计算出物体所在的位置。在大多数情况下，速度的大小是按像素/帧为单位的，但实际运行中，由于浏览器的帧率不稳定性，会出现小的差别。如果应用对于统一帧率要求很严格，可以使用其它的方式来处理，之后我们会介绍这方面的知识。

向量
    物理中我们使用向量来表示速度，向量包括大小和方向两个属性。其大小是一个非负整数。向量是没有位置的，它只能表示在某一方向上大小的改变快慢。两个向量在大小和方向都相同的情况下是相等的。
    对于向量的相加，我们通常会将向量按坐标轴正交分解，之后在每个坐标轴方向上执行对应的加法，最后再将两个坐标轴上的结果进行正交合成，即得到向量相加的结果。

一维坐标系统下的速度
    我们给之前的的Ball类添加vx与vy 来分别表示X轴及Y轴下的速度大小。对象的移动就可以在每一帧开始时给其坐标增加加对应的速度大小来实现。如下：

Js代码

1. window.onload=function(){   
   
2.     var canvas=document.getElementById("canvas");   
   
3.     var context=canvas.getContext("2d");   
   
4.       
   
5.     var ball1=new Ball();   
   
6.     ball1.vx=1;   
   
7.     ball1.x=100;   
   
8.       
   
9.     (function animationLoop(){   
   
10.         window.requestAnimFrame(animationLoop,canvas);   
    
11.         context.clearRect(0,0,canvas.width,canvas.height);   
    
12.         ball1.x+=ball1.vx;   
    
13.         ball1.paint(context);   
    
14.     })();   
    
15. };  
    
16. 
    
17.    window.onload=function(){
    
18.                                 var canvas=document.getElementById("canvas");
    
19.                                 var context=canvas.getContext("2d");
    
20.                                
    
21.                                 var ball1=new Ball();
    
22.                                 ball1.vx=1;
    
23.                                 ball1.x=100;
    
24.                                
    
25.                                 (function animationLoop(){
    
26.                                         window.requestAnimFrame(animationLoop,canvas);
    
27.                                         context.clearRect(0,0,canvas.width,canvas.height);
    
28.                                         ball1.x+=ball1.vx;
    
29.                                         ball1.paint(context);
    
30.                                 })();
    
31.                         };

复制代码

如上代码所示，每一帧开始时，我们为小球的X坐标ball.x增加了其在X轴上的速度ball.vx,于是就可以实现小球从初始位置一直向右移动的效果。



二维坐标系统下的速度



      二维坐标下的速度计算非常简单，我们只需要分别对X与Y轴上运动对象的位置属性增加对应坐标轴上运动对象的速度大小即可（如果速度是反向的，就需要减少速度大小）。此时，代码为：

Js代码

1.                   window.onload=function(){   
   
2. var canvas=document.getElementById("canvas");   
   
3. var context=canvas.getContext("2d");   
   
4.   
   
5. var ball1=new Ball();   
   
6. ball1.vx=1;   
   
7. ball1.vy=1;   
   
8. ball1.x=100;   
   
9. ball1.y=100;   
   
10. (function animationLoop(){   
    
11.     window.requestAnimFrame(animationLoop,canvas);   
    
12.     context.clearRect(0,0,canvas.width,canvas.height);   
    
13.     ball1.x+=ball1.vx;   
    
14.     ball1.y+=ball1.vy;   
    
15.     ball1.paint(context);   
    
16. })();   
    
17. ;  
    
18. 
    
19.                       window.onload=function(){
    
20.                                 var canvas=document.getElementById("canvas");
    
21.                                 var context=canvas.getContext("2d");
    
22.                                
    
23.                                 var ball1=new Ball();
    
24.                                 ball1.vx=1;
    
25.                                 ball1.vy=1;
    
26.                                 ball1.x=100;
    
27.                                 ball1.y=100;
    
28.                                 (function animationLoop(){
    
29.                                         window.requestAnimFrame(animationLoop,canvas);
    
30.                                         context.clearRect(0,0,canvas.width,canvas.height);
    
31.                                         ball1.x+=ball1.vx;
    
32.                                         ball1.y+=ball1.vy;
    
33.                                         ball1.paint(context);
    
34.                                 })();
    
35.                         };

复制代码

如上代码所示，每一帧开始时，我们为小球的X坐标ball.x增加了其在X轴上的速度ball.vx，同时为小球Y坐标ball.y增加了其在Y轴上的速度ball.vy。这样，在运动中速度正交合并后，就可以实现小球从初始位置开始沿合并方向运动以速度大小移动的效果。



已知初始方向及大小的速度



      前面我们实现的都是已知两个正交坐标轴方向速度大小的运动，但在实际应用中，这种情况很少见，更多的是已知速度的大小及方向的运动。此时，我们就需要使用之前介绍的三角函数。常见的变换如下：

Js代码

1. vx=Math.cos(angle)*V;   
   
2. vy=Math.sin(angle)*V;  
   
3. 
   
4. vx=Math.cos(angle)*V;
   
5. vy=Math.sin(angle)*V;

复制代码

此时，我们之前的运动小球的代码如下：

Js代码

1.                      window.onload=function(){   
   
2. var canvas=document.getElementById("canvas");   
   
3. var context=canvas.getContext("2d");   
   
4. var angle=45;   
   
5. var speed=1;   
   
6.   
   
7. var ball1=new Ball();   
   
8. //注意此处必须执行角度弧度转换   
   
9. angle=angle*Math.PI/180;   
   
10. ball1.vx=Math.cos(angle)*speed;   
    
11. ball1.vy=Math.sin(angle)*speed;   
    
12. ball1.x=100;   
    
13. ball1.y=100;   
    
14. (function animationLoop(){   
    
15.     window.requestAnimFrame(animationLoop,canvas);   
    
16.     context.clearRect(0,0,canvas.width,canvas.height);   
    
17.   
    
18.                                     ball1.x+=ball1.vx;   
    
19.     ball1.y+=ball1.vy;   
    
20.     ball1.paint(context);   
    
21. })();   
    
22. ;  
    
23. 
    
24.                          window.onload=function(){
    
25.                                 var canvas=document.getElementById("canvas");
    
26.                                 var context=canvas.getContext("2d");
    
27.                                 var angle=45;
    
28.                                 var speed=1;
    
29. 
    
30.                                 var ball1=new Ball();
    
31.                                 //注意此处必须执行角度弧度转换
    
32.                                 angle=angle*Math.PI/180;
    
33.                                 ball1.vx=Math.cos(angle)*speed;
    
34.                                 ball1.vy=Math.sin(angle)*speed;
    
35.                                 ball1.x=100;
    
36.                                 ball1.y=100;
    
37.                                 (function animationLoop(){
    
38.                                         window.requestAnimFrame(animationLoop,canvas);
    
39.                                         context.clearRect(0,0,canvas.width,canvas.height);
    
40. 
    
41.                                         ball1.x+=ball1.vx;
    
42.                                         ball1.y+=ball1.vy;
    
43.                                         ball1.paint(context);
    
44.                                 })();
    
45.                         };

复制代码

此时就实现了小球从初始位置，以方向45度，大小为1的速度移动的效果。

鼠标跟随效果
    之前，我们实现了一个跟随鼠标位置转到的箭头，在此我们给箭头添加速度，让箭头跟随鼠标移动。首先，需要给箭头添加两个坐标轴方向的速度属性。接着，在每一帧中我们计算出箭头中心到鼠标所在位置的向量，此时箭头的速度给箭头位置添加此向量后即可。代码实现如下：

Js代码

1.                      window.onload=function(){   
   
2. var canvas=document.getElementById("canvas");   
   
3. var context=canvas.getContext("2d");   
   
4. var mouse=utils.captureMousePosition(canvas);   
   
5. var speed=5;   
   
6.   
   
7. var arrow=new Arrow();   
   
8. arrow.x=canvas.width/2;   
   
9. arrow.y=canvas.height/2;   
   
10.   
    
11. (function animationLoop(){   
    
12.     window.requestAnimFrame(animationLoop,canvas);   
    
13.     context.clearRect(0,0,canvas.width,canvas.height);   
    
14.                                     //取得变化向量(从箭头位置指向鼠标位置)   
    
15.     var dx=mouse.x-arrow.x;   
    
16.     var dy=mouse.y-arrow.y;   
    
17.     var angle=Math.atan2(dy,dx);   
    
18.     arrow.rotation=angle;   
    
19.                                     //速度位移更新   
    
20.     arrow.vx=Math.cos(angle)*speed;   
    
21.     arrow.vy=Math.sin(angle)*speed;   
    
22.     arrow.x+=arrow.vx;   
    
23.     arrow.y+=arrow.vy;   
    
24.     arrow.paint(context);   
    
25. })();   
    
26.                         };  
    
27. 
    
28.                          window.onload=function(){
    
29.                                 var canvas=document.getElementById("canvas");
    
30.                                 var context=canvas.getContext("2d");
    
31.                                 var mouse=utils.captureMousePosition(canvas);
    
32.                                 var speed=5;
    
33. 
    
34.                                 var arrow=new Arrow();
    
35.                                 arrow.x=canvas.width/2;
    
36.                                 arrow.y=canvas.height/2;
    
37. 
    
38.                                 (function animationLoop(){
    
39.                                         window.requestAnimFrame(animationLoop,canvas);
    
40.                                         context.clearRect(0,0,canvas.width,canvas.height);
    
41.                                         //取得变化向量(从箭头位置指向鼠标位置)
    
42.                                         var dx=mouse.x-arrow.x;
    
43.                                         var dy=mouse.y-arrow.y;
    
44.                                         var angle=Math.atan2(dy,dx);
    
45.                                         arrow.rotation=angle;
    
46.                                         //速度位移更新
    
47.                                         arrow.vx=Math.cos(angle)*speed;
    
48.                                         arrow.vy=Math.sin(angle)*speed;
    
49.                                         arrow.x+=arrow.vx;
    
50.                                         arrow.y+=arrow.vy;
    
51.                                         arrow.paint(context);
    
52.                                 })();
    
53.                             };

复制代码

速度扩展
      除了对于运动对象的位置使用速度来改变，我们也可以对于运动对象的其它属性使用这种方式来进行改变。比如对象的旋转属性，在游戏中就是经常使用到的一个功能。下面我们实现一个对象自旋的功能。

Js代码

1. window.onload=function(){   
   
2.              var canvas=document.getElementById("canvas");   
   
3.              var context=canvas.getContext("2d");   
   
4.              var rotationSpeed=1;   
   
5.              var arrow=new Arrow();   
   
6.              arrow.x=canvas.width/2;   
   
7.              arrow.y=canvas.height/2;   
   
8.              (function animationLoop(){   
   
9.                   window.requestAnimFrame(animationLoop,canvas);   
   
10.                   context.clearRect(0,0,canvas.width,canvas.height);   
    
11.                   //更新箭头旋转属性值   
    
12.                   arrow.rotation+=rotationSpeed*Math.PI/180;   
    
13.                   arrow.paint(context);   
    
14.               })();   
    
15. };  

复制代码

小忻黑夜

谢谢分享