HTML5制作的坦克游戏
本游戏是基于HTML5开发的 网页游戏，js,css辅助开发
源码如下：
<!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>
效果图：
原文地址：http://blog.51cto.com/13902593/2153933