I am a beginner in html5 canvas and a beginner in html5canvas.

I am a beginner in html5 canvas and a beginner in html5canvas.

--- Restore content start ---

Pure html5 + css + js implementation

Running effect:

Functions:

Press the W, S, A, D, and J buttons respectively to control the movement of the tank up and down, and to launch bullets. Due to the limited level, you are still working hard ~ At present, we have only implemented control over the behavior of our tanks. We have drawn only one bullet and recorded the coordinates of the bullet.

Source code:

The source code is here ~, I only used two files, but I still hope to point out thank you ~~~~

Canvas.html

1 <! Doctype html> 2 
Canvas. js
1 // define two color arrays 2 var heroColor = new Array ("# ba9658", "# fef26e"); 3 var enemyColor = new Array ("#00a2b5 ", "#00 fefe"); 4 function Bullet (x, y, direct, speed) {5 this. x = x; 6 this. y = y; 7 this. speed = 1; 8 this. direct = direct; 9 this. timer = null; 10 this. isLive = true; 11 this. run = function run () {12 // first judge whether the bullet has reached the boundary 13 if (this. x <= 0 | this. x> = 400 | this. y <= 0 | this. y >=300) {14 window. cleaRInterval (this. timer); 15 // bullet death 16 this. isLive = false; 17} else {18 // modify coordinates 19 20 switch (this. direct) {21 case 0: 22 this. y-= this. speed; 23 break; 24 case 1: 25 this. x + = this. speed; 26 break; 27 case 2: 28 this. y + = this. speed; 29 break; 30 case 3: 31 this. x-= this. speed; 32 break; 33} 34} 35 document. getElementById ("aa "). innerText = "Bullet x =" + this. x + ", bullet y =" + this. y; 36} 37} 38 function Tank (x, y, direct, color) {39 this. x = x; 40 this. y = y; 41 this. speed = 1; 42 this. direct = direct; 43 // a tank requires two colors 44 this. color = color; 45 // move up 46 this. moveUp = function () {47 this. y-= this. speed; 48 this. direct = 0; 49} 50 this. moveRight = function () {51 this. x + = this. speed; 52 this. direct = 1; 53 54} 55 this. moveDown = function () {56 this. y + = this. speed; 57 this. direct = 2; 58 59} 60 this. moveLeft = function () {61 this. x-= this. speed; 62 this. direct = 3; 63 64} 65 66} 67 68 function Hero (x, y, direct, color) {69 // inherits 70 this by impersonating an object. tank = Tank; 71 this. tank (x, y, direct, color); 72 73 this. shotEnemy = function () {74 // create a bullet, location related to my tank 75 switch (this. direct) {76 case 0: 77 heroBullet = new Bullet (this. x + 9, this. y, this. direct, 1); 78 break; 79 case 1: 80 heroBullet = new Bullet (this. x + 30, this. y + 9, this. direct, 1); 81 break; 82 case 2: 83 heroBullet = new Bullet (this. x + 9, this. y + 30, This. direct, 1); 84 break; 85 case 3: 86 heroBullet = new Bullet (this. x, this. y + 9, this. direct, 1); 87 break; 88} 89 // call our bullet run (). The js object is referenced to pass 90 var timer = window. setInterval ("heroBullet. run () ", 50); 91 92} 93} 94 function EnemyTank (x, y, direct, color) {95 this. tank = Tank; 96 this. tank (x, y, direct, color); 97 98} 99 100 // draw bullet 101 function drawHeroBullet () {102 103 if (heroBullet! = Null & heroBullet. isLive) {104 ctx. fillStyle = "# fef26e"; 105 ctx. fillRect (heroBullet. x, heroBullet. y, 106); 107} 108} 109 function drawTank (tank) {110 111 // 112 switch (tank. direct) {113 case 0: // upper 114 case // var heroX = 30; 116 // var heroY = 230; 117 // refer to 118 ctx in the upper left corner of the tank. fillStyle = tank. color [0]; 119 ctx. fillRect (tank. x, tank. y, 5, 30); // The left rectangle is 120 ctx. fillRect (tank. x + 15, tank. y, 5, 30); // The rectangle on the right side is 121 ctx. fillRect (tank. x + 6, tank. y + 5, 8, 20); // The rectangle in the middle is 122 123 ctx. fillStyle = tank. color [1]; 124 ctx. arc (tank. x + 10, tank. y + 0,360, 125, false); ctx. fill (); 126 127 // draw the barrel 128 ctx. strokeStyle = tank. color [1]; 129 // set the line width to 130 ctx. lineWidth = 1.5; 131 ctx. maid (); 132 ctx. moveTo (tank. x + 10, tank. y + 15); 133 134 if (tank. direct = 0) {135 ctx. lineTo (tank. x + 10, tank. y); 136} else if (tank. direct = 2) {137 ctx. lineTo (tank. x + 10, tank. y + 30); 138 139} 140 ctx. closePath (); 141 ctx. stroke (); 142 break; 143 case // use the upper left corner of the tank as the reference point 146 ctx. fillStyle = tank. color [0]; 147 ctx. fillRect (tank. x, tank. y, 148); // The rectangle on the left is ctx. fillRect (tank. x, tank. y + 15, 30, 5); // The rectangle on the right side is 149 ctx. fillRect (tank. x + 5, tank. y + 6, 20, 8); // rectangular middle 150 // lid 151 ctx. fillStyle = tank. color [1]; 152 ctx. arc (tank. x + 15, tank. y + 0,360, 153, false); ctx. fill (); 154 155 // draw the barrel 156 ctx. strokeStyle = tank. color [1]; 157 // set the line width to 158 ctx. lineWidth = 1.5; 159 ctx. maid (); 160 ctx. moveTo (tank. x + 15, tank. y + 10); 161 162 if (tank. direct = 1) {163 ctx. lineTo (tank. x + 30, tank. y + 10); 164} else if (tank. direct = 3) {165 ctx. lineTo (tank. x, tank. y + 10); 166 167} 168 ctx. closePath (); 169 ctx. stroke (); 170 break; 171} 172}


 
--- Restore content end ---