Comment: In the previous article, I introduced how to use HTML5 to implement a mobile small tank. In this article, I will lead you into the tank war. Friends who like HTML5 should not miss it.
<pre>tank.html</pre><pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body onkeydown="getCommand();">
<h1>hmtl5-Classic Tank War</h1>
<!--The battlefield of tank war-->
<canvas></canvas>
<span>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 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 tank (how many enemy tanks are there? Is it a single definition or put in an array?)
var enemyTanks=new Array();
//Die first and then live, set 3, and then we will make variables for the number of enemy tanks.
//0->upper, 1->right, 2->down 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
flashTankMap();
//Writing a special function to refresh our combat zone regularly and to include elements to appear in the combat zone (own tanks, enemy tanks, bullets, bombs,
//obstructions...)->Game Thought
function flashTankMap(){
//Cleaning the canvas
cxt.clearRect(0,0,400,300);
//My tank
drawTank(hero);
//Draw your own bullet
//How does the bullet flight effect appear? [Answer: First of all, we should refresh the combat zone every certain time (setInterval). If the bullet coordinates change when refreshing, the bullet coordinates give people the feeling that 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 keystrokes
function getCommand(){
//How do I know what key the player presses
//Instructions: Event object------->event handler function()
var code=event.keyCode;//Ascii code for the corresponding letters->Let's look at the code table
switch(code){
case 87://on
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();
//Repaint all enemy tanks. You can write code here (think, let's just have a function dedicated to refresh our canvas regularly [War Zone])
}
//Refresh the combat zone every 100 milliseconds
window.setInterval("flashTankMap()",100);
</script>
</body>
</html></pre>
tank.js
<pre></pre>
<pre><pre>//For programming convenience, we define two color arrays
var heroColor=new Array("#BA9658","#FEF26E");
var enmeyColor=new Array("#00A2B5","#00FEFE");
//The expansion of other enemy tanks here is quite good.
//Bullets
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 this bullet are shown, we first determine whether the bullet has reached the boundary
if(this.x<=0||this.x>=400||this.y<=0||this.y>=300){
//The bullets need to stop.
window.clearInterval(this.timer);
//The bullet died
this.isLive=false;
}else{
//This can be used to modify the coordinates
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;
//A tank requires two colors.
this.color=color;
//Move up
this.moveUp=function(){
this.y-=this.speed;
this.direct=0;
}
//To the 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 represents the horizontal coordinate of the tank, y represents the vertical coordinate, direct direction
function Hero(x,y,direct,color){
//The purpose of the following two sentences is to achieve the effect of inheritance through impersonation of objects
this.tank=Tank;
this.tank(x,y,direct,color);
//Add a function to shoot 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 horizontal coordinate of the current hero. Here we will 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;
}
//Calling our bullet run, 50 is a conclusion obtained by the teacher's multiple tests.
var timer=window.setInterval("heroBullet.run()",50);
// Assign this timer to this bullet (js object is reference pass!)
heroBullet.timer=timer;
}
}
//Define an EnemyTank class
function EnemyTank (x,y,direct,color){
//Inherit Tank by impersonating an object
this.tank=Tank;
this.tank(x,y,direct,color);
}
//Draw your own bullet and say one more thing, you can also encapsulate the function into the Hero class
function drawHeroBullet(){
// Here, we added a sentence, but you need to know that adding here requires you to be sure of the entire program
if(heroBullet!=null&&heroBullet.isLive){
cxt.fillStyle="#FEF26E";
cxt.fillRect(heroBullet.x,heroBullet.y,2,2);
}
}
//Draw the tank
function drawTank(tank){
//Consider the direction
switch(tank.direct){
case 0: //On
case 2:// down
//Draw your own tank and use the previous drawing technique
//Set the color
cxt.fillStyle=tank.color[0];
//Teacher Han uses death first---> and then live (it is best for beginners)
//Draw the rectangle on the left first
cxt.fillRect(tank.x,tank.y,5,30);
//Draw the rectangle on the right (please think about it at this time -> be sure to have 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 cover
cxt.fillStyle=tank.color[1];
cxt.arc(tank.x+10,tank.y+15,4,0,360,true);
cxt.fill();
//Draw the cannon (straight line)
cxt.strokeStyle=tank.color[1];
//Set the width of the line
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 previous drawing technique
//Set the color
cxt.fillStyle=tank.color[0];
//Teacher Han uses death first---> and then live (it is best for beginners)
//Draw the rectangle on the left first
cxt.fillRect(tank.x,tank.y,30,5);
//Draw the rectangle on the right (please think about it at this time -> be sure to have 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 cover
cxt.fillStyle=tank.color[1];
cxt.arc(tank.x+15,tank.y+10,4,0,360,true);
cxt.fill();
//Draw the cannon (straight line)
cxt.strokeStyle=tank.color[1];
//Set the width of the line
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(tank.x+15,tank.y+10);
//To the 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;
}
}
</pre>
<pre></pre>
</pre>