本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（9）——坦克大战游戏3

上一篇我们创建了敌人的坦克和自己的坦克，接下来就应该让坦克发子弹了，我们下面来看一下如何让我们的坦克发出子弹。

前面我们用面向对象的思想对Tank进行了封装，又利用对象冒充实现了我们的坦克和敌人的坦克，仿照这种方式我们是不是也应该封装一个Bullet，答案是肯定的。好吧，那么我们再想想这个Bullet"类“都应该封装什么东西呢？位置应该有吧、子弹飞行的方向应该有吧、飞行的速度也应该有吧、自己飞出去的动作应该有吧。好啦，大概就这些，封装后的Bulle”t类“如下：

[html] view plain copy

 

 print?

1. //子弹类  
2. function Bullet(x,y,direct,speed){  
3.     this.x=x;  
4.     this.y=y;  
5.     this.speed=speed;  
6.     this.direct=direct;  
7.     this.timer=null;  
8.     this.run=function(){  
9.         switch(this.direct){  
10.             case 0:  
11.                 this.y-=this.speed;  
12.                 break;  
13.             case 1:  
14.                 this.x+=this.speed;  
15.                 break;  
16.             case 2:  
17.                 this.y+=this.speed;  
18.                 break;  
19.             case 3:  
20.                 this.x-=this.speed;  
21.                 break;    
22.         }  
23.           
24.     }  
25. }  

我们已经创建好子弹的模型了，下面就用我们的坦克创造子弹将子弹发出去，在Hero类中添加shotEnemy方法。

[html] view plain copy

 

 print?

1. //定义一个Hero类  
2. function Hero(x,y,direct,color){  
3.     //下面两句话的作用是通过对象冒充达到继承的效果  
4.     this.tank=Tank;  
5.     this.tank(x,y,direct,color);  
6.     //射击敌人函数  
7.     this.shotEnemy=function(){  
8.         switch(this.direct){  
9.             case 0:  
10.                 heroBullet=new Bullet(this.x+10,this.y,this.direct,1);  
11.                 break;  
12.             case 1:  
13.                 heroBullet=new Bullet(this.x+30-4,this.y+10+4,this.direct,1);  
14.                 break;  
15.             case 2:  
16.                 heroBullet=new Bullet(this.x+10,this.y+30,this.direct,1);  
17.                 break;  
18.             case 3:  
19.                 heroBullet=new Bullet(this.x-4,this.y+10+4,this.direct,1);  
20.                 break;  
21.         }  
22.         //把这个子弹放入数组中——》push函数  
23.         //调用我们子弹的run  
24.         //var timer=window.setInterval("heroBullet.run()",50);  
25.         //heroBullet.timer=timer;  
26.         heroBullets.push(heroBullet);  
27.         var timer=window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);  
28.         heroBullets[heroBullets.length-1].timer=timer;  
29.           
30.     }  
31. }  

再在按键监听函数中添加一个监听发射子弹的键“J"

[html] view plain copy

 

 print?

1. case 74: //J  :发子弹  
2.     hero.shotEnemy();  
3.     break;  

好了我们来试着发射一下子弹吧！子弹怎么只能发一颗，而且越发越快，这是怎么回事呢？再看看我们上面写的代码，原来我们的子弹一旦发出去就不能停止了，虽然跑出了我们的”战场“但是还是在朝一个方向跑，一旦发第二颗子弹第一颗子弹就会由于重新刷新界面没有重绘子弹而消失。好了既然知道原因了下面我们判断一下子弹是否出界，然后给子弹一个状态isLive(这个状态标记子弹是否存在，如果不存在则在重绘子弹的时候不再重绘)，修改后的代码如下：

[html] view plain copy

 

 print?

