Html 5 Tank Wars (Hanshunping version)

The HTML 5 Code section reads as follows:

<! DOCTYPE html>The JavaScript section code looks like this:
For programming convenience, we define two color array var herocolor=new array ("#BA9658", "#FEF26E"), var enmeycolor=new array ("#00A2B5", "#00FEFE");// Other enemy tanks, the extensibility here, is still good.//define a bomb class function Bomb (x, y) {this.x=x;this.y=y;this.islive=true;//Whether the bomb is alive, the default true;// The bomb has a health value this.blood=9;//minus the health value this.blooddown=function () {if (this.blood>0) {this.blood--;} else{//description of bomb death This.islive=false;}}} Bullet//type said: This bullet is the enemy, or their own//tank to indicate the object, indicating the bullet, belonging to which 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 () {///In the form of this bullet's coordinates, we first determine whether the bullet has reached the border//bullet does not advance, there are two logic, 1. Hit the border, 2. Hit the enemy tank. if (this.x<=0| | this.x>=400| | this.y<=0| | this.y>=300| | This.islive==false) {//bullets to stop. Window.clearinterval (This.timer);//Bullet Death This.islive=false;if (this.type== "enemy") { This.tank.bulletislive=false;}} else{//This can go to modify the coordinates 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= "Bullets x=" +this.x+ "Bullets y=" +THIS.Y;} This is a Tank class function Tank (X,y,direct,color) {this.x=x;this.y=y;this.speed=1;this.islive=true;this.direct=direct;/ /A tank that requires two colors. this.color=color;//up this.moveup=function () {this.y-=this.speed;this.direct=0;} Right this.moveright=function () {this.x+=this.speed;this.direct=1;} Move Down This.movedown=function () {this.y+=this.speed;this.direct=2;} Left This.moveleft=function () {this.x-=this.speed;this.direct=3;}} Define a Hero class//x represents the horizontal axis of the tank, Y is the ordinate, the direct direction function Hero (x,y,direct,color) {///The following two sentences the function is to pass the object impersonating, achieves the inheritance effect This.tank=tank; This.tank (X,y,direct,color);//Add a function to shoot the enemy tank. This.shotenemy=function () {//Create bullets, the position of the bullets should be related to the hero and the direction of the hero.!!! This.x is the horizontal axis of the current hero, where we simply handle (refine) 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://Right HeroBullet=new Bullet (this.x,this.y+9,this.direct,1, "Hero", this); Put this bullet object into the array---push function Herobullets.push (herobullet);//Call our bullet run, 50 is a teacher many times the test to get a conclusion. The technical difficulty is relatively large here./Even if you have worked for 1-2 years, You may not think, the following starting mode, each bullet timer is independent, if the original method//Then all bullets share a timer. var timer=window.setinterval ("herobullets[" + ( herobullets.length-1) + "].run ()", 50);//Assign this timer to this bullet (the JS object is a reference pass!) Herobullets[herobullets.length-1].timer=timer;}} Define a Enemytank class function Enemytank (X,y,direct,color) {//also inherit tankthis.tank=tank;this.count=0 through the object impersonation; This.bulletislive=true;this.tank (X,y,direct,color); this.run=function run () {//Determine the current direction of the enemy's tank switch (this.direct) { Case 0:if (this.y>0) {this.y-=this.speed;} Break;case 1:if (this.x+30<400) {this.x+=this.speed;} Break;case 2:if (this.y+30<300) {this.y+=this.speed;} Break;case 3:if (this.x>0) {this.x-=this.speed;} break;} Change direction, walk 30 times, then change direction if (this.count>30) {This.direct=math.round (Math.random ());//randomly generate 0,1,2,3this.count=0;} this.count++;//judge if the bullet has died, if death, then add a new bullet if (this.bulletislive==false) {//Add bullets, which is needed to consider the current enemy tank of the partyTo, in addition bullets 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://Right Etbullet=new Bullet (this.x,this.y+9,this.direct,1, "enemy", this); Add bullets to the enemy Bullet array Enemybullets.push (etbullet);//Start new Bullets Runvar mytimer=window.setinterval ("enemybullets[" + ( enemybullets.length-1) + "].run ()", "Enemybullets[enemybullets.length-1].timer=mytimer;this.bulletislive=true";}}} Draw your own bullets, say more, you can also encapsulate the function into the Hero class functions Drawherobullet () {//Now to draw all bullets for (Var i=0;iCode: http://download.csdn.net/detail/xunzaosiyecao/7847405


Html 5 Tank Wars (Hanshunping version)