欢迎来到it培训的黄埔军校——智游教育!

小强的html5移动开发之路(7)——坦克大战游戏2-永利国际

于2017-04-10 16:10:15 发表在html5知识库
在上一篇文章中我们已经画出了自己的坦克,并且可以控制自己的坦克移动,我们继续接着上一篇来实现我们的坦克大战游戏吧。
一、将js文件分离出来
使用oo的思想,我们已经对坦克进行了封装,对画坦克也进行了封装,下面我们将这两个对象提取到外部的js文件中,文件内容如下:
//定义一个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,tank.y 6 4,20,10);
//画出坦克的盖子
cxt.fillstyle="#fef26e";
cxt.arc(tank.x 15-4,tank.y 11 4,5,0,math.pi*2,true);
cxt.fill();
//画出炮筒
cxt.strokestyle="#fef26e";
cxt.linewidth=1.5;
cxt.beginpath();
cxt.moveto(tank.x 15-4,tank.y 11 4);
if(tank.direct==1){         //只是炮筒的方向不同
cxt.lineto(tank.x 30-4,tank.y 11 4);
}else{
cxt.lineto(tank.x-4,tank.y 11 4);
}
cxt.closepath();
cxt.stroke();
break;
}

}
在上一篇中有一个小问题,感谢 的提醒。
//画出坦克的盖子
cxt.fillstyle="#fef26e";
cxt.arc(tank.x 15-4,tank.y 11 4,5,0,360,true);
cxt.fill();


这里画的坦克盖子不是园的,大家可以参考:


既然我们的坦克和敌人的坦克都有了,我们要让他们战斗起来,下一篇我们将让坦克发子弹