Html 5 tank war (Han shunping Version)

Html 5 tank war (Han shunping Version)

The html 5 code is as follows:

 Hmtl5-classic tank wars
 
 Data
 <Script type = "text/javascript" src = "tankGame7.js"> </script> <script type = "text/javascript"> // obtain the canvas var canvas1 = document. getElementById ("tankMap"); // obtain the drawing context (you can understand it as a paint brush) var cxt = canvas1.getContext ("2d "); // my tank hero // direction var hero = new Hero (140,140, 0, heroColor); // defines the Array of bullets var heroBullets = new Array (); // define the enemy's tanks (How many enemy tanks are there? Idea: is it a single definition or an array ?) Var enemyTanks = new Array (); // defines the Array of enemy bullets var enemyBullets = new Array (); // defines a bomb Array (which can store many bombs ,) var bombs = new Array (); // after the first death, set three. Next we will change the number of enemy tanks to the variable // 0-> top, 1-> right, 2-> lower 3-> left for (var I = 0; I <3; I ++) {// create a tank var enemyTank = new EnemyTank (I + 1) * 50, 0, 2, enmeyColor); // put this tank in the array enemyTanks [I] = enemyTank; // start the enemy tank window. setInterval ("enemyTanks [" + I + "]. run () ", 50); // assign the Bullet var eb = new Bullet (enemyTanks [I] when creating the enemy tank. x + 9, enemyTanks [I]. y + 1.2, "enemy", enemyTanks [I]); enemyBullets [I] = eb; // start the var ettimer = window. setInterval ("enemyBullets [" + I + "]. run () ", 50); enemyBullets [I]. timer = ettimer;} // call flashTankMap () first; // write a function to regularly refresh the elements to appear in the theater (self-tank, enemy tank, bullet, bomb, // obstacle ...) -> game ideology function flashTankMap () {// clear the canvas cxt. clearRect (400,300,); // my tank drawTank (hero); // draw your own bullets // how does the bullet fly effect? [A: first, we should refresh the theater at a certain time (setInterval). If the bullet coordinates are changed during the refresh, the bullet is flying.] DrawHeroBullet (); // the enemy's tank // determine whether the enemy's tank hits isHitEnemyTank (); drawEnemyBomb (); drawEnemyBullet (); // draw all enemy tanks for (var I = 0; I <3; I ++) {drawTank (enemyTanks [I]);} // This is a function that accepts user keys. function getCommand () {// how do I know, what key is pressed by the player? // specifies the event after the key is pressed ---> event object -----> event processing function () var code = event. keyCode; // ascii code of the corresponding letter-> let's see the code table 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;} // trigger this function flashTankMap (); // re-draw all enemy tanks. you can write code here (thought, let's simply use some functions to regularly refresh our canvas [for war zones])} // refresh the window for war zones every 100 milliseconds. setInterval ("flashTankMap ()", 100); </script>

Some javascript code is as follows:

// For programming convenience, we define two color arrays var heroColor = new Array ("# BA9658", "# FEF26E"); var enmeyColor = new Array ("#00A2B5 ", "#00 FEFE"); // other enemy tanks. The scalability here is good. // define a Bomb function Bomb (x, y) {this. x = x; this. y = y; this. isLive = true; // whether the bomb is active. The default value is true. // The bomb has a life value. this. blood = 9; // this. bloodDown = function () {if (this. blood> 0) {this. blood --;} else {// indicates that the bomb died this. isLive = false ;}}// the bullet type // type indicates whether the bullet is an enemy or its own // tank indicates the object, indicating which tank the bullet belongs. 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 () {// when this table shows the coordinates of the bullet, we first determine whether the bullet has reached the boundary. // There are two Logics: 1. hitting a boundary, 2. hit the enemy tank. if (this. x <= 0 | this. x> = 400 | this. y <= 0 | this. y> = 300 | this. isLive = false) {// stop the bullet. window. clearInterval (this. timer); // this. isLive = false; if (this. type = "enemy") {this. tank. bu LletIsLive = false ;}} else {// you can modify the coordinate 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 = "Bullet x =" + this. x + "Bullet 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. Two colors are required. this. color = color; // top Move this. moveUp = function () {this. y-= this. speed; this. direct = 0;} // this. moveRight = function () {this. x + = this. speed; this. direct = 1;} // move this down. moveDown = function () {this. y + = this. speed; this. direct = 2;} // left this. moveLeft = function () {this. x-= this. speed; this. direct = 3 ;}/// defines a Hero class // x represents the horizontal coordinates of the tank, y represents the vertical coordinates, and direct direction function Hero (x, y, direct, color) {// The role of the following two sentences is to achieve inheritance through object impersonating. this. tank = Tank; this. tank (x, y, direct, color); // adds a function, Fire the enemy tank. this. shotEnemy = function () {// create a bullet. The position of the bullet should be related to hero and be related to hero's direction .!!! // This. x is the abscissa of the current hero. Here we simply process (refine) the 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); break;} // put this bullet object into the array-> push The heroBullets function. push (heroBullet); // call our bullet run. 50 is a conclusion obtained by the teacher for multiple tests ., it is technically difficult. // even if you have been working for 1-2 years, you may not think of the following startup method. The timer of each bullet is independent. If you follow the original method //, 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 passed by reference !) HeroBullets [heroBullets. length-1]. timer = timer;} // defines an EnemyTank class function EnemyTank (x, y, direct, color) {// inherits Tankthis by impersonating an object. tank = Tank; this. count = 0; 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 the direction 30 times, and then change the direction if (this. count> 30) {this. direct = Math. round (Math. random () * 3); // randomly generates 0, 1, 2, 3this. count = 0;} this. count ++; // determine whether the bullet has been killed. if it has been killed, add a new bullet if (this. bulletIsLive = false) {// Add a bullet. this is the direction of the current enemy tank. Add a bullet 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); break;} // Add the bullet to the array of enemy bullets. push (etBullet); // start the new bullet runvar mytimer = window. setInterval ("enemyBullets [" + (enemyBullets. length-1) + "]. run () ", 50); enemyBullets [enemyBullets. length-1]. timer = mytimer; this. bulletIsLive = true ;}}// draw your own bullet. You can also encapsulate this function into the Hero class function drawHeroBullet () {// now draw all bullets for (var I = 0; I
 
  
Post-live (this method is recommended for beginners) // draw a rectangle cxt on the left. fillRect (tank. x, tank. y, 5, 30); // draw the rectangle on the right (in this case, please train of thought-> be sure to have a reference point) cxt. fillRect (tank. x + 15, tank. y, 5, 30); // draw the cxt in the middle rectangle. fillRect (tank. x + 6, tank. y + 5, 8, 20); // draw the tank lid cxt. fillStyle = tank. color [1]; cxt. arc (tank. x + 10, tank. y + 15,4, 0,360, true); cxt. fill (); // draw the barrel (straight line) cxt. strokeStyle = tank. color [1]; // set the cxt width of the line. 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: // right and left case 3: // draw your own tank and use the preceding Drawing Technology // set the color cxt. fillStyle = tank. color [0]; // instructor Han uses "first die" ---> later (this method is recommended for beginners) // draw a rectangle cxt on the left. fillRect (tank. x, tank. y, 30, 5); // draw the rectangle on the right. (in this case, please think about it-> be sure to use a reference point.) cxt. fillRect (tank. x, tank. y + 15, 30, 5); // draw the middle rectangle cxt. fillRect (tank. x + 5, tank. y + 6, 20, 8); // draw the tank lid cxt. fillStyle = tank. color [1]; cxt. arc (tank. x + 15, tank. y + 10,4, 0,360, true); cxt. fill (); // draw the barrel (straight line) cxt. strokeStyle = tank. color [1]; // set the cxt width of the line. lineWidth = 1.5; cxt. beginPath (); cxt. moveTo (tank. x + 15, tank. y + 10); // right if (tank. direct = 1) {cxt. lineTo (tank. x + 30, tank. y + 10);} else if (tank. direct = 3) {// to the left cxt. lineTo (tank. x, tank. y + 10);} cxt. closePath (); cxt. stroke (); break ;}}// write a function to determine whether my bullet has hit an enemy tank function isHitEnemyTank () {// retrieve each bullet for (var I = 0; I
  
   
= EnemyTank. x & heroBullet. x <= enemyTank. x + 20 & heroBullet. y> = enemyTank. y & heroBullet. y <= enemyTank. y + 30) {// set isLive of the tank to false, which indicates the death of enemyTank. isLive = false; // The Bullet also kills heroBullet. isLive = false; // create a bomb var Bomb = new bomb (enemyTank. x, enemyTank. y); // then place the bomb into the bombs array. push (bomb);} break; case 1: // enemy tank to the right case 3: // enemy tank to the left if (heroBullet. x> = enemyTank. x & heroBullet. x <= enemyTank. x + 30 & heroBullet. y> = enemyTank. y & heroBullet. y <= enemyTank. y + 20) {// set isLive of the tank to false, which indicates the death of enemyTank. isLive = false; heroBullet. isLive = false; // create a bomb var Bomb = new bomb (enemyTank. x, enemyTank. y); // then place the bomb into the bombs array. push (bomb) ;}break ;}}// for }}// draw the enemy bomb function drawEnemyBomb () {for (var I = 0; I
   
    
6) {// display the largest bomb chart var img1 = new Image (); img1.src = "bomb_1.gif"; var x = bomb. x; var y = bomb. y; img1.onload = function () {cxt. drawImage (img1, x, y, 30,30) ;}} else if (bomb. blood> 3) {var img2 = new Image (); img2.src = "bomb_2.gif"; var x = bomb. x; var y = bomb. y; img2.onload = function () {cxt. drawImage (img2, x, y, 30, 30) ;}} else {var img3 = new Image (); img3.src = "bomb_3.gif"; var x = bomb. x; var y = bomb. y; img3.onload = function () {cxt. drawImage (img3, x , Y, 30,30) ;}/// reduce blood bomb. bloodDown (); if (bomb. blood <= 0) {// What should I do? Remove bombs. splice (I, 1) ;}}} from the array );}}}}
   
  
 

Code: http://download.csdn.net/detail/xunzaosiyecao/7847405