码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2016-10-14 17:54:13      阅读：259      评论：0      收藏：0      [点我收藏+]

标签：

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

在上一篇文章中我们已经画出了自己的坦克，并且可以控制自己的坦克移动，我们继续接着上一篇来实现我们的坦克大战游戏吧。

一、将JS文件分离出来

使用OO的思想，我们已经对坦克进行了封装，对画坦克也进行了封装，下面我们将这两个对象提取到外部的js文件中，文件内容如下：

 

[javascript] view plain copy
 
 print?技术分享技术分享
  1. //定义一个Hero类(后面还要改进）  
  2. //x表示坦克的横坐标  
  3. //y表示纵坐标  
  4. //direct表示方向  
  5. function Hero(x,y,direct){  
  6.     this.x=x;  
  7.     this.y=y;  
  8.     this.speed=1;  
  9.     this.direct=direct;  
  10.     //上移  
  11.     this.moveUp=function(){  
  12.         this.y-=this.speed;  
  13.         this.direct=0;  
  14.     }  
  15.     //右移  
  16.     this.moveRight=function(){  
  17.         this.x+=this.speed;  
  18.         this.direct=1;  
  19.     }  
  20.     //下移  
  21.     this.moveDown=function(){  
  22.         this.y+=this.speed;  
  23.         this.direct=2;  
  24.     }  
  25.     //左移  
  26.     this.moveLeft=function(){  
  27.         this.x-=this.speed;  
  28.         this.direct=3;  
  29.     }  
  30. }  
  31.   
  32.     //绘制坦克  
  33. function drawTank(tank){  
  34.     //考虑方向  
  35.     switch(tank.direct){  
  36.         case 0:     //向上  
  37.         case 2:     //向下  
  38.             //设置颜色  
  39.             cxt.fillStyle="#BA9658";  
  40.             //左边的矩形  
  41.             cxt.fillRect(tank.x,tank.y,5,30);  
  42.             //右边的矩形  
  43.             cxt.fillRect(tank.x+17,tank.y,5,30);  
  44.             //画中间的矩形  
  45.             cxt.fillRect(tank.x+6,tank.y+5,10,20);  
  46.             //画出坦克的盖子  
  47.             cxt.fillStyle="#FEF26E";  
  48.             cxt.arc(tank.x+11,tank.y+15,5,0,Math.PI*2,true);  
  49.             cxt.fill();  
  50.             //画出炮筒  
  51.             cxt.strokeStyle="#FEF26E";  
  52.             cxt.lineWidth=1.5;  
  53.             cxt.beginPath();  
  54.             cxt.moveTo(tank.x+11,tank.y+15);  
  55.             if(tank.direct==0){         //只是炮筒的方向不同  
  56.                 cxt.lineTo(tank.x+11,tank.y);  
  57.             }else{  
  58.                 cxt.lineTo(tank.x+11,tank.y+30);  
  59.             }  
  60.             cxt.closePath();  
  61.             cxt.stroke();  
  62.             break;  
  63.         case 1:  
  64.         case 3:  
  65.             //设置颜色  
  66.             cxt.fillStyle="#BA9658";  
  67.             //上边的矩形  
  68.             cxt.fillRect(tank.x-4,tank.y+4,30,5);  
  69.             //下边的矩形  
  70.             cxt.fillRect(tank.x-4,tank.y+17+4,30,5);  
  71.             //画中间的矩形  
  72.             cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);  
  73.             //画出坦克的盖子  
  74.             cxt.fillStyle="#FEF26E";  
  75.             cxt.arc(tank.x+15-4,tank.y+11+4,5,0,Math.PI*2,true);  
  76.             cxt.fill();  
  77.             //画出炮筒  
  78.             cxt.strokeStyle="#FEF26E";  
  79.             cxt.lineWidth=1.5;  
  80.             cxt.beginPath();  
  81.             cxt.moveTo(tank.x+15-4,tank.y+11+4);  
  82.             if(tank.direct==1){         //只是炮筒的方向不同  
  83.                 cxt.lineTo(tank.x+30-4,tank.y+11+4);  
  84.             }else{  
  85.                 cxt.lineTo(tank.x-4,tank.y+11+4);  
  86.             }  
  87.             cxt.closePath();  
  88.             cxt.stroke();  
  89.             break;    
  90.     }  
  91.       
  92. }  

 

