07-html5 game tank war 3 (tank mobile)

<! -- Let the browser point to an HTML webpage --> <! Doctype HTML> 
 
 
Tank. js
 
//////////////////////////////////////// /Create the Hreo class start ///////// // define a Hero class function hero (X, y, direct) {This. X = x; this. y = y; this. speed = 1; this. direct = direct; // 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 the Hreo class end /////////////////////////////////// /// // specify the start of the tank //////////// //////////// // encapsulate the drawn tank into a function drawtank (tank) {Switch (tank. direct) {Case 0: Case 2: // set the gear color cxt. fillstyle = "# ba9658"; // 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 = "# fef26e"; 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 = "# fef26e"; // 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 if (hero. direct = 0) {cxt. lineto (tank. X + 10, Tank. y);} else if (hero. direct = 2) {cxt. lineto (tank. X + 10, Tank. Y + 30);} cxt. closepath (); cxt. stroke (); break; Case 1: Case 3: // sets 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 (hero. direct = 1) {cxt. lineto (tank. X + 30, Tank. Y + 10);} else if (hero. direct = 3) {cxt. lineto (tank. x, Tank. Y + 10);} cxt. closepath (); cxt. stroke (); break ;}} /// // tank end //////////////////////////////////