坦克打坦克html （js）

//定义敌人和我们自己的坦克的颜色
var enemyColor = new Array('green','brown');
var heroColor = new Array('#FEF26E','#BA9658');
//封装一个公用的坦克类
function Tank(x,y,direct){
this.x = x;
this.y = y;
this.speed = 3;
this.direct = direct;
this.moveUp = function(){
this.y -= hero.speed;
this.direct = 0;
}
this.moveRight = function(){
this.x += hero.speed;
this.direct = 1;
}
this.moveBottom = function(){
this.y += hero.speed;
this.direct = 2;
}
this.moveLeft = function(){
this.x -= hero.speed;
this.direct = 3;
}
}

//英雄坦克类
function Hero(x,y,direct,color){
//将坦克类的构造方法赋给hero
this.hero = Tank;
//调用,拥有坦克类的所有的属性和方法
this.hero(x,y,direct);
this.color = color;
this.direct = direct;
this.shotEnemy = function(){
switch(this.direct){
case 0:
heroBullet = new Bullet(this.x+10,this.y,this.direct);
break;
case 1:
heroBullet = new Bullet(this.x+30,this.y+10,this.direct);
break;
case 2:
heroBullet = new Bullet(this.x+10,this.y+30,this.direct);
break;
case 3:
heroBullet = new Bullet(this.x,this.y+10,this.direct);
break;
}
heroBullets.push(heroBullet);
//定义定时器
var timer = window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);
heroBullets[(heroBullets.length-1)].timer = timer;
}


}


//敌人的坦克
function EnemyTank(x,y,direct,color){
//将坦克类的构造方法赋给hero
this.enemyTank = Tank;
//调用,拥有坦克类的所有的属性和方法
this.enemyTank(x,y,direct);
this.color = color;
this.isLive = true;
}
//绘制坦克
function drawTank(hero){
switch(hero.direct){
case 0:
case 2:
//alert(ctx);
ctx.fillStyle = hero.color[0];
ctx.fillRect(hero.x,hero.y,5,30);
ctx.fillRect(hero.x+15,hero.y,5,30);
ctx.fillRect(hero.x+6,hero.y+5,8,20);
//需要注意,画圆的时候需要重新开启路径
ctx.fillStyle = hero.color[1];
ctx.beginPath();
ctx.arc(hero.x+10,hero.y+15,3,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
//画出炮筒(直线)
ctx.strokeStyle = hero.color[1];
ctx.lineWidth = 2;
ctx.moveTo(hero.x+10,hero.y+15);
if(hero.direct==0){
ctx.lineTo(hero.x+10,hero.y);
}else if(hero.direct==2){
ctx.lineTo(hero.x+10,hero.y+30);
}
ctx.stroke();
break;
case 1:
case 3:
ctx.fillStyle = hero.color[0];
ctx.fillRect(hero.x,hero.y,30,5);
ctx.fillRect(hero.x,hero.y+15,30,5);
ctx.fillRect(hero.x+5,hero.y+6,20,8);
//需要注意,画圆的时候需要重新开启路径
ctx.fillStyle = hero.color[1];
ctx.beginPath();
ctx.arc(hero.x+15,hero.y+10,3,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
//画出炮筒(直线)
ctx.strokeStyle = hero.color[1];
ctx.lineWidth = 2;
ctx.moveTo(hero.x+15,hero.y+10);
if(hero.direct ==1){
ctx.lineTo(hero.x+30,hero.y+10);
}else if(hero.direct ==3){
ctx.lineTo(hero.x,hero.y+10);
}
ctx.stroke();
break;
}
}


//定义一个子弹类
function Bullet(x,y,direct){
this.x = x;
this.y = y;
this.speed = 3;
this.timer = null;
this.isLive = true;
this.direct = direct;
//这个函数是用来修改子弹的坐标
this.run = function(){
//alert('ok');
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;
}
//在这里判断一下,如果子弹超过边界,我就清除定时器
if(this.x <= 0 || this.x >=500 || this.y <=0 || this.y>= 300){
window.clearInterval(this.timer);
}
document.getElementById('aa').innerText = "子弹的x:"+this.x+"y:"+this.y;
}
}


function drawHeroBullet(bullets){
for(var i=0;i<bullets.length;i++){
var heroBullet = bullets[i];
if(heroBullet.isLive&&heroBullet!=null){
ctx.fillStyle = '#FEF26E';
ctx.fillRect(heroBullet.x,heroBullet.y,5,5);
}
}
}


//判断子弹是否击中敌人的坦克
function isHitEnemyTank(heroBullets,enemyTanks){
//循环出我们所有的子弹
for(var i=0;i<heroBullets.length;i++){
//再循环出敌人所有的坦克
for(var j=0;j<enemyTanks.length;j++){
if(enemyTanks[j].isLive){
switch(enemyTanks[j].direct){
case 0:
case 2:
if(heroBullets[i].x>=enemyTanks[j].x && heroBullets[i].x<= enemyTanks[j].x+20 && heroBullets[i].x>=enemyTanks[j].y&&heroBullets[i].y<=enemyTanks[j].y+30){
//标记一下敌人的坦克牺牲了
enemyTanks[j].isLive = false;
heroBullets[i].isLive = false;
//实例化炸弹
var bomb = new Bomb(enemyTanks[j].x,enemyTanks[j].y);
bombs.push(bomb);


}
break;
case 1:
case 3:
if(heroBullets[i].x>=enemyTanks[j].x&&heroBullets[i].x<=enemyTanks[j].x+30&&heroBullets[i].y>=enemyTanks[j].y&&heroBullets[i].y<=enemyTanks[j].y+20){
//标记敌人的坦克已死
//实例化炸弹
enemyTanks[j].isLive = false;
heroBullets[i].isLive = false;
heroBullets.splice(i,1);
//实例化炸弹
var bomb = new Bomb(enemyTanks[j].x,enemyTanks[j].y);
bombs.push(bomb);
}
break;
}
}
}
}
}


//炸弹类
function Bomb(x,y,direct){
this.x = x;
this.y = y;
this.direct = direct;
}