在上一篇中有一个小问题，感谢 Mark_Lee的提醒。

 

[html] view plain copy
 
 print?技术分享技术分享
  1. //画出坦克的盖子  
  2. cxt.fillStyle="#FEF26E";  
  3. cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true);  
  4. cxt.fill();  


这里画的坦克盖子不是园的，大家可以参考：http://www.w3school.com.cn/html5/canvas_arc.asp

 

技术分享

好了，现在我们的html中的内容就变的清晰多了，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="tankGame04.js"></script>  
  12. <script type="text/javascript">  
  13.   
  14.   
  15.     //得到画布  
  16.     var canvas1 = document.getElementById("tankMap");  
  17.     //得到绘图上下文  
  18.     var cxt = canvas1.getContext("2d");  
  19.       
  20.     //我的tank  
  21.     //规定0向上、1向右、2向下、3向左  
  22.     var hero = new Hero(40,40,0);  
  23.     drawTank(hero);  
  24.   
  25.       
  26.     //接收用户按键的函数  
  27.     function getCommand(){  
  28.         var code = event.keyCode;  //键盘上字幕的ASCII码  
  29.         switch(code){  
  30.             case 87:  
  31.                 hero.moveUp();  
  32.                 break;  
  33.             case 68:  
  34.                 hero.moveRight();  
  35.                 break;  
  36.             case 83:  
  37.                 hero.moveDown();  
  38.                 break;  
  39.             case 65:  
  40.                 hero.moveLeft();  
  41.                 break;  
  42.         }  
  43.         //把画布清理  
  44.         cxt.clearRect(0,0,400,300);  
  45.         //重新绘制  
  46.         drawTank(hero);  
  47.     }  
  48. </script>  
  49. </body>  
  50. </html>  


二、绘制敌人的坦克

 

好多朋友可能现在已经有了思路，这还不简单吗？画敌人坦克的时候再新建立一个function仿照自己的坦克类再写一遍不就好了吗。还有的朋友不同意这个方法，说：既然都是坦克我们就不用写了，直接创建坦克实例不就完了吗。第一个朋友和第二个朋友的做法看似是面向对象其实不是面向对象，在做这种游戏的时候如果我们不用面向对象的思想去实现，也可以实现，但是会很复杂。

我们这样考虑一下，自己坦克肯定和敌人坦克有区别，不能归为一类，比如：发的子弹不同，颜色不同等。但是两者又有相同点（都是坦克），我们是不是应该把这部分给抽象出来呢？是的，我们先抽象出来一个Tank类，再分别继承这个Tank类。你开玩笑吧技术分享这个不是Java语言，这个是JavaScript脚本语言，哪里来的继承？技术分享呵呵，我们可以用javascript中的对象冒充，对象冒充，是JavaScript 和 ECMAScript实现继承的方法，在学习对象冒充实现继承前我们的先了解关键字 this 的使用

 

[javascript] view plain copy
 
 print?技术分享技术分享
  1. function  classA(color){  
  2.   this.color = color;  
  3.   this.show = function(){alert(this.color);}  
  4. }  
  5. /* 
  6.    Note: 
  7.      1> this 代表的是classA函数所构建的对象，而非函数classA对象本身这样说主要是为了避免（function is object）的影响; 
  8.      2> 在构建classA对象时，是通过this来初始化的属性和方法的，如果用classB的this去冒充classA的this，那么就实现了简单的继承了 
  9. */  

对象冒充的原理：函数classA通过this来初始化属性和方法，如果用函数classB的this冒充classA的this去执行，则就会使classB具有classA的属性和方法

 

好了，现在我们用自己的坦克和敌人的坦克对象去冒充一下坦克，呵呵。

 

