首页 > 代码库 > HTML5移动开发之路（7）——坦克大战游戏1

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

2024-08-16 15:34:05   225人阅读

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

上一篇中我们介绍了关于Canvas的基础知识，用Canvas绘制各种图形和图片，在上一篇的基础上我们来做一个基于HTML5的坦克大战游戏，下面我们开始吧技术分享

一、用Canvas画出我们的坦克

我们设计的坦克结构如下图所示，如果有的朋友有更好的设计，希望分享和交流一下。

技术分享

如上图所示，我们的坦克基本上是由三个矩形和一个圆形一个线段组成，每个部件的尺寸进行了标记，单位为px,下面我们用上一篇中讲到的知识来画出我们的坦克，注意：我们在画坦克的时候应该选择一个参考点，这里我们选择的是坦克的左上角，如图所示。

 

[html] view plain copy
 
 print?技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8"/>  
  5. </head>  
  6. <body>  
  7. <h1>html5-坦克大战</h1>  
  8. <!--坦克大战的战场-->  
  9. <canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>  
  10. <script type="text/javascript">  
  11.     //得到画布  
  12.     var canvas1 = document.getElementById("tankMap");  
  13.       
  14.     //定义一个位置变量  
  15.     var heroX = 80;  
  16.     var heroY = 80;  
  17.       
  18.     //得到绘图上下文  
  19.     var cxt = canvas1.getContext("2d");  
  20.     //设置颜色  
  21.     cxt.fillStyle="#BA9658";  
  22.     //左边的矩形  
  23.     cxt.fillRect(heroX,heroY,5,30);  
  24.     //右边的矩形  
  25.     cxt.fillRect(heroX+17,heroY,5,30);  
  26.     //画中间的矩形  
  27.     cxt.fillRect(heroX+6,heroY+5,10,20);  
  28.     //画出坦克的盖子  
  29.     cxt.fillStyle="#FEF26E";  
  30.     cxt.arc(heroX+11,heroY+15,5,0,360,true);  
  31.     cxt.fill();  
  32.     //画出炮筒  
  33.     cxt.strokeStyle="#FEF26E";  
  34.     cxt.lineWidth=1.5;  
  35.     cxt.beginPath();  
  36.     cxt.moveTo(heroX+11,heroY+15);  
  37.     cxt.lineTo(heroX+11,heroY);  
  38.     cxt.closePath();  
  39.     cxt.stroke();  
  40.       
  41.       
  42. </script>  
  43. </body>  
  44. </html>  


技术分享

 

二、怎么让坦克动起来？

在研究怎么让坦克动起来之前，我们先来研究一下怎么让一个小球通过键盘操作使其动起来。

首先我们给<body>标签添加一个监听函数

 

[html] view plain copy
 
 print?技术分享技术分享
  1. <body onkeydown="test()">  

监听函数

 

 

[html] view plain copy
 
 print?技术分享技术分享
  1. //现在按键盘上ASDW移动小球  
  2. //说明：当我们按下一个键，实际上触发了一个onkeydown事件  
  3. function test(){  
  4.     var code = event.keyCode;  //键盘上字幕的ASCII码  
  5.     switch(code){  
  6.         case 87:  
  7.             ballY--;  
  8.             break;  
  9.         case 68:  
  10.             ballX++;  
  11.             break;  
  12.         case 83:  
  13.             ballY++;  
  14.             break;  
  15.         case 65:  
  16.             ballX--;  
  17.             break;  
  18.     }  
  19.     //重新绘制  
  20.     drawBall();  
  21. }  

 

我们可以在外部定义两个全局的变量分别表示x轴和y轴的坐标，然后通过改变ballX和ballY的值来改变小球的位置，我们用键盘的WDSA键来控制，这样出来的效果非常奇怪，如下图：

技术分享

我们在绘制的时候没有将以前位置的小球擦除掉，在每次重新绘制前应该先擦除一下，下面将全部代码贴出来：

 

