-HTML5 game tank war 5 (your tank can launch a single bullet)

Tank. js

//////////////////////////////////////// /Define the color of the Tank Class. // var herocolor = new array ("# ba9658 ", "# fef26e"); var enemycolor = new array ("#00a2b5", "#00 Fefe "); //////////////////////////////////////// /define the color of the Tank Class ////////////////////////////////// //// // create a bullet class //////// //// // function bullet (X, y, direct, speed) {This. X = x; this. y = y; this. direct = direct; // bullets To this. speed = speed; // bullet speed this. timer = NULL; // whether to activate this by refreshing the bullet continuously. islive = true; // This function that constantly modifies coordinates. run = function run () {// when modifying the coordinates of a bullet, first judge whether the bullet has reached the boundary. If (this. x <= 0 | this. x> = 400 | this. Y <= 0 | this. y> = 300) {// The Bullet stops the window. setinterval (this. timer); // This. islive = false;} else {// modify the coordinate switch (this. direct) {Case 0: This. y-= speed; break; Case 1: This. X + = speed; break; Case 2: This. Y + = speed; break; Case 3: This. x-= speed; break;} document. getelementbyid ("AA "). innertext = "x =" + this. X + "Y =" + this. Y ;}};} /////////////////////////////////// ///// Create the bullet class end ////////////////////////////// /// // start the Tank Class Creation //// /////////////// define a tank function tank (X, y, direct, color) {This. X = x; this. y = y; this. speed = 1; this. direct = direct; this. color = color; // encapsulate a mobile tank as a function this. moveup = function () {This. y-= This. speed; this. direct = 0; // up}; this. moveright = function () {This. X + = This. speed; this. direct = 1; // turn right}; this. movedown = Function () {This. Y + = This. speed; this. direct = 2; // go down}; this. moveleft = function () {This. x-= This. speed; this. direct = 3; // turn left };} //////////////////////////////////////// /create a tank class and end it /////////////////////////////////// /// // start with the Hero class creation ///////// //// // function hero (X, y, direct, color) {// impersonate an object to achieve the inheritance effect. This. tank = tank; // run this. tank (X, Y, direct, color); // adds a function to kill enemies. This. shotenemy = function () {// switch (this. direct) {Case 0: herobullet = new bullet (this. X + 9, this. y, this. direct, 1); break; Case 1: herobullet = new bullet (this. X + 30, this. Y + 9, this. direct, 1); break; Case 2: herobullet = new bullet (this. X + 9, this. Y + 30, this. direct, 1); break; Case 3: herobullet = new bullet (this. x, this. Y + 9, this. direct, 1); break;} // call this method to constantly change the coordinates of the bullet window. setinte Rval ("herobullet. run () ", 50 );};} //////////////////////////////////////// /create Hero class end /////////////////////////////////// /// // start with the enemy class ///////// //// // function enemytank (X, y, direct, color) {// impersonate an object to achieve the inheritance effect. This. tank = tank; // run this. tank (X, Y, direct, color );} //////////////////////////////////////// /create an enemy class /////////////////////////////////// ///////////////////// //// Draw the bullet start ///////////////////////////////// /function drawherobullet () {// determine whether a bullet is created and solves the problem that the bullet cannot disappear when it reaches the edge. If (herobullet! = NULL & herobullet. islive = true) {cxt. fillstyle = "# fef26e"; cxt. fillrect (herobullet. x, herobullet. y, 2, 2 );}} /// // bullet end ////////////////////////////////////// /// // draw the tank to start // /// // encapsulate the drawn tank into function drawtank (tank) {// switch (tank. direct) {Case 0: // upper case 2: // lower // set the gear color cxt. fillstyle = tank. color [0]; // draw the left-side cxt. fillrect (tank. x, Tank. y, 5, 30); // draw the cxt rectangle on the right. 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 // set the color of the barrel 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); // determine the direction of the barrel. 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 case 3: // left // set the gear color cxt. fillstyle = "# ba9658"; // draw the left-side cxt. fillrect (tank. x, Tank. y, 30, 5); // draw the cxt rectangle on the right. 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 = "# fef26e"; cxt. ARC (tank. X + 15, Tank. Y + 10, 4, 0,360, true); cxt. fill (); // draw the barrel // set the color of the barrel cxt. strokestyle = "# fef26e"; // set the cxt width of the line. linewidth = 1.5; cxt. beginpath (); cxt. moveTo (tank. X + 15, Tank. Y + 10); // determine the direction of the barrel 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 ;}} /// // tank end //////////////////////////////////

 

<! -- Let the browser point to an HTML webpage --> <! Doctype HTML>