[javascript] view plain copy
 
 print?技术分享技术分享
  1. //定义一个Tank类（基类）  
  2. function Tank(x,y,direct,color){  
  3.     this.x=x;  
  4.     this.y=y;  
  5.     this.speed=1;  
  6.     this.direct=direct;  
  7.     this.color=color;  
  8.     //上移  
  9.     this.moveUp=function(){  
  10.         this.y-=this.speed;  
  11.         this.direct=0;  
  12.     }  
  13.     //右移  
  14.     this.moveRight=function(){  
  15.         this.x+=this.speed;  
  16.         this.direct=1;  
  17.     }  
  18.     //下移  
  19.     this.moveDown=function(){  
  20.         this.y+=this.speed;  
  21.         this.direct=2;  
  22.     }  
  23.     //左移  
  24.     this.moveLeft=function(){  
  25.         this.x-=this.speed;  
  26.         this.direct=3;  
  27.     }  
  28. }  
  29.   
  30. //定义一个Hero类  
  31. function Hero(x,y,direct,color){  
  32.     //下面两句话的作用是通过对象冒充达到继承的效果  
  33.     this.tank=Tank;  
  34.     this.tank(x,y,direct,color);  
  35. }  
  36.   
  37. //定义一个EnemyTank类  
  38. function EnemyTank(x,y,direct,color){  
  39.     this.tank=Tank;  
  40.     this.tank(x,y,direct,color);  
  41. }  

这样我们就将自己的坦克和敌人的坦克定义好了，那么绘制坦克的drawTank(tank)要不要变呢？因为绘制的是Tank所以不需要改动，呵呵，这就是面向对象的多态喽。

 

创建坦克对象吧！

 

[html] view plain copy
 
 print?技术分享技术分享
  1. //我的tank  
  2. //规定0向上、1向右、2向下、3向左  
  3. var hero=new Hero(40,40,0,heroColor);  
  4. //敌人的tank  
  5. var enemyTanks=new Array();  
  6. for(var i=0;i<3;i++){  
  7.     var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor);  
  8.     enemyTanks[i]=enemyTank;      
  9. }  


完整代码如下：

 

tankGame05.js

 

