Web Front-end
H5 Tutorial
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
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
<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>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to run the h5 project
Apr 06, 2025 pm 12:21 PM
Running the H5 project requires the following steps: installing necessary tools such as web server, Node.js, development tools, etc. Build a development environment, create project folders, initialize projects, and write code. Start the development server and run the command using the command line. Preview the project in your browser and enter the development server URL. Publish projects, optimize code, deploy projects, and set up web server configuration.
What exactly does H5 page production mean?
Apr 06, 2025 am 07:18 AM
H5 page production refers to the creation of cross-platform compatible web pages using technologies such as HTML5, CSS3 and JavaScript. Its core lies in the browser's parsing code, rendering structure, style and interactive functions. Common technologies include animation effects, responsive design, and data interaction. To avoid errors, developers should be debugged; performance optimization and best practices include image format optimization, request reduction and code specifications, etc. to improve loading speed and code quality.
How to make h5 click icon
Apr 06, 2025 pm 12:15 PM
The steps to create an H5 click icon include: preparing a square source image in the image editing software. Add interactivity in the H5 editor and set the click event. Create a hotspot that covers the entire icon. Set the action of click events, such as jumping to the page or triggering animation. Export H5 documents as HTML, CSS, and JavaScript files. Deploy the exported files to a website or other platform.
What Does H5 Refer To? Exploring the Context
Apr 12, 2025 am 12:03 AM
H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo
What application scenarios are suitable for H5 page production
Apr 05, 2025 pm 11:36 PM
H5 (HTML5) is suitable for lightweight applications, such as marketing campaign pages, product display pages and corporate promotion micro-websites. Its advantages lie in cross-platformity and rich interactivity, but its limitations lie in complex interactions and animations, local resource access and offline capabilities.
What is the H5 programming language?
Apr 03, 2025 am 12:16 AM
H5 is not a standalone programming language, but a collection of HTML5, CSS3 and JavaScript for building modern web applications. 1. HTML5 defines the web page structure and content, and provides new tags and APIs. 2. CSS3 controls style and layout, and introduces new features such as animation. 3. JavaScript implements dynamic interaction and enhances functions through DOM operations and asynchronous requests.
Is H5 page production a front-end development?
Apr 05, 2025 pm 11:42 PM
Yes, H5 page production is an important implementation method for front-end development, involving core technologies such as HTML, CSS and JavaScript. Developers build dynamic and powerful H5 pages by cleverly combining these technologies, such as using the <canvas> tag to draw graphics or using JavaScript to control interaction behavior.
How to make pop-up windows with h5
Apr 06, 2025 pm 12:12 PM
H5 pop-up window creation steps: 1. Determine the triggering method (click, time, exit, scroll); 2. Design content (title, text, action button); 3. Set style (size, color, font, background); 4. Implement code (HTML, CSS, JavaScript); 5. Test and deployment.
