上一篇博客只画出了，一个坦克，并让其可以上下左右移动，这篇博客将画出敌人的坦克，并让自己的坦克可以发子弹，但是还不是尽善尽美，还有一些问题，将会在下篇博客说明：
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body onkeydown="getCommand()"> <h1>html5-经典的坦克大战</h1> <canvas id="tankeMap" width="500px" height="500px" style="background-color:black"> </canvas> <span id="aa">数据</span> <script type="text/javascript" src="tankeGame.js"></script> <script type="text/javascript"> //准备工作 //得到画布 var canvas1=document.getElementById("tankeMap"); //得到上下文引用对象，你可以理解成画笔 var cxt=canvas1.getContext("2d"); //定义一个坦克 //数字0表示向上 数字1表示右 数字2表示下 数字3表示左 var hero=new Hero(130,130,0,tankeColor); var heroBullet=null; //定义一个敌人的坦克数组对象 var enemyTankes=new Array(); //生成3个敌方坦克 for(var i=0;i<3;i++){ //创建敌人的坦克对象 var enemyTanke=new EnemyTanke((i+1)*50,30,2,enemyColor); enemyTankes[i]=enemyTanke; } //刚进来先刷新画布，并初始化元素 flashMap(); //刷新画布的函数 function flashMap(){ //清除画布的元素，刷新 cxt.clearRect(0,0,500,500); //画自己的坦克 drawTanke(hero); //画自己的子弹 drawHeroBullet(); //画敌人的坦克 for(var i=0;i<3;i++){ drawTanke(enemyTankes[i]); } } //获取键盘的命令的处理的函数 function getCommand(){ var code=event.keyCode; cxt.clearRect(0,0,500,500); switch(code){ case 87://w键 hero.moveUp(); break; case 68://d键 hero.moveRight(); break; case 83://s键 hero.moveDown(); break; case 65://a键 hero.moveLeft(); break; case 74://j键 hero.shotEnemy(); break; } flashMap();//调用上下左右的同时刷新画布 } //每隔100毫秒刷新画布 window.setInterval("flashMap()",100); </script> </body> </html>
tankeGame.js代码：
var tankeColor=new Array("#BA9658","#FEF26E"); var enemyColor=new Array("#00A2B5","#00FEFE"); //坦克的父类 function TanK(x,y,direct,color){ this.x=x; this.y=y; this.direct=direct; this.speed=5; this.color=color; this.moveUp=function(){ this.y-=this.speed; this.direct=0; } this.moveDown=function(){ this.y+=this.speed; this.direct=2; } this.moveRight=function(){ this.x+=this.speed; this.direct=1; } this.moveLeft=function(){ this.x-=this.speed; this.direct=3; } } //子弹类 function Bullet(x,y,direct,speed){ this.x=x; this.y=y; this.direct=direct; this.speed=speed; this.timer=null; this.isLive=true; this.run=function run(){ if(this.x<=0||this.x>=500||this.y<=0||this.y>=500){ window.clearInterval(this.timer); this.isLive=false; }else{ switch(this.direct){ case 0: this.y-=this.speed; break; case 1: this.x+=this.speed; break; case 2: this.y+=this.speed; break; case 3: this.x-=this.speed; break; } } document.getElementById("aa").innerHTML="子弹的x="+this.x+"y="+this.y; } } //定义一个hero类 //x、y表示初始坐标，direct表示方向 function Hero(x,y,direct,color){ this.tanke=TanK; this.tanke(x,y,direct,color); this.shotEnemy=function(){ switch(this.direct){ case 0://上 heroBullet=new Bullet(this.x+9,this.y,this.direct,1); break; case 1://右 heroBullet=new Bullet(this.x+36,this.y+9,this.direct,1); break; case 2://下 heroBullet=new Bullet(this.x+9,this.y+36,this.direct,1); break; case 3://左 heroBullet=new Bullet(this.x-6,this.y+9,this.direct,1); break; } var timer=window.setInterval("heroBullet.run()",50); heroBullet.timer=timer; } } //定义一个hero类 //x、y表示初始坐标，direct表示方向 function EnemyTanke(x,y,direct,color){ this.tanke=TanK; this.tanke(x,y,direct,color); } //画自己的子弹 function drawHeroBullet(){ if(heroBullet!=null&&heroBullet.isLive){ cxt.fillStyle="#FEF26E"; cxt.fillRect(heroBullet.x,heroBullet.y,2,2); } } //把创建坦克的方法封装为一个对象 //该函数可以画自己的坦克，也可以画敌人的坦克 //tanke就是一个对象 function drawTanke(tanke){ //坦克的方向 switch(tanke.direct){ case 0: case 2: {//上 //画出自己的坦克设置颜色 cxt.fillStyle=tanke.color[0]; cxt.fillRect(tanke.x,tanke.y,5,30);//左齿轮 cxt.fillRect(tanke.x+15,tanke.y,5,30);//右齿轮 cxt.fillRect(tanke.x+6,tanke.y+5,8,20);//中间的坦克体 //画中间的圆形的炮筒体 cxt.fillStyle=tanke.color[1]; cxt.beginPath(); cxt.arc(tanke.x+10,tanke.y+15,4.5,0,360,false); cxt.closePath(); cxt.fill(); //画出炮筒 cxt.strokeStyle=tanke.color[1]; //cxt.fillStyle="#FFD972"; cxt.lineWidth=1.9; cxt.beginPath(); cxt.moveTo(tanke.x+10,tanke.y+15);//设置点的位置 if(tanke.direct==0){ cxt.lineTo(tanke.x+10,tanke.y-6);//设置第二个点的位置 }else if(tanke.direct==2){ cxt.lineTo(tanke.x+10,tanke.y+36);//设置第二个点的位置 } cxt.closePath(); cxt.stroke(); } break; case 1: case 3: {//右 //画出自己的坦克设置颜色 cxt.fillStyle=tanke.color[0]; cxt.fillRect(tanke.x,tanke.y,30,5);//左齿轮 cxt.fillRect(tanke.x,tanke.y+15,30,5);//右齿轮 cxt.fillRect(tanke.x+5,tanke.y+6,20,8);//中间的坦克体 //画中间的圆形的炮筒体 cxt.fillStyle=tanke.color[1]; cxt.beginPath(); cxt.arc(tanke.x+15,tanke.y+10,4.5,0,360,false); cxt.closePath(); cxt.fill(); //画出炮筒 cxt.strokeStyle=tanke.color[1]; //cxt.fillStyle="#FFD972"; cxt.lineWidth=1.9; cxt.beginPath(); cxt.moveTo(tanke.x+15,tanke.y+10);//设置点的位置 if(tanke.direct==1){//右 cxt.lineTo(tanke.x+36,tanke.y+10);//设置第二个点的位置 }else if(tanke.direct==3){//左 cxt.lineTo(tanke.x-6,tanke.y+10);//设置第二个点的位置 } cxt.closePath(); cxt.stroke(); } break; } }
end；