Comments: In the previous article, I introduced how to use HTML5 to implement a small tank that can be moved. In this article, I will lead you to the tank war. Do not miss out on HTML5 friends.
The Code is as follows:
<Pre name = "code" class = "html"> tank.html </pre> <pre name = "code" class = "html"> <! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
</Head>
<Body onkeydown = "getCommand ();">
<H1> hmtl5-classic tank war <! -- Battlefield of tank wars -->
<Canvas id = "tankMap" width = "400px" height = "300px" style = "background-color: black"> </canvas>
<Span id = "aa"> data </span>
<! -- Introduce tankGames. js to this page -->
<Script type = "text/javascript" src = "tank. js"> </script>
<Script type = "text/javascript">
// Get the canvas
Var canvas1 = document. getElementById ("tankMap ");
// Get 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 );
// Define an empty bullet
Var heroBullet = null;
// Define the enemy's tanks (How many enemy tanks are there? Idea: is it a single definition or an array ?)
Var enemyTanks = new Array ();
// After death, set three instances. Then, we will change the number of enemy tanks to a variable.
// 0-> top, 1-> right, 2-> bottom 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 into an array
EnemyTanks [I] = enemyTank;
}
// Call it once first
FlashTankMap ();
// Write a function to regularly refresh the elements to appear in the theater (self-owned tanks, enemy tanks, bullets, bombs,
// Obstacle...)-> Game thoughts
Function flashTankMap (){
// Clear the canvas
Cxt. clearRect (0, 0, 400,300 );
// My tanks
DrawTank (hero );
// Draw your own bullets
// How is the bullet flying 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 ();
// Enemy tank
// Draw all enemy tanks
For (var I = 0; I <3; I ++ ){
DrawTank (enemyTanks [I]);
}
}
// This is a function that accepts user buttons.
Function getCommand (){
// How do I know what key the player presses?
// Indicates the event when the key is pressed ---> event object -----> event processing function ()
Var code = event. keyCode; // ascii code of the corresponding letter-> View the code table
Switch (code ){
Case 87: // top
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 ();
FlashTankMap ();
// Redraw all enemy tanks. You can write code here (thought, we just have a function dedicated to regularly refresh our canvas [for war zones])
}
// Refresh the theater once every 100 milliseconds
Window. setInterval ("flashTankMap ()", 100 );
</Script>
</Body>
</Html> </pre>
Tank. js
The Code is as follows:
<Pre> </pre>
<Pre name = "code" class = "html"> <pre name = "code" class = "javascript"> // 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.
// Bullet
Function Bullet (x, y, direct, speed ){
This. x = x;
This. y = y;
This. direct = direct;
This. speed = speed;
This. timer = null;
This. isLive = true;
This. run = function run (){
// When the coordinates of the bullet in this table are used, we first determine whether the bullet has reached the boundary.
If (this. x <= 0 | this. x> = 400 | this. y <= 0 | this. y >=300 ){
// Stop the bullet.
Window. clearInterval (this. timer );
// Bullet death
This. isLive = false;
} Else {
// The coordinates can be modified.
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. direct = direct;
// Two colors are required for a tank.
This. color = color;
// Move 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 indicates the horizontal coordinates of the tank, y indicates the vertical coordinates, and direct
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 );
// Add a function to kill enemy tanks.
This. shotEnemy = function (){
// Create a bullet. The position of the bullet should be related to hero and the direction of hero .!!!
// This. x is the abscissa of the current hero. Here we simply process (refine)
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: // right
HeroBullet = new Bullet (this. x, this. y + 9, this. direct, 1 );
Break;
}
// Call our bullet run. 50 is a conclusion obtained by the teacher for multiple tests.
Var timer = window. setInterval ("heroBullet. run ()", 50 );
// Assign this timer to this bullet (the js object is passed by reference !)
HeroBullet. timer = timer;
}
}
// Define an EnemyTank class
Function EnemyTank (x, y, direct, color ){
// The Tank can also be inherited through object impersonating.
This. tank = Tank;
This. tank (x, y, direct, color );
}
// Draw your own bullets. You can also encapsulate the function into the Hero class.
Function drawHeroBullet (){
// Here, we add a sentence, but you need to be sure to add it here.
If (heroBullet! = Null & heroBullet. isLive ){
Cxt. fillStyle = "# FEF26E ";
Cxt. fillRect (heroBullet. x, heroBullet. y, 2, 2 );
}
}
// Draw a tank
Function drawTank (tank ){
// Direction
Switch (tank. direct ){
Case 0: // top
Case 2: //
// Draw your own tank and use the drawing technology above
// Set the color
Cxt. fillStyle = tank. color [0];
// Master Han uses "first die" ---> later (this method is recommended for beginners)
// Draw a rectangle on the left
Cxt. fillRect (tank. x, tank. y, 5, 30 );
// Draw the rectangle on the right. (in this case, you need a reference point)
Cxt. fillRect (tank. x + 15, tank. y, 5, 30 );
// Draw the middle rectangle
Cxt. 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 line width
Cxt. 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 drawing technology above
// Set the color
Cxt. fillStyle = tank. color [0];
// Master Han uses "first die" ---> later (this method is recommended for beginners)
// Draw a rectangle on the left
Cxt. fillRect (tank. x, tank. y, 30,5 );
// Draw the rectangle on the right. (in this case, you need 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 + 0,360, true );
Cxt. fill ();
// Draw the barrel (straight line)
Cxt. strokeStyle = tank. color [1];
// Set the line width
Cxt. 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) {// left
Cxt. lineTo (tank. x, tank. y + 10 );
}
Cxt. closePath ();
Cxt. stroke ();
Break;
}
}
</Pre>
<Pre> </pre>
</Pre>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
