Home > Article > Web Front-end > HTML5 realizes the classic tank battle. Tanks can move around and fire a bullet_html5 tutorial skills
HTML5 realizes the classic tank battle. Tanks can move around and fire a bullet_html5 tutorial skills
- WBOYOriginal
- 2016-05-16 15:48:462379browse
Copy code
The code is as follows:tank.html
<!DOCTYPE html> <br><html> <br><head> <br>< meta charset="utf-8"/> <br></head> <br><body onkeydown="getCommand();"> <br><h1>hmtl5-Classic Tank Battle< /h1> <br><!--The battlefield of tank battle--> <br><canvas id="tankMap" width="400px" height="300px" style="background-color:black"> ;</canvas> <br><span id="aa">data</span> <br><!--Introduce tankGames.js to this page--> <br>< script type="text/javascript" src="tank.js"></script> <br><script type="text/javascript"> <br>//Get canvas<br>var canvas1= document.getElementById("tankMap"); <br>//Get the drawing context (you can understand it as a brush) <br>var cxt=canvas1.getContext("2d"); <br>//My tank hero <br>//Direction<br>var hero=new Hero(140,140,0,heroColor); <br>//Define an empty bullet<br>var heroBullet=null; <br>//Define the enemy’s tank (the enemy’s How many tanks are there? Idea: Is it a single definition, or is it placed in an array?) <br>var enemyTanks=new Array(); <br>//First die and live, set 3, and then we will add the enemy tanks Quantity, make variables <br>//0->upper, 1->right, 2->lower 3->left<br>for(var i=0;i<3;i ){ <br />//Create a tank<br />var enemyTank=new EnemyTank((i 1)*50,0,2,enmeyColor); <br />//Put this tank into the array<br />enemyTanks[i]=enemyTank; <br />} <br />//First call <br />flashTankMap(); <br />//Write a function to refresh our combat area regularly, and put the elements that will appear in the combat area (your own tank, Enemy tanks, bullets, bombs, <br />//Obstacles...)->Game Ideas<br>function flashTankMap(){ <br>//Clear the canvas<br>cxt.clearRect(0,0,400,300) ; <br>//My tank<br>drawTank(hero); <br>//Draw your own bullets<br>//How does the bullet flying effect appear? [Answer: First of all, we should do it every certain time (setInterval) to refresh the combat area. If the bullet coordinates change during the refresh, it will give the impression that the bullet is flying!] <br>drawHeroBullet(); <br>//Enemy’s tank<br>// Draw all enemy tanks <br>for(var i=0;i<3;i ){ <br />drawTank(enemyTanks[i]); <br />} <br />} <br />//This is an accept User key function<br />function getCommand(){ <br />//How do I know what key the player pressed<br />//Describe the event when the key is pressed --->event object---- ->Event handling function () <br>var code=event.keyCode;//The ascii code of the corresponding letter-> Let’s look at the code table <br>switch(code){ <br>case 87://on<br>hero.moveUp(); <br>break; <br>case 68: <br>hero.moveRight(); <br>break; <br>case 83: <br>hero.moveDown(); <br>break; <br>case 65: <br>hero.moveLeft(); <br>break; <br>case 74: <br>hero.shotEnemy(); <br>break; <br>} <br> //Trigger this function flashTankMap(); <br>flashTankMap(); <br>//Redraw all enemy tanks. You can write code here (think, let’s just make a function specifically for refreshing our tanks regularly Canvas [combat area]) <br>} <br>//Refresh the combat area every 100 milliseconds <br>window.setInterval("flashTankMap()",100); <br></script> <br></body> <br></html>tank.js
Copy code
The code is as follows:<pre name="code" class="javascript">// For programming convenience, we define two color arrays <br>var heroColor=new Array("#BA9658","#FEF26E"); <br>var enmeyColor=new Array("#00A2B5","#00FEFE"); <br>//For other enemy tanks, the scalability here is still good. <br>//Bullet class<br>function Bullet(x,y,direct,speed){ <br>this.x=x; <br>this.y=y; <br>this.direct=direct; <br>this.speed=speed; <br>this.timer=null; <br>this.isLive=true; <br>this. run=function run(){ <br>//When listing the coordinates of this bullet, we first determine whether the bullet has reached the boundary <br>if(this.x<=0||this.x>=400|| this.y<=0||this.y>=300){ <br>//The bullet is going to stop. <br>window.clearInterval(this.timer); <br>//The bullet is dead<br>this.isLive =false; <br>}else{ <br>//This can be used to modify the coordinates <br>switch(this.direct){ <br>case 0: <br>this.y-=this.speed; <br> break; <br>case 1: <br>this.x =this.speed; <br>break; <br>case 2: <br>this.y =this.speed; <br>break; <br>case 3: <br>this.x-=this.speed; <br>break; <br>} <br>} <br>document.getElementById("aa").innerText="bulletx=" this.x " Bullet y=" this.y; <br>} <br>} <br>//This is a Tank class <br>function Tank(x,y,direct,color){ <br>this.x=x; <br>this.y=y; <br>this.speed=1; <br>this.direct=direct; <br>//A tank requires two colors. <br>this.color=color; <br>//Move up<br>this.moveUp=function(){ <br>this.y-=this.speed; <br>this.direct=0; <br>} <br>//To the right<br>this.moveRight=function(){ <br>this.x =this.speed; <br>this.direct=1; <br>} <br>//Move down<br>this.moveDown=function( ){ <br>this.y =this.speed; <br>this.direct=2; <br>} <br>//Left<br>this.moveLeft=function(){ <br>this.x- =this.speed; <br>this.direct=3; <br>} <br>} <br>//Define a Hero class<br>//x represents the abscissa of the tank, y represents the ordinate, direct direction <br>function Hero(x,y,direct,color){ <br>//The function of the following two sentences is to achieve the effect of inheritance through object impersonation<br>this.tank=Tank; <br>this.tank (x,y,direct,color); <br>//Add a function to shoot the enemy tank. <br>this.shotEnemy=function(){ <br>//Create a bullet, the position of the bullet should be related to the hero , and related to the direction of the hero.!!! <br>//this.x is the abscissa of the current hero. Here we simply process (refine) <br>switch(this.direct){ <br>case 0 : <br>heroBullet=new Bullet(this.x 9,this.y,this.direct,1); <br>break; <br>case 1: <br>heroBullet=new Bullet(this.x 30,this .y 9,this.direct,1); <br>break; <br>case 2: <br>heroBullet=new Bullet(this.x 9,this.y 30,this.direct,1); <br> break; <br>case 3: //right<br>heroBullet=new Bullet(this.x,this.y 9,this.direct,1); <br>break; <br>} <br>//call Our bullet run, 50 is a conclusion obtained by the teacher after many tests. <br>var timer=window.setInterval("heroBullet.run()",50); <br>//Assign this timer to this bullet ( js objects are passed by reference!) <br>heroBullet.timer=timer; <br>} <br>} <br>//Define an EnemyTank class <br>function EnemyTank (x,y,direct,color){ <br>//Also inherit Tank through object impersonation <br>this.tank=Tank; <br>this.tank(x,y,direct,color); <br>} <br>//Draw your own bullets , one more thing, you can also encapsulate this function into the Hero class <br>function drawHeroBullet(){ <br>//Here, we have added a sentence, but you must know that adding it here requires a grasp of the entire program. <br>if(heroBullet!=null&&heroBullet.isLive){ <br>cxt.fillStyle="#FEF26E"; <br>cxt.fillRect(heroBullet.x,heroBullet.y,2,2); <br>} <br>} <br>//Draw the tank<br>function drawTank(tank){ <br>//Consider the direction<br>switch(tank.direct){ <br>case 0: //Up<br>case 2 :// Next<br>//Draw your own tank, using the previous drawing techniques<br>//Set the color<br>cxt.fillStyle=tank.color[0]; <br>//Teacher Han uses the first Die --->Live later (beginners are best to use this method) <br>//Draw the rectangle on the left first <br>cxt.fillRect(tank.x, tank.y,5,30); <br>//Draw the rectangle on the right (please give your thoughts at this time -> there must be a reference point) <br>cxt.fillRect(tank.x 15, tank.y,5,30); <br>//Draw Draw out the middle rectangle<br>cxt.fillRect(tank.x 6,tank.y 5,8,20); <br>//Draw the cover of the tank<br>cxt.fillStyle=tank.color[1]; <br>cxt.arc(tank.x 10,tank.y 15,4,0,360,true); <br>cxt.fill(); <br>//Draw the barrel (straight line) <br>cxt.strokeStyle =tank.color[1]; <br>//Set the width of the line <br>cxt.lineWidth=1.5; <br>cxt.beginPath(); <br>cxt.moveTo(tank.x 10,tank.y 15); <br>if(tank.direct==0){ <br>cxt.lineTo(tank.x 10,tank.y); <br>}else if(tank.direct==2){ <br>cxt.lineTo(tank.x 10,tank.y 30); <br>} <br>cxt.closePath(); <br>cxt.stroke(); <br>break; <br>case 1: / /right and left<br>case 3: <br>//Draw your own tank, using the previous drawing techniques<br>//Set the color<br>cxt.fillStyle=tank.color[0]; <br>//한 선생님은 주사위를 먼저 사용합니다 --->나중에 라이브(초보자는 이 방법을 사용하는 것이 가장 좋습니다) <br>//왼쪽에 직사각형을 먼저 그립니다 <br>cxt.fillRect(tank.x, Tank.y,30 ,5);//오른쪽에 직사각형을 그립니다(이때 생각해 보세요 -> 참조점이 있어야 합니다) <br>cxt.fillRect(tank.x, Tank.y 15,30, 5); <br>//가운데 직사각형 그리기<br>cxt.fillRect(tank.x 5, Tank.y 6,20,8) <br>//탱크 덮개 그리기<br>cxt. fillStyle=tank.color[1]; <br>cxt.arc(tank.x 15,tank.y 10,4,0,360,true); <br>cxt.fill()>//통 그리기 (직선) <br>cxt.StrokeStyle=tank.color[1]; <br>//선 너비 설정<br>cxt.lineWidth=1.5; <br>cxt.beginPath(); cxt.moveTo(tank.x 15,tank.y 10); <br>//오른쪽으로<br>if(tank.direct==1){ <br>cxt.lineTo(tank.x 30,tank. y 10); <br> }else if(tank.direct==3){ //왼쪽<br>cxt.lineTo(tank.x,tank.y 10) <br>} <br>cxt.closePath( ); <br>cxt .Stroke(); <br>break; <br>} <br>} <br>Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Summary of usage of postMessage in html5 cross-domain communication_html5 tutorial skillsNext article：Summary of usage of postMessage in html5 cross-domain communication_html5 tutorial skills
Related articles
See more- AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds
- HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)
- Detailed explanation of image drawing examples in HTML5 canvas 9
- Regular expressions and new HTML5 elements
- How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server