HTML5移动开发之路(7)——坦克大战游戏1_第1页
HTML5移动开发之路(7)——坦克大战游戏1_第2页
HTML5移动开发之路(7)——坦克大战游戏1_第3页
HTML5移动开发之路(7)——坦克大战游戏1_第4页
HTML5移动开发之路(7)——坦克大战游戏1_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、 上一篇中我们介绍了关于Canvas的基础知识，用Canvas绘制各种图形和图片，在上一篇的基础上我们来做一个基于HTML5的坦克大战游戏，下面我们开始吧一、用Canvas画出我们的坦克我们设计的坦克结构如下图所示，如果有的朋友有更好的设计，希望分享和交流一下。如上图所示，我们的坦克基本上是由三个矩形和一个圆形一个线段组成，每个部件的尺寸进行了标记，单位为px,下面我们用上一篇中讲到的知识来画出我们的坦克，注意：我们在画坦克的时候应该选择一个参考点，这里我们选择的是坦克的左上角，如图所示。html view plain copy print?1. <!DOC

2、TYPE html>  2. <html>  3. <head>  4. <meta charset="utf-8"/>  5. </head>  6. <body>  7. <h1>html5-坦克大战</h1>  8. <!-坦克大战的战场->  9. <canvas id=&

3、quot;tankMap" width="400px" height="300px" style="background-color:black"></canvas>  10. <script type="text/javascript">  11.     /得到画布  12.     var&#

4、160;canvas1 = document.getElementById("tankMap");  13.       14.     /定义一个位置变量  15.     var heroX = 80;  16.     var heroY = 80;&#

5、160; 17.       18.     /得到绘图上下文  19.     var cxt = canvas1.getContext("2d");  20.     /设置颜色  21.     cxt.fillStyle="#BA9658&q

6、uot;  22.     /左边的矩形  23.     cxt.fillRect(heroX,heroY,5,30);  24.     /右边的矩形  25.     cxt.fillRect(heroX+17,heroY,5,30);  26.     /画中间的矩形  

7、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.    &

8、#160;cxt.fill();  32.     /画出炮筒  33.     cxt.strokeStyle="#FEF26E"  34.     cxt.lineWidth=1.5;  35.     cxt.beginPath();  36.     cxt.moveTo

9、(heroX+11,heroY+15);  37.     cxt.lineTo(heroX+11,heroY);  38.     cxt.closePath();  39.     cxt.stroke();  40.       41.       42. </scr

10、ipt>  43. </body>  44. </html>  二、怎么让坦克动起来？在研究怎么让坦克动起来之前，我们先来研究一下怎么让一个小球通过键盘操作使其动起来。首先我们给<body>标签添加一个监听函数html view plain copy print?1. <body onkeydown="test()">  监听函数html view plain copy p

11、rint?1. /现在按键盘上ASDW移动小球  2. /说明：当我们按下一个键，实际上触发了一个onkeydown事件  3. function test()  4.     var code = event.keyCode;  /键盘上字幕的ASCII码  5.     switch(code)  6.     &

12、#160;   case 87:  7.             ballY-;  8.             break;  9.         case 68:&

13、#160; 10.             ballX+;  11.             break;  12.         case 83:  13.    &

14、#160;        ballY+;  14.             break;  15.         case 65:  16.          

15、;   ballX-;  17.             break;  18.       19.     /重新绘制  20.     drawBall();  21.   我们可以在外部定义两个全局的变量

16、分别表示x轴和y轴的坐标，然后通过改变ballX和ballY的值来改变小球的位置，我们用键盘的WDSA键来控制，这样出来的效果非常奇怪，如下图：我们在绘制的时候没有将以前位置的小球擦除掉，在每次重新绘制前应该先擦除一下，下面将全部代码贴出来：html view plain copy print?1. <!DOCTYPE html>  2. <html>  3. <head>  4. <meta charset="utf-8"

17、/>  5. </head>  6. <!-当按键后，去调用test->  7. <body onkeydown="test()">  8. <h1>小球上下左右移动</h1>  9. <canvas id="test" width="400px" height="300px" style=&qu

18、ot;background-color:black">  10. </canvas>  11. <script type="text/javascript">  12.   13.     /得到画布  14.     var canvas1 = document.getElementById("test&q

19、uot;);  15.       16.     /定义一个位置变量  17.     var ballX = 80;  18.     var ballY = 80;  19.       20.  

20、60;  /得到绘图上下文  21.     var cxt = canvas1.getContext("2d");  22.     drawBall();  23.     function drawBall()  24.        

21、0;/画出一个红色的圆球  25.         cxt.beginPath();  /要注意闭合路径  26.         cxt.fillStyle="#FF0000"  27.         cxt.arc(ballX,ballY,10,0,36

22、0,true);  28.         cxt.closePath();  29.         cxt.fill();  30.       31.       32.     /现在按键盘上ASDW移动小球&#

23、160; 33.     /说明：当我们按下一个键，实际上触发了一个onkeydown事件  34.     function test()  35.         var code = event.keyCode;  /键盘上字幕的ASCII码  36.     &

24、#160;   switch(code)  37.             case 87:  38.                 ballY-;  39.      

25、;           break;  40.             case 68:  41.                 ballX+; &

26、#160;42.                 break;  43.             case 83:  44.             

27、    ballY+;  45.                 break;  46.             case 65:  47.      

28、0;          ballX-;  48.                 break;  49.           50.      

29、60;  /把画布清理  51.         cxt.clearRect(0,0,400,300);  52.         /重新绘制  53.         drawBall();  54.     

