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

2023-01-01 21:18:02

来自：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;
  • }
    • 上一篇：java课程设计-坦克大战


    下一篇：cocos2d-x游戏开发系列教程-坦克大战游戏启动界面的编写