HTML5制作的坦克游戏 本游戏是基于HTML5开发的 网页游戏,js,css辅助开发
源码如下:
坦克大战坦克大战(请使用IE浏览器)
>
友情提示: 控制:W S A D J(发炮) 1复活 2增加敌人坦克
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
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);
效果图: