大佬教程收集整理的这篇文章主要介绍了HTML5制作的坦克游戏，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
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,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,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,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制作的坦克游戏所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。