[html] view plain copy
 
 print?技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8"/>  
  5. </head>  
  6. <!--当按键后，去调用test-->  
  7. <body onkeydown="test()">  
  8. <h1>小球上下左右移动</h1>  
  9. <canvas id="test" width="400px" height="300px" style="background-color:black">  
  10. </canvas>  
  11. <script type="text/javascript">  
  12.   
  13.     //得到画布  
  14.     var canvas1 = document.getElementById("test");  
  15.       
  16.     //定义一个位置变量  
  17.     var ballX = 80;  
  18.     var ballY = 80;  
  19.       
  20.     //得到绘图上下文  
  21.     var cxt = canvas1.getContext("2d");  
  22.     drawBall();  
  23.     function drawBall(){  
  24.         //画出一个红色的圆球  
  25.         cxt.beginPath();  //要注意闭合路径  
  26.         cxt.fillStyle="#FF0000";  
  27.         cxt.arc(ballX,ballY,10,0,360,true);  
  28.         cxt.closePath();  
  29.         cxt.fill();  
  30.     }  
  31.       
  32.     //现在按键盘上ASDW移动小球  
  33.     //说明：当我们按下一个键，实际上触发了一个onkeydown事件  
  34.     function test(){  
  35.         var code = event.keyCode;  //键盘上字幕的ASCII码  
  36.         switch(code){  
  37.             case 87:  
  38.                 ballY--;  
  39.                 break;  
  40.             case 68:  
  41.                 ballX++;  
  42.                 break;  
  43.             case 83:  
  44.                 ballY++;  
  45.                 break;  
  46.             case 65:  
  47.                 ballX--;  
  48.                 break;  
  49.         }  
  50.         //把画布清理  
  51.         cxt.clearRect(0,0,400,300);  
  52.         //重新绘制  
  53.         drawBall();  
  54.     }  
  55. </script>  
  56. </body>  
  57. </html>  

三、让我们的坦克动起来

 

我们的坦克如果只是朝一个方向移动的话就非常容易了，只要将上面代码中的画小球改成画坦克就OK了，在让坦克移动之前我们首先应该考虑的是怎么让坦克绕着自己的中心朝各个方向转动的问题。好的，再将上面的图贴出来分析一下。

技术分享

详细的计算过程我就不啰嗦了，想必大家的数学都很好，按照上图的比例计算好各个组件的坐标和位置，旋转后坦克画法如下：

 

[html] view plain copy
 
 print?技术分享技术分享
  1. //设置颜色  
  2. cxt.fillStyle="#BA9658";  
  3. //上边的矩形  
  4. cxt.fillRect(tank.x-4,tank.y+4,30,5);  
  5. //下边的矩形  
  6. cxt.fillRect(tank.x-4,tank.y+17+4,30,5);  
  7. //画中间的矩形  
  8. cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);  
  9. //画出坦克的盖子  
  10. cxt.fillStyle="#FEF26E";  
  11. cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true);  
  12. cxt.fill();  
  13. //画出炮筒  
  14. cxt.strokeStyle="#FEF26E";  
  15. cxt.lineWidth=1.5;  
  16. cxt.beginPath();  
  17. cxt.moveTo(tank.x+15-4,tank.y+11+4);  
  18. if(tank.direct==1){         //只是炮筒的方向不同  
  19.     cxt.lineTo(tank.x+30-4,tank.y+11+4);  
  20. }else{  
  21.     cxt.lineTo(tank.x-4,tank.y+11+4);  
  22. }  
  23. cxt.closePath();  
  24. cxt.stroke();  

好了现在我们发现坦克朝向左边和右边仅仅只有炮筒的方向不同，同理朝向上边和下边也仅仅只有炮筒的方向不同，这时候我们可以将四个方向分为两种情况，再在各个小情况中做处理。同时用OO的思想将代码进行了封装，代码如下：

 

 