1. //子弹类  
2. unction Bullet(x,y,direct,speed){  
3. this.x=x;  
4. this.y=y;  
5. this.speed=speed;  
6. this.direct=direct;  
7. this.timer=null;  
8. this.isLive=true;  
9. this.run=function(){  
10.     //判断子弹是否已经到边界了  
11.     if(this.x<=0||this.x>=400||this.y<=0||this.y>=300){  
12.         //子弹要停止  
13.         window.clearInterval(this.timer);  
14.         //子弹死亡  
15.         this.isLive=false;  
16.     }else{  
17.         //可以去修改坐标  
18.         switch(this.direct){  
19.             case 0:  
20.                 this.y-=this.speed;  
21.                 break;  
22.             case 1:  
23.                 this.x+=this.speed;  
24.                 break;  
25.             case 2:  
26.                     break;    
27.         }  
28.     }  
29. }  

如果子弹超出了canvas的范围则将isLive属性该为false

然后我们在前面的刷新界面函数中添加一个刷新子弹函数

[html] view plain copy

 

 print?

1. //定时刷新我们的作战区(定时重绘)  
2. //自己的坦克，敌人坦克，子弹，炸弹，障碍物  
3. function flashTankMap(){  
4.     //把画布清理  
5.     cxt.clearRect(0,0,400,300);  
6.     //我的坦克  
7.     drawTank(hero);  
8.     //我的子弹  
9.     drawHeroBullet();  
10.     //敌人的坦克  
11.     for(var i=0;i<3;i++){  
12.         drawTank(enemyTanks[i]);  
13.     }  
14. }  

[html] view plain copy

 

 print?

1. //画出自己的子弹  
2. function drawHeroBullet(){  
3.     for(var i=0;i<heroBullets.length;i++){  
4.         var heroBullet=heroBullets[i];  
5.         if(heroBullet!=null&&heroBullet.isLive){  
6.             cxt.fillStyle="#FEF26E";  
7.             cxt.fillRect(heroBullet.x,heroBullet.y,2,2);  
8.         }  
9.     }  
10. }  

可以看到上面的drawHeroBullet中判断了子弹的isLive属性。

看看运行结果吧

全部源代码如下：

tankGame06.js

[javascript] view plain copy

 

 print?

1. //为了编程方便，我们定义两个颜色数组  
2. var heroColor=new Array("#BA9658","#FEF26E");  
3. var enemyColor=new Array("#00A2B5","#00FEFE");  
4.   
5.     //子弹类  
6. function Bullet(x,y,direct,speed){  
7.     this.x=x;  
8.     this.y=y;  
9.     this.speed=speed;  
10.     this.direct=direct;  
11.     this.timer=null;  
12.     this.isLive=true;  
13.     this.run=function(){  
14.         //判断子弹是否已经到边界了  
15.         if(this.x<=0||this.x>=400||this.y<=0||this.y>=300){  
16.             //子弹要停止  
17.             window.clearInterval(this.timer);  
18.             //子弹死亡  
19.             this.isLive=false;  
20.         }else{  
21.             //可以去修改坐标  
22.             switch(this.direct){  
23.                 case 0:  
24.                     this.y-=this.speed;  
25.                     break;  
26.                 case 1:  
27.                     this.x+=this.speed;  
28.                     break;  
29.                 case 2:  
30.                     this.y+=this.speed;  
31.                     break;  
32.                 case 3:  
33.                     this.x-=this.speed;  
34.                     break;    
35.             }  
36.         }  
37.     }  
38. }  
39.   
40. //定义一个Tank类（基类）  
41. function Tank(x,y,direct,color){  
42.     this.x=x;  
43.     this.y=y;  
44.     this.speed=1;  
45.     this.direct=direct;  
46.     this.color=color;  
47.     //上移  
48.     this.moveUp=function(){  
49.         this.y-=this.speed;  
50.         this.direct=0;  
51.     }  
52.     //右移  
53.     this.moveRight=function(){  
54.         this.x+=this.speed;  
55.         this.direct=1;  
56.     }  
57.     //下移  
58.     this.moveDown=function(){  
59.         this.y+=this.speed;  
60.         this.direct=2;  
61.     }  
62.     //左移  
63.     this.moveLeft=function(){  
64.         this.x-=this.speed;  
65.         this.direct=3;  
66.     }  
67. }  
68.   
69. //定义一个Hero类  
70. function Hero(x,y,direct,color){  
71.     //下面两句话的作用是通过对象冒充达到继承的效果  
72.     this.tank=Tank;  
73.     this.tank(x,y,direct,color);  
74.     //设计敌人函数  
75.     this.shotEnemy=function(){  
76.         switch(this.direct){  
77.             case 0:  
78.                 heroBullet=new Bullet(this.x+10,this.y,this.direct,1);  
79.                 break;  
80.             case 1:  
81.                 heroBullet=new Bullet(this.x+30-4,this.y+10+4,this.direct,1);  
82.                 break;  
83.             case 2:  
84.                 heroBullet=new Bullet(this.x+10,this.y+30,this.direct,1);  
85.                 break;  
86.             case 3:  
87.                 heroBullet=new Bullet(this.x-4,this.y+10+4,this.direct,1);  
88.                 break;  
89.         }  
90.         //把这个子弹放入数组中——》push函数  
91.         //调用我们子弹的run  
92.         //var timer=window.setInterval("heroBullet.run()",50);  
93.         //heroBullet.timer=timer;  
94.         heroBullets.push(heroBullet);  
95.         var timer=window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);  
96.         heroBullets[heroBullets.length-1].timer=timer;  
97.           
98.     }  
99. }  
100.   
101. //定义一个EnemyTank类  
102. function EnemyTank(x,y,direct,color){  
103.     this.tank=Tank;  
104.     this.tank(x,y,direct,color);  
105. }  
106.   
107.     //绘制坦克  
108. function drawTank(tank){  
109.     //考虑方向  
110.     switch(tank.direct){  
111.         case 0:     //向上  
112.         case 2:     //向下  
113.             //设置颜色  
114.             cxt.fillStyle=tank.color[0];  
115.             //左边的矩形  
116.             cxt.fillRect(tank.x,tank.y,5,30);  
117.             //右边的矩形  
118.             cxt.fillRect(tank.x+17,tank.y,5,30);  
119.             //画中间的矩形  
120.             cxt.fillRect(tank.x+6,tank.y+5,10,20);  
121.             //画出坦克的盖子  
122.             cxt.fillStyle=tank.color[1];  
123.             cxt.arc(tank.x+11,tank.y+15,5,0,Math.PI*2,true);  
124.             cxt.fill();  
125.             //画出炮筒  
126.             cxt.strokeStyle=tank.color[1];  
127.             cxt.lineWidth=1.5;  
128.             cxt.beginPath();  
129.             cxt.moveTo(tank.x+11,tank.y+15);  
130.             if(tank.direct==0){         //只是炮筒的方向不同  
131.                 cxt.lineTo(tank.x+11,tank.y);  
132.             }else{  
133.                 cxt.lineTo(tank.x+11,tank.y+30);  
134.             }  
135.             cxt.closePath();  
136.             cxt.stroke();  
137.             break;  
138.         case 1:  
139.         case 3:  
140.             //设置颜色  
141.             cxt.fillStyle="#BA9658";  
142.             //上边的矩形  
143.             cxt.fillRect(tank.x-4,tank.y+4,30,5);  
144.             //下边的矩形  
145.             cxt.fillRect(tank.x-4,tank.y+17+4,30,5);  
146.             //画中间的矩形  
147.             cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);  
148.             //画出坦克的盖子  
149.             cxt.fillStyle="#FEF26E";  
150.             cxt.arc(tank.x+15-4,tank.y+11+4,5,0,Math.PI*2,true);  
151.             cxt.fill();  
152.             //画出炮筒  
153.             cxt.strokeStyle="#FEF26E";  
154.             cxt.lineWidth=1.5;  
155.             cxt.beginPath();  
156.             cxt.moveTo(tank.x+15-4,tank.y+11+4);  
157.             if(tank.direct==1){         //只是炮筒的方向不同  
158.                 cxt.lineTo(tank.x+30-4,tank.y+11+4);  
159.             }else{  
160.                 cxt.lineTo(tank.x-4,tank.y+11+4);  
161.             }  
162.             cxt.closePath();  
163.             cxt.stroke();  
164.             break;    
165.     }  
166.       
167. }  