[javascript] view plain copy
 
 print?技术分享技术分享
  1. //为了编程方便，我们定义两个颜色数组  
  2. var heroColor=new Array("#BA9658","#FEF26E");  
  3. var enemyColor=new Array("#00A2B5","#00FEFE");  
  4.   
  5. //定义一个Tank类（基类）  
  6. function Tank(x,y,direct,color){  
  7.     this.x=x;  
  8.     this.y=y;  
  9.     this.speed=1;  
  10.     this.direct=direct;  
  11.     this.color=color;  
  12.     //上移  
  13.     this.moveUp=function(){  
  14.         this.y-=this.speed;  
  15.         this.direct=0;  
  16.     }  
  17.     //右移  
  18.     this.moveRight=function(){  
  19.         this.x+=this.speed;  
  20.         this.direct=1;  
  21.     }  
  22.     //下移  
  23.     this.moveDown=function(){  
  24.         this.y+=this.speed;  
  25.         this.direct=2;  
  26.     }  
  27.     //左移  
  28.     this.moveLeft=function(){  
  29.         this.x-=this.speed;  
  30.         this.direct=3;  
  31.     }  
  32. }  
  33.   
  34. //定义一个Hero类  
  35. function Hero(x,y,direct,color){  
  36.     //下面两句话的作用是通过对象冒充达到继承的效果  
  37.     this.tank=Tank;  
  38.     this.tank(x,y,direct,color);  
  39. }  
  40.   
  41. //定义一个EnemyTank类  
  42. function EnemyTank(x,y,direct,color){  
  43.     this.tank=Tank;  
  44.     this.tank(x,y,direct,color);  
  45. }  
  46.   
  47.     //绘制坦克  
  48. function drawTank(tank){  
  49.     //考虑方向  
  50.     switch(tank.direct){  
  51.         case 0:     //向上  
  52.         case 2:     //向下  
  53.             //设置颜色  
  54.             cxt.fillStyle=tank.color[0];  
  55.             //左边的矩形  
  56.             cxt.fillRect(tank.x,tank.y,5,30);  
  57.             //右边的矩形  
  58.             cxt.fillRect(tank.x+17,tank.y,5,30);  
  59.             //画中间的矩形  
  60.             cxt.fillRect(tank.x+6,tank.y+5,10,20);  
  61.             //画出坦克的盖子  
  62.             cxt.fillStyle=tank.color[1];  
  63.             cxt.arc(tank.x+11,tank.y+15,5,0,Math*PI*2,true);  
  64.             cxt.fill();  
  65.             //画出炮筒  
  66.             cxt.strokeStyle=tank.color[1];  
  67.             cxt.lineWidth=1.5;  
  68.             cxt.beginPath();  
  69.             cxt.moveTo(tank.x+11,tank.y+15);  
  70.             if(tank.direct==0){         //只是炮筒的方向不同  
  71.                 cxt.lineTo(tank.x+11,tank.y);  
  72.             }else{  
  73.                 cxt.lineTo(tank.x+11,tank.y+30);  
  74.             }  
  75.             cxt.closePath();  
  76.             cxt.stroke();  
  77.             break;  
  78.         case 1:  
  79.         case 3:  
  80.             //设置颜色  
  81.             cxt.fillStyle="#BA9658";  
  82.             //上边的矩形  
  83.             cxt.fillRect(tank.x-4,tank.y+4,30,5);  
  84.             //下边的矩形  
  85.             cxt.fillRect(tank.x-4,tank.y+17+4,30,5);  
  86.             //画中间的矩形  
  87.             cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);  
  88.             //画出坦克的盖子  
  89.             cxt.fillStyle="#FEF26E";  
  90.             cxt.arc(tank.x+15-4,tank.y+11+4,5,0,Math*PI*2,true);  
  91.             cxt.fill();  
  92.             //画出炮筒  
  93.             cxt.strokeStyle="#FEF26E";  
  94.             cxt.lineWidth=1.5;  
  95.             cxt.beginPath();  
  96.             cxt.moveTo(tank.x+15-4,tank.y+11+4);  
  97.             if(tank.direct==1){         //只是炮筒的方向不同  
  98.                 cxt.lineTo(tank.x+30-4,tank.y+11+4);  
  99.             }else{  
  100.                 cxt.lineTo(tank.x-4,tank.y+11+4);  
  101.             }  
  102.             cxt.closePath();  
  103.             cxt.stroke();  
  104.             break;    
  105.     }  
  106.       
  107. }  


坦克大战.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="tankGame05.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.     //敌人的tank  
  22.     var enemyTanks=new Array();  
  23.     for(var i=0;i<3;i++){  
  24.         var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor);  
  25.         enemyTanks[i]=enemyTank;      
  26.     }  
  27.       
  28.     //定时刷新我们的作战区(定时重绘)  
  29.     //自己的坦克，敌人坦克，子弹，炸弹，障碍物  
  30.     function flashTankMap(){  
  31.         //把画布清理  
  32.         cxt.clearRect(0,0,400,300);  
  33.         //我的坦克  
  34.         drawTank(hero);  
  35.         //敌人的坦克  
  36.         for(var i=0;i<3;i++){  
  37.             drawTank(enemyTanks[i]);  
  38.         }  
  39.     }  
  40.     flashTankMap();  
  41.     //接收用户按键的函数  
  42.     function getCommand(){  
  43.         var code = event.keyCode;  //键盘上字幕的ASCII码  
  44.         switch(code){  
  45.             case 87:  
  46.                 hero.moveUp();  
  47.                 break;  
  48.             case 68:  
  49.                 hero.moveRight();  
  50.                 break;  
  51.             case 83:  
  52.                 hero.moveDown();  
  53.                 break;  
  54.             case 65:  
  55.                 hero.moveLeft();  
  56.                 break;  
  57.         }  
  58.         flashTankMap();  
  59.     }  
  60. </script>  
  61. </body>  
  62. </html>  

运行效果：
技术分享

 

 既然我们的坦克和敌人的坦克都有了，我们要让他们战斗起来，下一篇我们将让坦克发子弹。

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

标签：

原文地址：http://www.cnblogs.com/itxdl/p/5960930.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！