HTML5制作的坦克游戏

                                     HTML5制作的坦克游戏
          本游戏是基于HTML5开发的 网页游戏，js,css辅助开发
     [查看详情](http://www.myzblog.cn:8080/blog/articles/19.html)

源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>坦克大战</title>

</head>
<body onkeydown="getCommand();">
<h3>坦克大战(请使用IE浏览器)</h3>
<canvas id="tankMap" width="600px" height="500px"
style="background-color:black"></canvas>
<br/>
<span id="bb" text-align:center>友情提示: 控制:W S A D J(发炮) 1复活 2增加敌人坦克</span>
<script type="text/javascript" src="Mytank9.js"></script>
<script type="text/javascript">

var canvas1=document.getElementById("tankMap");

var cxt=canvas1.getContext("2d");

var hero=new Hero(240,300,0,heroColor);

var heroBullets=new Array();

var bombs=new Array();

var enemyBullets=new Array();

var enemyTanks=new Array(); //定义一个空的数组
for(var i=0;i<6;i++){
//创建一辆坦克
var enemyTank=new EnemTank((i+1)*70,30,2,enemyColor);
//将坦克放入数组
enemyTanks[i]=enemyTank;
//启动敌人的坦克(相当于启动线程)
window.setInterval("enemyTanks["+i+"].run()","50");

 //当创建敌人坦克时就分配×××
var eb=new Bullet(enemyTanks[i].x+19,enemyTanks[i].y+60,2,5,"enemy",enemyTanks[i]);
enemyBullets[i]=eb;
//启动该×××
var ettimer=window.setInterval("enemyBullets["+i+"].run()",50);
enemyBullets[i].timer=ettimer;

}//for 创建敌人的坦克和×××等
//先调用一次刷新函数
flashTankMap();
//专门用于定时刷新画布的函数(把作战区出现的元素刷新自己坦克)
//敌人的坦克 ××× ××× 障碍物草坪
function flashTankMap(){
//清理画布
cxt.clearRect(0,0,600,500);

  if(hero.isLive==true){
      //我的坦克hero  
      drawTank(hero);
  }else{
      hero.x=-100;
      hero.y=-100;
  }

  //画出我的×××
  drawHeroBullet();

  //我的×××射击函数  
  isHitEenemyTank();

  //画出爆炸效果
  drawEnemyBomb();

  //敌人坦克射击我的函数
  isHitHeroTank();

  //画出敌人的坦克
  for(var i=0;i<enemyTanks.length;i++){ 
    drawTank(enemyTanks[i]);
 }
 //画出敌人坦克的×××
 drawEnemyBullet();

}

//接收用户按键的函数
function getCommand(){
var code=event.keyCode; //对应的ascii码
switch(code){
case 87: //上
hero.moveUp();
break;
case 68: //右
hero.moveRight();
break;
case 83: //下
hero.moveDown();
break;
case 65: //左
hero.moveLeft();
break;
case 74:
hero.shotEnemy();
break;
case 49: //按1复活我的坦克
hero.isLive=true;
hero.x=240;
hero.y=300;
break;
case 50: //按2增加敌人的坦克
FoundEnemyTank(enemyTanks.length);
break;
}

//触发刷新作战区的函数
flashTankMap();

}
//每隔200毫秒刷新作战区
window.setInterval("flashTankMap();",200);
</script>
</body>
</html>

效果图：

HTML5制作的坦克游戏

HTML5制作的坦克游戏

猜你喜欢