HTML5之坦克大战游戏

tankGame.html

你的浏览器不支持canvas标签

tankGame.js

 //定义敌人和我们自己的坦克的颜色
 var enemyColor = new Array('#00FEFE','#00A2B5');
 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    var heroBullet = bullets[i];
   if(heroBullet.isLive&&heroBullet!=null){
    ctx.fillStyle = '#FEF26E';
    ctx.fillRect(heroBullet.x,heroBullet.y,2,2);
   }
  }
 }

 //判断子弹是否击中敌人的坦克
 function isHitEnemyTank(heroBullets,enemyTanks){
  //循环出我们所有的子弹
  for(var i=0;i    //再循环出敌人所有的坦克
   for(var j=0;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;
 }