Html 5 坦克大战（韩顺平版本）

html 5代码部分如下：

hmtl5-经典的坦克大战


数据



	//得到画布
	var canvas1=document.getElementById("tankMap");
	//得到绘图上下文(你可以理解是画笔)
	var cxt=canvas1.getContext("2d");	
	//我的坦克 hero
	//方向 
	var hero=new Hero(140,140,0,heroColor);
	//定义子弹数组
	var heroBullets=new Array();
	//定义敌人的坦克(敌人的坦克有多少? 思路 : 是单个单个的定义，还是放在数组中?)
	var enemyTanks=new Array();
	//定义敌人子弹的数组
	var enemyBullets=new Array();
	//定义一个炸弹数组(可以存放很多炸弹,)
	var bombs=new Array();
	//先死后活 ，定3个，后面我们把敌人坦克的数量，作出变量
	//0->上, 1->右, 2->下 3->左
	for(var i=0;i游戏思想
	function flashTankMap(){	
		//把画布清理
		cxt.clearRect(0,0,400,300); 
		//我的坦克
		drawTank(hero);
		//画出自己的子弹
		//子弹飞效果是怎么出现的?[答 ： 首先我们应该每隔一定时间(setInterval)就去刷新作战区,如果在刷新的时候，子弹坐标变换了，给人的感觉就是子弹在飞!]
		drawHeroBullet();
		//敌人的坦克
		//判断一下敌人坦克是否击中
		isHitEnemyTank();
		drawEnemyBomb();
		drawEnemyBullet();		
		//画出所有敌人坦克
		for(var i=0;ievent对象----->事件处理函数()
		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;
		}		
		//触发这个函数 flashTankMap();
		flashTankMap();
		//重新绘制所有的敌人的坦克.你可以在这里写代码(思想,我们干脆些一个函数，专门用于定时刷新我们的画布[作战区])
	}	
	//每隔100毫秒去刷新一次作战区
	window.setInterval("flashTankMap()",100);

javascript部分代码如下：

//为了编程方便，我们定义两个颜色数组
var heroColor=new Array("#BA9658","#FEF26E");
var enmeyColor=new Array("#00A2B5","#00FEFE");
//其它的敌人坦克，这里的扩展性，还是不错的.
//定义一个炸弹类
function Bomb(x,y){
	this.x=x;
	this.y=y;
	this.isLive=true; //炸弹是否活的，默认true;
	//炸弹有一个生命值
	this.blood=9;
	//减生命值
	this.bloodDown=function(){
		if(this.blood>0){
			this.blood--;
		}else{
			//说明炸弹死亡
			this.isLive=false;
		}
	}
}


//子弹类
//type表示：这颗子弹是敌人的，还是自己的
//tank表示对象，说明这颗子弹，属于哪个坦克.
function Bullet(x,y,direct,speed,type,tank){
	this.x=x;
	this.y=y;
	this.direct=direct;
	this.speed=speed;
	this.timer=null;
	this.isLive=true;
	this.type=type;
	this.tank=tank;
	this.run=function run(){
		
			//在该表这个子弹的坐标时，我们先判断子弹是否已经到边界
			//子弹不前进，有两个逻辑，1.碰到边界，2. 碰到敌人坦克.
			if(this.x=400||this.y=300||this.isLive==false){
				//子弹要停止.
				window.clearInterval(this.timer);
				//子弹死亡
				this.isLive=false;

				if(this.type=="enemy"){
						this.tank.bulletIsLive=false;
				}
			}else{
				//这个可以去修改坐标
				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;
	}
}

//这是一个Tank类
function Tank(x,y,direct,color){
	
		this.x=x;
		this.y=y;
		this.speed=1;
		this.isLive=true;
		this.direct=direct;
		//一个坦克，需要两个颜色.
		this.color=color;
		//上移
		this.moveUp=function(){
			this.y-=this.speed;
			this.direct=0;
		}
		//向右
		this.moveRight=function(){
			this.x+=this.speed;
			this.direct=1;
		}

		//下移
		this.moveDown=function(){
			this.y+=this.speed;
			this.direct=2;
		}
		//左
		this.moveLeft=function(){
			this.x-=this.speed;
			this.direct=3;
		}
}

//定义一个Hero类
	//x 表示坦克的 横坐标, y 表示纵坐标, direct 方向	
	function Hero(x,y,direct,color){
	
		//下面两句话的作用是通过对象冒充，达到继承的效果
		this.tank=Tank;
		this.tank(x,y,direct,color);

		//增加一个函数，射击敌人坦克.
		this.shotEnemy=function(){
			
			//创建子弹, 子弹的位置应该和hero有关系，并且和hero的方向有关.!!!
			//this.x 就是当前hero的横坐标,这里我们简单的处理(细化)

			switch(this.direct){
				case 0:
				heroBullet=new Bullet(this.x+9,this.y,this.direct,1,"hero",this);
				break;
				case 1:
				heroBullet=new Bullet(this.x+30,this.y+9,this.direct,1,"hero",this);
				break;
				case 2:
				heroBullet=new Bullet(this.x+9,this.y+30,this.direct,1,"hero",this);
				break;
				case 3: //右
				heroBullet=new Bullet(this.x,this.y+9,this.direct,1,"hero",this);
				break;
			}

			//把这个子弹对象放入到数组中	 -> push函数
			heroBullets.push(heroBullet);
			//调用我们的子弹run, 50 是老师多次测试得到的一个结论., 这里技术难度比较大.
			//就算你工作过1-2年，你也未必想到, 下面启动方式，每个子弹的定时器是独立,如果按原来的方法
			//则所有子弹共享一个定时器.
			var timer=window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);
			//把这个timer赋给这个子弹(js对象是引用传递!)
			heroBullets[heroBullets.length-1].timer=timer;

		}



	}

	//定义一个EnemyTank类
	function EnemyTank (x,y,direct,color){
		
		//也通过对象冒充，来继承Tank
		this.tank=Tank;
		this.count=0;
		this.bulletIsLive=true;
		
		this.tank(x,y,direct,color);

		this.run=function run(){
			
			//判断敌人的坦克当前方向
			switch(this.direct){
				
				case 0:
					if(this.y>0){
						this.y-=this.speed;
					}	
					break;
				case 1:
					if(this.x+3030){
				this.direct=Math.round(Math.random()*3);//随机生成 0,1,2,3
				this.count=0;
			}
			this.count++;

			//判断子弹是否已经死亡，如果死亡，则增加新的一颗子弹
			if(this.bulletIsLive==false){
				//增子弹,这是需要考虑当前这个敌人坦克的方向，在增加子弹
					switch(this.direct){
						case 0:
						etBullet=new Bullet(this.x+9,this.y,this.direct,1,"enemy",this);
						break;
						case 1:
						etBullet=new Bullet(this.x+30,this.y+9,this.direct,1,"enemy",this);
						break;
						case 2:
						etBullet=new Bullet(this.x+9,this.y+30,this.direct,1,"enemy",this);
						break;
						case 3: //右
						etBullet=new Bullet(this.x,this.y+9,this.direct,1,"enemy",this);
						break;
				}

				//把子弹添加到敌人子弹数组中
				enemyBullets.push(etBullet);
				//启动新子弹run
				var mytimer=window.setInterval("enemyBullets["+(enemyBullets.length-1)+"].run()",50);
				enemyBullets[enemyBullets.length-1].timer=mytimer;

				this.bulletIsLive=true;
			}

		}
	}

		//画出自己的子弹,多说一句，你也可以把该函数封装到Hero类中
		function drawHeroBullet(){

				//现在要画出所有子弹
				for( var i=0;i一定要一个参照点)
				cxt.fillRect(tank.x+15,tank.y,5,30);
				//画出中间矩形
				cxt.fillRect(tank.x+6,tank.y+5,8,20);
				//画出坦克的盖子
				cxt.fillStyle=tank.color[1];
				cxt.arc(tank.x+10,tank.y+15,4,0,360,true);
				cxt.fill();
				//画出炮筒(直线)
				cxt.strokeStyle=tank.color[1];
				//设置线条的宽度
				cxt.lineWidth=1.5;
				cxt.beginPath();
				cxt.moveTo(tank.x+10,tank.y+15);
				
				if(tank.direct==0){
				cxt.lineTo(tank.x+10,tank.y);
				}else if(tank.direct==2){
				cxt.lineTo(tank.x+10,tank.y+30);
				}

				cxt.closePath();
				cxt.stroke();
				break;
			case 1: //右和左
			case 3:
				//画出自己的坦克，使用前面的绘图技术
				//设置颜色
				cxt.fillStyle=tank.color[0];
				//韩老师使用 先死--->后活 (初学者最好用这个方法)
				//先画出左面的矩形
				cxt.fillRect(tank.x,tank.y,30,5);
				//画出右边的矩形(这时请大家思路->一定要一个参照点)
				cxt.fillRect(tank.x,tank.y+15,30,5);
				//画出中间矩形
				cxt.fillRect(tank.x+5,tank.y+6,20,8);
				//画出坦克的盖子
				cxt.fillStyle=tank.color[1];
				cxt.arc(tank.x+15,tank.y+10,4,0,360,true);
				cxt.fill();
				//画出炮筒(直线)
				cxt.strokeStyle=tank.color[1];
				//设置线条的宽度
				cxt.lineWidth=1.5;
				cxt.beginPath();
				cxt.moveTo(tank.x+15,tank.y+10);
				//向右
				if(tank.direct==1){
				cxt.lineTo(tank.x+30,tank.y+10);
				}else if(tank.direct==3){ //向左
				cxt.lineTo(tank.x,tank.y+10);
				}

				cxt.closePath();
				cxt.stroke();
				break;

			}
		}
	}

//编写一个函数，专门用于判断我的子弹，是否击中了某个敌人坦克
function isHitEnemyTank(){
	
		//取出每颗子弹
		for(var i=0;i