30、0; 55. </script>  56. </body>  57. </html>  三、让我们的坦克动起来我们的坦克如果只是朝一个方向移动的话就非常容易了，只要将上面代码中的画小球改成画坦克就OK了，在让坦克移动之前我们首先应该考虑的是怎么让坦克绕着自己的中心朝各个方向转动的问题。好的，再将上面的图贴出来分析一下。详细的计算过程我就不啰嗦了，想必大家的数学都很好，按照上图的比例计算好各个组件的坐标和位置，旋转后坦克画法如下：html view plain copy&

31、#160;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); 

32、; 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(); 

33、 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,t

34、ank.y+11+4);  22.   23. cxt.closePath();  24. cxt.stroke();  好了现在我们发现坦克朝向左边和右边仅仅只有炮筒的方向不同，同理朝向上边和下边也仅仅只有炮筒的方向不同，这时候我们可以将四个方向分为两种情况，再在各个小情况中做处理。同时用OO的思想将代码进行了封装，代码如下：html view plain copy print?1. <!DOCTYPE html>  2. <html&

35、gt;  3. <head>  4. <meta charset="utf-8"/>  5. </head>  6. <body onkeydown="getCommand();">  7. <h1>html5-坦克大战</h1>  8. <!-坦克大战的战场->  9. <canvas id=&q

36、uot;tankMap" width="400px" height="300px" style="background-color:black"></canvas>  10. <script type="text/javascript">  11.     /定义一个Hero类(后面还要改进）  12.    

37、; /x表示坦克的横坐标  13.     /y表示纵坐标  14.     /direct表示方向  15.     function Hero(x,y,direct)  16.         this.x=x;  17.     &#

38、160;   this.y=y;  18.         this.speed=1;  19.         this.direct=direct;  20.         /上移  21.     &#

39、160;   this.moveUp=function()  22.             this.y-=this.speed;  23.             this.direct=0;  24.      &

40、#160;    25.         /右移  26.         this.moveRight=function()  27.             this.x+=this.speed;  28. 

41、0;           this.direct=1;  29.           30.         /下移  31.         this.moveDown=function(

42、)  32.             this.y+=this.speed;  33.             this.direct=2;  34.           35.  

43、0;      /左移  36.         this.moveLeft=function()  37.             this.x-=this.speed;  38.         

44、    this.direct=3;  39.           40.       41.   42.   43.     /得到画布  44.     var canvas1 = document.get

45、ElementById("tankMap");  45.     /得到绘图上下文  46.     var cxt = canvas1.getContext("2d");  47.       48.     /我的tank  49.   

46、0; /规定0向上、1向右、2向下、3向左  50.     var hero = new Hero(40,40,0);  51.     drawTank(hero);  52.     /绘制坦克  53.     function drawTank(tank)  54. &

47、#160;       /考虑方向  55.         switch(tank.direct)  56.             case 0:     /向上  57.   

48、0;         case 2:     /向下  58.                 /设置颜色  59.            

49、     cxt.fillStyle="#BA9658"  60.                 /左边的矩形  61.                 cxt.fil

50、lRect(tank.x,tank.y,5,30);  62.                 /右边的矩形  63.                 cxt.fillRect(tank.x+17,tank.y,5,30); &#

51、160;64.                 /画中间的矩形  65.                 cxt.fillRect(tank.x+6,tank.y+5,10,20);  66.     

52、;            /画出坦克的盖子  67.                 cxt.fillStyle="#FEF26E"  68.          

53、0;      cxt.arc(tank.x+11,tank.y+15,5,0,360,true);  69.                 cxt.fill();  70.              

54、60;  /画出炮筒  71.                 cxt.strokeStyle="#FEF26E"  72.                 cxt.lineWidth=1.5;

55、60; 73.                 cxt.beginPath();  74.                 cxt.moveTo(tank.x+11,tank.y+15);  75.   

56、60;             if(tank.direct=0)         /只是炮筒的方向不同  76.                     cx

57、t.lineTo(tank.x+11,tank.y);  77.                 else  78.                     cxt.lineTo(tank.x+11,

58、tank.y+30);  79.                   80.                 cxt.closePath();  81.      

59、60;          cxt.stroke();  82.                 break;  83.             case 1: 

60、 84.             case 3:  85.                 /设置颜色  86.             &

61、#160;   cxt.fillStyle="#BA9658"  87.                 /上边的矩形  88.                 cxt.fillRect(t

62、ank.x-4,tank.y+4,30,5);  89.                 /下边的矩形  90.                 cxt.fillRect(tank.x-4,tank.y+17+4,30,5); &

63、#160;91.                 /画中间的矩形  92.                 cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);  93.    

64、             /画出坦克的盖子  94.                 cxt.fillStyle="#FEF26E"  95.          

65、;       cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true);  96.                 cxt.fill();  97.             

66、    /画出炮筒  98.                 cxt.strokeStyle="#FEF26E"  99.                 cxt.lineWidt

67、h=1.5;  100.                 cxt.beginPath();  101.                 cxt.moveTo(tank.x+15-4,tank.y+11+4);  102.

68、                 if(tank.direct=1)         /只是炮筒的方向不同  103.                  

69、60;  cxt.lineTo(tank.x+30-4,tank.y+11+4);  104.                 else  105.                    &

70、#160;cxt.lineTo(tank.x-4,tank.y+11+4);  106.                   107.                 cxt.closePath();  108. 

71、60;               cxt.stroke();  109.                 break;    110.           111.      

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论