比较完善的用HTML5做的坦克大战代码

最新推荐文章于 2024-01-02 14:56:51 发布

温建江

最新推荐文章于 2024-01-02 14:56:51 发布

阅读量7.7k

点赞数 4

分类专栏： HTML5 文章标签： HTML5 坦克大战 canvas

本文链接：https://blog.csdn.net/feilong_1212/article/details/9137733

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

此HTML5所做坦克的坦克大战的功能比较齐全而且都是用HTML5画出来的坦克和炮弹

一、自己的坦克能上下左右移动按wsad 这是上下左右键

二、自己的坦克可以发射多颗炮弹连续发射炮弹

三、画出敌人的三个坦克而且可以向四个方向随机移动发射炮弹

四、自己的坦克可以击中敌人的坦克敌人也可以击中自己的

五、不可以超出边界，击中敌人坦克坦克爆炸子弹消失

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<script src='tankGame3.js'></script>
</head>
<body οnkeydοwn="changeDirect()">
<canvas id='tankMap' width='500px' height='300px' style='background-color:black'>
你的浏览器不支持canvas标签</canvas>
<span id='aa'></span>
</body>
<script>
   //开始画出我们的tanke
   var canvas = document.getElementById('tankMap');
   //相当于获得画笔
   var ctx = canvas.getContext('2d');
   //定义炸弹
   var bombs = new Array();
   var hero = new Hero(140,90,0,heroColor);
   var enemyTanks = new Array();
   //敌人的子弹数组
   var enemyBullets = new Array();
   for(var i=0;i<3;i++){
       var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor);
       enemyTanks[i] = enemyTank;
       //drawTank(enemyTanks[i]);
       //让敌人的坦克动起来
       var timer = window.setInterval("enemyTanks["+i+"].run()",50);
       enemyTanks[i].timer = timer;
       //让敌人发射子弹
       var enemyBullet = new Bullet(enemyTanks[i].x+9,enemyTanks[i].y+30,enemyTanks[i].direct,enemyTanks[i],'enemy');
       enemyBullets.push(enemyBullet);
       enemyBullets[i].timer = window.setInterval("enemyBullets["+i+"].run()",50);
   }
   //定义子弹数组
   var heroBullets = new Array();
   var heroBullet = null;

   if(hero.isLive){
           drawTank(hero);
       }

   flashMap();
   function flashMap(){
       ctx.clearRect(0,0,500,300);
       isHitHeroTank(enemyBullets,hero);
       if(hero.isLive){
           drawTank(hero);
       }

       isHitEnemyTank(heroBullets,enemyTanks);
       //画出自己坦克的子弹
       drawHeroBullet(heroBullets);
       //画出敌人坦克的子弹
       drawEnemyBullet(enemyBullets,enemyTanks);
       for(var i=0;i<3;i++){
           if(enemyTanks[i].isLive){
               drawTank(enemyTanks[i]);
           }
       }

       //画出炸弹
       for(var k=0;k<bombs.length;k++){
           var img = new Image();
           img.src = 'bomb_1.gif';
           var x = bombs[k].x;
           var y = bombs[k].y;
           ctx.drawImage(img,x,y,30,30);
           bombs.splice(k,1);
       }
   }

   function changeDirect(){
       var keycode = event.keyCode;
       switch(keycode){
           case 87:
           hero.moveUp();
           break;
           case 68:
           hero.moveRight();
           break;
           case 83:
           hero.moveBottom();
           break;
           case 65:
           hero.moveLeft();
           break;
           case 74:
           hero.shotEnemy();
           break;
       }
           flashMap();
   }
   window.setInterval("flashMap()",100);
