温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

html5代码 坦克大战

发布时间:2020-07-15 09:14:09 来源:网络 阅读:470 作者:SGS0635 栏目:移动开发

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

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


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


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


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


五、不可以超出边界,击中敌人坦克  坦克爆炸 ×××消失


html代码:


<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8'/>

<script src='tankGame3.js'></script>

</head>

<body onkeydown="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;

           }

           }

       }

   }


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI