HTML5移动开发之路坦克大战游戏2.docxVIP

在上一篇文章中我们已经画出了自己的坦克，并且可以控制自己的坦克移动，我们继续接着上一篇来实现我们的坦克大战游戏吧。一、将JS文件分离出来使用OO的思想，我们已经对坦克进行了封装，对画坦克也进行了封装，下面我们将这两个对象提取到外部的js文件中，文件内容如下：[javascript]?view plain?copy?print?//定义一个Hero类(后面还要改进）??//x表示坦克的横坐标??//y表示纵坐标??//direct表示方向??function?Hero(x,y,direct){??????this.x=x;??????this.y=y;??????this.speed=1;??????this.direct=direct;??????//上移??????this.moveUp=function(){??????????this.y-=this.speed;??????????this.direct=0;??????}??????//右移??????this.moveRight=function(){??????????this.x+=this.speed;??????????this.direct=1;??????}??????//下移??????this.moveDown=function(){??????????this.y+=this.speed;??????????this.direct=2;??????}??????//左移??????this.moveLeft=function(){??????????this.x-=this.speed;??????????this.direct=3;??????}??}????????//绘制坦克??function?drawTank(tank){??????//考虑方向??????switch(tank.direct){??????????case?0:?????//向上??????????case?2:?????//向下??????????????//设置颜色??????????????cxt.fillStyle=#BA9658;??????????????//左边的矩形??????????????cxt.fillRect(tank.x,tank.y,5,30);??????????????//右边的矩形??????????????cxt.fillRect(tank.x+17,tank.y,5,30);??????????????//画中间的矩形??????????????cxt.fillRect(tank.x+6,tank.y+5,10,20);??????????????//画出坦克的盖子??????????????cxt.fillStyle=#FEF26E;??????????????cxt.arc(tank.x+11,tank.y+15,5,0,Math.PI*2,true);??????????????cxt.fill();??????????????//画出炮筒??????????????cxt.strokeStyle=#FEF26E;??????????????cxt.lineWidth=1.5;??????????????cxt.beginPath();??????????????cxt.moveTo(tank.x+11,tank.y+15);??????????????if(tank.direct==0){?????????//只是炮筒的方向不同??????????????????cxt.lineTo(tank.x+11,tank.y);??????????????}else{??????????????????cxt.lineTo(tank.x+11,tank.y+30);??????????????}??????????????cxt.closePath();??????????????cxt.stroke();??????????????break;??????????case?1:??????????case?3:??????????????//设置颜色??????????????cxt.fillStyle=#BA9658;??????????????//上边的矩形??????????????cxt.fillRect(tank.x-4,tank.y+4,30,5);??????????????//下边的矩形??????????????cxt.fillRect(tank.x-4,tank.y+17+4,30,5);??????????????//画中间的矩形??????????????cxt.fillRect(tank.x+5-4,ta