坦克大战.html

[html] view plain copy

 

 print?

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <meta charset="utf-8"/>  
5. </head>  
6. <body onkeydown="getCommand();">  
7. <h1>html5-坦克大战</h1>  
8. <!--坦克大战的战场-->  
9. <canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>  
10. <!--将tankGame04.js引入-->  
11. <script type="text/javascript" src=http://www.mamicode.com/"tankGame06.js"></script>  
12. <script type="text/javascript">  
13.     //得到画布  
14.     var canvas1=document.getElementById("tankMap");  
15.     //得到绘图上下文  
16.     var cxt=canvas1.getContext("2d");  
17.       
18.     //我的tank  
19.     //规定0向上、1向右、2向下、3向左  
20.     var hero=new Hero(40,40,0,heroColor);  
21.     //定义子弹数组  
22.     var heroBullets=new Array();  
23.     //敌人的tank  
24.     var enemyTanks=new Array();  
25.     for(var i=0;i<3;i++){  
26.         var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor);  
27.         enemyTanks[i]=enemyTank;      
28.     }  
29.       
30.     //画出自己的子弹  
31.     function drawHeroBullet(){  
32.         for(var i=0;i<heroBullets.length;i++){  
33.             var heroBullet=heroBullets[i];  
34.             if(heroBullet!=null&&heroBullet.isLive){  
35.                 cxt.fillStyle="#FEF26E";  
36.                 cxt.fillRect(heroBullet.x,heroBullet.y,2,2);  
37.             }  
38.         }  
39.     }  
40.       
41.     //定时刷新我们的作战区(定时重绘)  
42.     //自己的坦克，敌人坦克，子弹，炸弹，障碍物  
43.     function flashTankMap(){  
44.         //把画布清理  
45.         cxt.clearRect(0,0,400,300);  
46.         //我的坦克  
47.         drawTank(hero);  
48.         //我的子弹  
49.         drawHeroBullet();  
50.         //敌人的坦克  
51.         for(var i=0;i<3;i++){  
52.             drawTank(enemyTanks[i]);  
53.         }  
54.     }  
55.     flashTankMap();  
56.     //接收用户按键的函数  
57.     function getCommand(){  
58.         var code = event.keyCode;  //键盘上字幕的ASCII码  
59.         switch(code){  
60.             case 87:  //W   :上  
61.                 hero.moveUp();  
62.                 break;  
63.             case 68: //D    :右  
64.                 hero.moveRight();  
65.                 break;  
66.             case 83:  //S   :下  
67.                 hero.moveDown();  
68.                 break;  
69.             case 65: //A    :左  
70.                 hero.moveLeft();  
71.                 break;  
72.             case 74: //J  :发子弹  
73.                 hero.shotEnemy();  
74.                 break;  
75.         }  
76.         flashTankMap();  
77.     }  
78.     //每隔100毫秒去刷新一次作战区  
79.     window.setInterval("flashTankMap()",100);  
80. </script>  
81. </body>  
82. </html>  

HTML5移动开发之路（9）——坦克大战游戏3