</script>
</html>

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(){
           hero.y -= hero.speed;
           hero.direct = 0;
       }
       this.moveRight = function(){
           hero.x += hero.speed;
           hero.direct = 1;
       }
       this.moveBottom = function(){
           hero.y += hero.speed;
           hero.direct = 2;
       }
       this.moveLeft = function(){
           hero.x -= hero.speed;
           hero.direct = 3;
       }
   }

   //英雄坦克类
   function Hero(x,y,direct,color){
       //将坦克类的构造方法赋给hero
       this.hero = Tank;
       //调用,拥有坦克类的所有的属性和方法
       this.hero(x,y,direct);
       this.color = color;
       this.direct = direct;
       this.isLive = true;
       this.shotEnemy = function(){
           switch(this.direct){
               case 0:
                   heroBullet = new Bullet(this.x+9,this.y,this.direct);
               break;
               case 1:
                   heroBullet = new Bullet(this.x+30,this.y+9,this.direct);
               break;
               case 2:
                   heroBullet = new Bullet(this.x+9,this.y+30,this.direct);
               break;
               case 3:
                   heroBullet = new Bullet(this.x,this.y+9,this.direct);
               break;
           }
           heroBullets.push(heroBullet);
           heroBullets[heroBullets.length-1].timer = window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);
       }
   }
   //敌人的坦克
   function EnemyTank(x,y,direct,color){
       //将坦克类的构造方法赋给hero
       this.enemyTank = Tank;
       //调用,拥有坦克类的所有的属性和方法
       this.enemyTank(x,y,direct);
       this.color = color;
       this.isLive = true;
       this.timer = null;
       this.speed = 1;
       this.count = 0;
       this.direct = direct;
       this.bulletIsLive = true;
       this.run = function(){
           switch(this.direct){
               case 0:
                   if(this.y>0){
                   this.y--;
               }
               break;
               case 1:
                   if(this.x+30<500){
                   this.x += this.speed;
               }
               break;
               case 2:
                   if(this.y+30<300){
                   this.y += this.speed;
               }
               break;
               case 3:
                   if(this.x>0){
                   this.x -= this.speed;
               }
               break;
           }

           if(this.count>=30){
               this.direct = Math.round(Math.random()*3);
               this.count=0;
           }
           this.count++;
           //在坦克走的过程中,判断一下,这个坦克的子弹是否活着
           if(this.bulletIsLive == false && this.isLive){
               //子弹已死,给他补充一颗
               switch(this.direct){
                   case 0:
                       enemyBullets.push(new Bullet(this.x+9,this.y,this.direct,this,'enemy'));
                   break;
                   case 1:
                       enemyBullets.push(new Bullet(this.x+30,this.y+9,this.direct,this,'enemy'));
                   break;
                   case 2:
                       enemyBullets.push(new Bullet(this.x+9,this.y+30,this.direct,this,'enemy'));
                   break;
                   case 3:
                       enemyBullets.push(new Bullet(this.x,this.y+9,this.direct,this,'enemy'));
                   break;
               }
               enemyBullets[enemyBullets.length-1].timer = window.setInterval("enemyBullets["+(enemyBullets.length-1)+"].run()",50);
                   this.bulletIsLive = 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,tank,type){
       this.x = x;
       this.y = y;
       this.speed = 3;
       this.direct = direct;
       this.timer = null;
       this.isLive = true;
       this.tank = tank;
       this.type = type;
       this.run = function(){
           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;
           if(this.x <0 || this.x>=500 ||this.y<0 || this.y>300 ||this.isLive==false){
               this.isLive = false;
               //this.tank.bulletIsLive = false;
               if(this.type=='enemy'){
                   this.tank.bulletIsLive = false;
               }
               window.clearInterval(this.timer);
           }
       }
   }
   function drawHeroBullet(bullets){
       for(var i=0;i<bullets.length;i++){
           var heroBullet = bullets[i];
           if(heroBullet.isLive){
               ctx.fillStyle = '#FEF26E';
               ctx.fillRect(heroBullet.x,heroBullet.y,2,2);
           }
       }
   }
   //画出敌人坦克的子弹
   function drawEnemyBullet(enemyBullets){
       for(var i=0;i<enemyBullets.length;i++){
           var enemyBullet = enemyBullets[i];
           if(enemyBullet.isLive){
               ctx.fillRect(enemyBullet.x,enemyBullet.y,2,2);
           }
       }
   }
   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].y>=enemyTanks[j].y&&heroBullets[i].y<=enemyTanks[j].y+30){
                           //标记敌人的坦克和我们的子弹已经死掉了
                           heroBullets[i].isLive = false;
                           enemyTanks[j].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){
                           //标记敌人的坦克和我们的子弹已经死掉了
                           heroBullets[i].isLive = false;
                           enemyTanks[j].isLive = false;
                           var bomb = new Bomb(enemyTanks[j].x,enemyTanks[j].y);
                           bombs.push(bomb);
                   }
                   break;
               }
               }

           }
       }
   }

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

   //判断敌人的子弹是否击中自己的坦克
   function isHitHeroTank(enemyBullets,heroTank){
       for(var i=0;i<enemyBullets.length;i++){
           if(enemyBullets[i].isLive && heroTank.isLive){
               switch(heroTank.direct){
               case 0:
               case 2:
                   if(enemyBullets[i].x >= heroTank.x && enemyBullets[i].x <= heroTank.x+20 && enemyBullets[i].y >= heroTank.y && enemyBullets[i].y <= heroTank.y +30){
                   heroTank.isLive = false;
                   enemyBullets[i].isLive = false;
               }
               break;
               case 1:
               case 3:
                   if(enemyBullets[i].x >= heroTank.x && enemyBullets[i].x <= heroTank.x+30 && enemyBullets[i].y >= heroTank.y && enemyBullets[i].y <= heroTank.y +20){
                   heroTank.isLive = false;
                   enemyBullets[i].isLive = false;
               }
               break;
           }
           }
       }
   }