HTML5實現經典坦克大戰坦克亂走還能發出一個子彈_html5教程技巧

//為了編程方便，我們定義兩個顏色數組 
var heroColor=new Array("#BA9658","#FEF26E"); 
var enmeyColor=new Array("#00A2B5","#00FEFE"); 
//其它的敵人坦克，這里的擴展性，還是不錯的. 
//子彈類 
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>=400||this.y<=0||this.y>=300){ 
//子彈要停止. 
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").innerText="子彈x="+this.x+" 子彈y="+this.y; 
} 
} 
//這是一個Tank類 
function Tank(x,y,direct,color){ 
this.x=x; 
this.y=y; 
this.speed=1; 
this.direct=direct; 
//一個坦克，需要兩個顏色. 
this.color=color; 
//上移 
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; 
} 
} 
//定義一個Hero類 
//x 表示坦克的 橫坐標, y 表示縱坐標, direct 方向 
function Hero(x,y,direct,color){ 
//下面兩句話的作用是通過對象冒充，達到繼承的效果 
this.tank=Tank; 
this.tank(x,y,direct,color); 
//增加一個函數，射擊敵人坦克. 
this.shotEnemy=function(){ 
//創建子彈, 子彈的位置應該和hero有關系，并且和hero的方向有關.!!! 
//this.x 就是當前hero的橫坐標,這里我們簡單的處理(細化) 
switch(this.direct){ 
case 0: 
heroBullet=new Bullet(this.x+9,this.y,this.direct,1); 
break; 
case 1: 
heroBullet=new Bullet(this.x+30,this.y+9,this.direct,1); 
break; 
case 2: 
heroBullet=new Bullet(this.x+9,this.y+30,this.direct,1); 
break; 
case 3: //右 
heroBullet=new Bullet(this.x,this.y+9,this.direct,1); 
break; 
} 
//調用我們的子彈run, 50 是老師多次測試得到的一個結論. 
var timer=window.setInterval("heroBullet.run()",50); 
//把這個timer賦給這個子彈(js對象是引用傳遞!) 
heroBullet.timer=timer; 
} 
} 
//定義一個EnemyTank類 
function EnemyTank (x,y,direct,color){ 
//也通過對象冒充，來繼承Tank 
this.tank=Tank; 
this.tank(x,y,direct,color); 
} 
//畫出自己的子彈,多說一句，你也可以把該函數封裝到Hero類中 
function drawHeroBullet(){ 
//這里，我們加入了一句話，但是要知道這里加，是需要對整個程序有把握 
if(heroBullet!=null&&heroBullet.isLive){ 
cxt.fillStyle="#FEF26E"; 
cxt.fillRect(heroBullet.x,heroBullet.y,2,2); 
} 
} 
//繪制坦克 
function drawTank(tank){ 
//考慮方向 
switch(tank.direct){ 
case 0: //上 
case 2:// 下 
//畫出自己的坦克，使用前面的繪圖技術 
//設置顏色 
cxt.fillStyle=tank.color[0]; 
//韓老師使用 先死--->后活 (初學者最好用這個方法) 
//先畫出左面的矩形 
cxt.fillRect(tank.x,tank.y,5,30); 
//畫出右邊的矩形(這時請大家思路->一定要一個參照點) 
cxt.fillRect(tank.x+15,tank.y,5,30); 
//畫出中間矩形 
cxt.fillRect(tank.x+6,tank.y+5,8,20); 
//畫出坦克的蓋子 
cxt.fillStyle=tank.color[1]; 
cxt.arc(tank.x+10,tank.y+15,4,0,360,true); 
cxt.fill(); 
//畫出炮筒(直線) 
cxt.strokeStyle=tank.color[1]; 
//設置線條的寬度 
cxt.lineWidth=1.5; 
cxt.beginPath(); 
cxt.moveTo(tank.x+10,tank.y+15); 
if(tank.direct==0){ 
cxt.lineTo(tank.x+10,tank.y); 
}else if(tank.direct==2){ 
cxt.lineTo(tank.x+10,tank.y+30); 
} 
cxt.closePath(); 
cxt.stroke(); 
break; 
case 1: //右和左 
case 3: 
//畫出自己的坦克，使用前面的繪圖技術 
//設置顏色 
cxt.fillStyle=tank.color[0]; 
//韓老師使用 先死--->后活 (初學者最好用這個方法) 
//先畫出左面的矩形 
cxt.fillRect(tank.x,tank.y,30,5); 
//畫出右邊的矩形(這時請大家思路->一定要一個參照點) 
cxt.fillRect(tank.x,tank.y+15,30,5); 
//畫出中間矩形 
cxt.fillRect(tank.x+5,tank.y+6,20,8); 
//畫出坦克的蓋子 
cxt.fillStyle=tank.color[1]; 
cxt.arc(tank.x+15,tank.y+10,4,0,360,true); 
cxt.fill(); 
//畫出炮筒(直線) 
cxt.strokeStyle=tank.color[1]; 
//設置線條的寬度 
cxt.lineWidth=1.5; 
cxt.beginPath(); 
cxt.moveTo(tank.x+15,tank.y+10); 
//向右 
if(tank.direct==1){ 
cxt.lineTo(tank.x+30,tank.y+10); 
}else if(tank.direct==3){ //向左 
cxt.lineTo(tank.x,tank.y+10); 
} 
cxt.closePath(); 
cxt.stroke(); 
break; 
} 
}