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

来自：http://blog.csdn.net/cai_xingyun/article/details/48629015

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

一、将JS文件分离出来

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

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. function drawTank(tank){
33. //考虑方向
34. switch(tank.direct){
35. case 0:     //向上
36. case 2:     //向下
37. //设置颜色
38. cxt.fillStyle="#BA9658";
39. //左边的矩形
40. cxt.fillRect(tank.x,tank.y,5,30);
41. //右边的矩形
42. cxt.fillRect(tank.x+17,tank.y,5,30);
43. //画中间的矩形
44. cxt.fillRect(tank.x+6,tank.y+5,10,20);
45. //画出坦克的盖子
46. cxt.fillStyle="#FEF26E";
47. cxt.arc(tank.x+11,tank.y+15,5,0,Math.PI*2,true);
48. cxt.fill();
49. //画出炮筒
50. cxt.strokeStyle="#FEF26E";
51. cxt.lineWidth=1.5;
52. cxt.beginPath();
53. cxt.moveTo(tank.x+11,tank.y+15);
54. if(tank.direct==0){         //只是炮筒的方向不同
55. cxt.lineTo(tank.x+11,tank.y);
56. }else{
57. cxt.lineTo(tank.x+11,tank.y+30);
58. }
59. cxt.closePath();
60. cxt.stroke();
61. break;
62. case 1:
63. case 3:
64. //设置颜色
65. cxt.fillStyle="#BA9658";
66. //上边的矩形
67. cxt.fillRect(tank.x-4,tank.y+4,30,5);
68. //下边的矩形
69. cxt.fillRect(tank.x-4,tank.y+17+4,30,5);
70. //画中间的矩形
71. cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);
72. //画出坦克的盖子
73. cxt.fillStyle="#FEF26E";
74. cxt.arc(tank.x+15-4,tank.y+11+4,5,0,Math.PI*2,true);
75. cxt.fill();
76. //画出炮筒
77. cxt.strokeStyle="#FEF26E";
78. cxt.lineWidth=1.5;
79. cxt.beginPath();
80. cxt.moveTo(tank.x+15-4,tank.y+11+4);
81. if(tank.direct==1){         //只是炮筒的方向不同
82. cxt.lineTo(tank.x+30-4,tank.y+11+4);
83. }else{
84. cxt.lineTo(tank.x-4,tank.y+11+4);
85. }
86. cxt.closePath();
87. cxt.stroke();
88. break;
89. }
90. }

在上一篇中有一个小问题，感谢;i<3;i++){

var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor);

enemyTanks[i]=enemyTank;

}