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
AI Hentai Generator
Generate AI Hentai for free.
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
1377
52
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 do I use viewport meta tags to control page scaling on mobile devices?
Mar 13, 2025 pm 08:00 PM
The article discusses using viewport meta tags to control page scaling on mobile devices, focusing on settings like width and initial-scale for optimal responsiveness and performance.Character count: 159
How do I use the HTML5 Page Visibility API to detect when a page is visible?
Mar 13, 2025 pm 07:51 PM
The article discusses using the HTML5 Page Visibility API to detect page visibility, improve user experience, and optimize resource usage. Key aspects include pausing media, reducing CPU load, and managing analytics based on visibility changes.
How do I handle user location privacy and permissions with the Geolocation API?
Mar 18, 2025 pm 02:16 PM
The article discusses managing user location privacy and permissions using the Geolocation API, emphasizing best practices for requesting permissions, ensuring data security, and complying with privacy laws.
How do I use the HTML5 Drag and Drop API for interactive user interfaces?
Mar 18, 2025 pm 02:17 PM
The article explains how to use the HTML5 Drag and Drop API to create interactive user interfaces, detailing steps to make elements draggable, handle key events, and enhance user experience with custom feedback. It also discusses common pitfalls to a
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.
Does H5 page production require continuous maintenance?
Apr 05, 2025 pm 11:27 PM
The H5 page needs to be maintained continuously, because of factors such as code vulnerabilities, browser compatibility, performance optimization, security updates and user experience improvements. Effective maintenance methods include establishing a complete testing system, using version control tools, regularly monitoring page performance, collecting user feedback and formulating maintenance plans.