[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. <script type="text/javascript">  
  11.     //定义一个Hero类(后面还要改进）  
  12.     //x表示坦克的横坐标  
  13.     //y表示纵坐标  
  14.     //direct表示方向  
  15.     function Hero(x,y,direct){  
  16.         this.x=x;  
  17.         this.y=y;  
  18.         this.speed=1;  
  19.         this.direct=direct;  
  20.         //上移  
  21.         this.moveUp=function(){  
  22.             this.y-=this.speed;  
  23.             this.direct=0;  
  24.         }  
  25.         //右移  
  26.         this.moveRight=function(){  
  27.             this.x+=this.speed;  
  28.             this.direct=1;  
  29.         }  
  30.         //下移  
  31.         this.moveDown=function(){  
  32.             this.y+=this.speed;  
  33.             this.direct=2;  
  34.         }  
  35.         //左移  
  36.         this.moveLeft=function(){  
  37.             this.x-=this.speed;  
  38.             this.direct=3;  
  39.         }  
  40.     }  
  41.   
  42.   
  43.     //得到画布  
  44.     var canvas1 = document.getElementById("tankMap");  
  45.     //得到绘图上下文  
  46.     var cxt = canvas1.getContext("2d");  
  47.       
  48.     //我的tank  
  49.     //规定0向上、1向右、2向下、3向左  
  50.     var hero = new Hero(40,40,0);  
  51.     drawTank(hero);  
  52.     //绘制坦克  
  53.     function drawTank(tank){  
  54.         //考虑方向  
  55.         switch(tank.direct){  
  56.             case 0:     //向上  
  57.             case 2:     //向下  
  58.                 //设置颜色  
  59.                 cxt.fillStyle="#BA9658";  
  60.                 //左边的矩形  
  61.                 cxt.fillRect(tank.x,tank.y,5,30);  
  62.                 //右边的矩形  
  63.                 cxt.fillRect(tank.x+17,tank.y,5,30);  
  64.                 //画中间的矩形  
  65.                 cxt.fillRect(tank.x+6,tank.y+5,10,20);  
  66.                 //画出坦克的盖子  
  67.                 cxt.fillStyle="#FEF26E";  
  68.                 cxt.arc(tank.x+11,tank.y+15,5,0,360,true);  
  69.                 cxt.fill();  
  70.                 //画出炮筒  
  71.                 cxt.strokeStyle="#FEF26E";  
  72.                 cxt.lineWidth=1.5;  
  73.                 cxt.beginPath();  
  74.                 cxt.moveTo(tank.x+11,tank.y+15);  
  75.                 if(tank.direct==0){         //只是炮筒的方向不同  
  76.                     cxt.lineTo(tank.x+11,tank.y);  
  77.                 }else{  
  78.                     cxt.lineTo(tank.x+11,tank.y+30);  
  79.                 }  
  80.                 cxt.closePath();  
  81.                 cxt.stroke();  
  82.                 break;  
  83.             case 1:  
  84.             case 3:  
  85.                 //设置颜色  
  86.                 cxt.fillStyle="#BA9658";  
  87.                 //上边的矩形  
  88.                 cxt.fillRect(tank.x-4,tank.y+4,30,5);  
  89.                 //下边的矩形  
  90.                 cxt.fillRect(tank.x-4,tank.y+17+4,30,5);  
  91.                 //画中间的矩形  
  92.                 cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);  
  93.                 //画出坦克的盖子  
  94.                 cxt.fillStyle="#FEF26E";  
  95.                 cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true);  
  96.                 cxt.fill();  
  97.                 //画出炮筒  
  98.                 cxt.strokeStyle="#FEF26E";  
  99.                 cxt.lineWidth=1.5;  
  100.                 cxt.beginPath();  
  101.                 cxt.moveTo(tank.x+15-4,tank.y+11+4);  
  102.                 if(tank.direct==1){         //只是炮筒的方向不同  
  103.                     cxt.lineTo(tank.x+30-4,tank.y+11+4);  
  104.                 }else{  
  105.                     cxt.lineTo(tank.x-4,tank.y+11+4);  
  106.                 }  
  107.                 cxt.closePath();  
  108.                 cxt.stroke();  
  109.                 break;    
  110.         }  
  111.           
  112.     }  
  113.       
  114.     //接收用户按键的函数  
  115.     function getCommand(){  
  116.         var code = event.keyCode;  //键盘上字幕的ASCII码  
  117.         switch(code){  
  118.             case 87:  
  119.                 hero.moveUp();  
  120.                 break;  
  121.             case 68:  
  122.                 hero.moveRight();  
  123.                 break;  
  124.             case 83:  
  125.                 hero.moveDown();  
  126.                 break;  
  127.             case 65:  
  128.                 hero.moveLeft();  
  129.                 break;  
  130.         }  
  131.         //把画布清理  
  132.         cxt.clearRect(0,0,400,300);  
  133.         //重新绘制  
  134.         drawTank(hero);  
  135.     }  
  136. </script>  
  137. </body>  
  138. </html>  

运行结果：

 

技术分享

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


联系
我们