HTML5坦克大战-网页小游戏

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>HTML5坦克大战</title>
<script>
 //定义敌方和自己坦克的颜色
 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:
    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;
    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 = '#00FEFE';
    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;
   }
   }
  }
 }
</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;
  //alert(keycode);
  switch(keycode){
   case 38:
   hero.moveUp();
   break;
   case 39:
   hero.moveRight();
   break;
   case 40:
   hero.moveBottom();
   break;
   case 37:
   hero.moveLeft();
   break;
   case 32:
   hero.shotEnemy();
   break;
  }
   flashMap();
 }
 window.setInterval("flashMap()",100);
</script>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

HTML5坦克大战-网页小游戏

分类

游戏

描述

HTML5写网页游戏那是相当牛叉了，几乎不用什么图片修饰，只要水平够高，用HTML5写大型网页游戏肯定是主游戏。这个坦克大战游戏虽然简单，但可以为你编写HTML5游戏提供一些思路和参考，游戏实现了攻击、角色移动、子弹判断等众多逻辑，还...