Web-Frontend
H5-Tutorial
HTML5 verwirklicht die klassische Panzerschlacht. Panzer können sich bewegen und ein Bullet_html5-Tutorial abfeuern
HTML5 verwirklicht die klassische Panzerschlacht. Panzer können sich bewegen und ein Bullet_html5-Tutorial abfeuern
tank.html
><meta charset="utf-8"/> <br></head><body onkeydown="getCommand();"> ; /h1> <br><!--Das Schlachtfeld der Panzerschlacht--> "> ;</canvas> <br><span id="aa">data</span> <br><!--Stellen Sie tankGames.js auf dieser Seite vor--> <br>< script type="text/javascript" src="tank.js"></script> document.getElementById("tankMap"); <br>//Zeichnungskontext abrufen (Sie können ihn als Pinsel verstehen) <br>var cxt=canvas1.getContext("2d"); <br>//Richtung<br>var hero=new Hero(140,140,0,heroColor); <br>//Definiere eine leere Kugel<br>var heroBullet=null; <br>//Definiere den Panzer des Feindes (der (Feind) Wie viele Panzer gibt es? Idee: Ist es eine einzelne Definition oder wird es in einem Array platziert? Wir werden die Anzahl der feindlichen Panzer hinzufügen und Variablen erstellen: <br>//0->upper, 1->right, 2->lower 3->left<br>for(var i=0;i<3 ;i ){ <br />//Erstelle einen Panzer<br />var freedomTank=new EnemyTank((i 1)*50,0,2,enmeyColor); <br />//Füge diesen Panzer in das Array ein<br />enemyTanks [i]=enemyTank; <br />} <br />//Erster Aufruf <br />flashTankMap(); <br />//Schreiben Sie eine Funktion, um unseren Kampfbereich regelmäßig zu aktualisieren und die Elemente zu platzieren, die im Kampfbereich angezeigt werden (Ihr eigener Panzer, feindliche Panzer, Kugeln, Bomben, <br />//Hindernisse...)->Spielideen<br>function flashTankMap(){ <br>//Löschen Sie die Leinwand<br>cxt.clearRect( 0,0,400,300) ; <br>//Mein Panzer<br>drawTank(hero); <br>//Zeichne deine eigenen Kugeln<br>//Wie erscheint der Kugelflugeffekt? sollte dies jedes Mal (setInterval) tun, um den Kampfbereich zu aktualisieren. Wenn sich die Geschosskoordinaten während der Aktualisierung ändern, entsteht der Eindruck, dass die Kugel fliegt!] <br>drawHeroBullet(); <br>// Alle feindlichen Panzer zeichnen <br>for(var i=0;i<3;i ){ <br />drawTank(enemyTanks[i]} <br />} <br />// Dies ist eine Funktion zum Akzeptieren der Benutzertaste<br />Funktion getCommand(){ <br />//Woher weiß ich, welche Taste der Spieler gedrückt hat<br />//Beschreibe das Ereignis, wenn die Taste gedrückt wird --->Ereignisobjekt- --- ->Ereignisbehandlungsfunktion () <br>var code=event.keyCode;//Der ASCII-Code des entsprechenden Buchstabens-> Schauen wir uns die Codetabelle an <br>switch(code){ <br> case 87://on<br>hero.moveUp(); <br>break; <br>hero.moveRight(); <br>break; .moveDown(); <br>break; <br>hero.moveLeft(); <br>break <br>break; <br>} <br> //Diese Funktion auslösen flashTankMap(); <br>flashTankMap(); <br>//Hier können Sie Code schreiben (denken Sie, wir erstellen einfach eine Funktion speziell zum Aktualisieren unserer Panzer regelmäßig Canvas [Kampfbereich]) <br>} <br>//Aktualisieren Sie den Kampfbereich alle 100 Millisekunden <br>window.setInterval("flashTankMap()",100); <br></script> ></body> <br></html>tank.js
Code kopieren
Der Code lautet wie folgt:
<pre name="code" class="javascript">// Zur Vereinfachung der Programmierung definieren wir zwei Farbarrays <br>var heroColor=new Array("#BA9658","#FEF26E"); 🎜>//Für andere feindliche Panzer ist die Skalierbarkeit hier immer noch gut <br>//Bullet class<br>function Bullet(x,y,direct,speed){ <br>this.x=x; this.y=y; <br>this.speed=speed; <br>this.isLive=true; <br>this run(){ <br>//Beim Auflisten der Koordinaten dieses Geschosses ermitteln wir zunächst, ob das Geschoss die Grenze erreicht hat <br>if(this.x<=0||this.x>=400|| this. y<=0||this.y>=300){ <br>//Die Kugel wird stoppen <br>window.clearInterval(this.timer); <br>//Die Kugel ist tot<br> this.isLive =false; <br>}else{ <br>//Dies kann verwendet werden, um die Koordinaten zu ändern <br>switch(this.direct){ <br>case 0: <br>this.y-=this .speed; <br>case 1: <br>this.x =this.speed; <br>case 2: <br>this.y =this.speed; break; <br>case 3: <br>this.x-=this.speed; <br>break; <br>} <br>document.getElementById("aa").innerText= " this.x " Bullet y=" this.y; <br>} <br>} <br>//Dies ist eine Tank-Klasse <br>Funktion Tank(x,y,direct,color){ <br>this .x=x; <br>this.y=y; <br>this.direct=direct; <br>//Ein Tank erfordert zwei Farben color; <br>//Move up<br>this.moveUp=function(){ <br>this.y-=this.speed; <br>this.direct=0; <br>/ Nach rechts<br>this.moveRight=function(){ <br>this.x =this.speed; <br>this.direct=1 <br>} <br>//Nach unten bewegen<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>} //Definiere eine Heldenklasse<br>//x repräsentiert die Abszisse des Tanks, y repräsentiert die Ordinate, direkte Richtung <br>function Hero(x,y,direct,color){ <br>//Die Funktion der folgenden beiden Sätze besteht darin, den Effekt der Vererbung durch Objektidentitätswechsel zu erreichen<br>this.tank=Tank ; <br>this.tank (x,y,direct,color); <br>//Füge eine Funktion hinzu, um den feindlichen Panzer abzuschießen. <br>this.shotEnemy=function(){ <br>//Erstelle eine Kugel , die Position des Geschosses sollte mit der Richtung des Helden in Zusammenhang stehen.!!! <br>//this.x ist die Abszisse des aktuellen Helden <br>switch(this.direct){ <br>case 0 : <br>heroBullet=new Bullet(this.x 9,this.y,this.direct,1); <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); >break; <br>} <br>//call Unser Bullet Run, 50 ist eine Schlussfolgerung des Lehrers nach vielen Tests <br>var timer=window.setInterval("heroBullet.run()",50); <br>//Weisen Sie diesen Timer diesem Bullet zu (js-Objekte werden als Referenz übergeben!) <br>heroBullet.timer=timer; <br>} <br>} <br>//Definieren Sie eine EnemyTank-Klasse <br>Funktion EnemyTank (x,y,direct,color){ <br>//Auch Tank durch Objektidentität erben <br>this.tank=Tank(x,y,direct,color); } <br>//Zeichnen Sie Ihre eigenen Aufzählungszeichen, noch etwas: Sie können diese Funktion auch in die Hero-Klasse einkapseln <br>function drawHeroBullet(){ <br>//Hier haben wir einen Satz hinzugefügt, aber Sie müssen es wissen dass das Hinzufügen hier ein Verständnis des gesamten Programms erfordert. <br>if(heroBullet!=null&&heroBullet.isLive){ <br>cxt.fillRect(heroBullet.x,heroBullet. y,2,2); <br>} <br>} <br>//Zeichne den Tank<br>function drawTank(tank){ <br>//Berücksichtige die Richtung<br>switch(tank.direct){ <br>Fall 0: //Nach oben<br>Fall 2 :// Weiter<br>//Zeichnen Sie Ihren eigenen Tank mit den vorherigen Zeichentechniken<br>//Legen Sie die Farbe fest<br>cxt.fillStyle=tank. color[0]; <br>//Lehrer Han verwendet den ersten Würfel --->Lebe später (Anfänger verwenden diese Methode am besten) <br>//Zeichne zuerst das Rechteck auf der linken Seite <br>cxt.fillRect( tank.x, tank.y,5,30); <br>//Zeichnen Sie das Rechteck auf der rechten Seite (bitte geben Sie zu diesem Zeitpunkt Ihre Gedanken an -> es muss einen Referenzpunkt geben) <br>cxt.fillRect(tank. x 15, tank.y,5,30); <br>//Zeichne das mittlere Rechteck aus<br>cxt.fillRect(tank.x 6,tank.y 5,8,20); Zeichnen Sie die Abdeckung des Tanks<br>cxt.fillStyle=tank.color[1]; (); <br>//Zeichne den Lauf (gerade Linie) <br>cxt.StrokeStyle =tank.color[1];/Lege die Breite der Linie fest <br>cxt.lineWidth=1.5; 🎜>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>cxt.Stroke(); <br>Break <br>Fall 1: / /rechts und links<br>Fall 3: <br>//Zeichne deinen eigenen Tank mit den vorherigen Zeichentechniken<br>//Stellen Sie die Farbe ein<br>cxt.fillStyle=tank.color[0];//Le professeur Han utilise die d'abord --->live plus tard (il est préférable que les débutants utilisent cette méthode) <br>//Dessinez d'abord le rectangle à gauche <br>cxt.fillRect(tank.x, tank.y,30 ,5); <br>//Dessinez le rectangle à droite (veuillez y réfléchir à ce moment-là -> il doit y avoir un point de référence) <br>cxt.fillRect(tank.x, tank.y 15,30, 5); <br>//Dessinez le rectangle du milieu<br>cxt.fillRect(tank.x 5, tank.y 6,20,8 <br>//Dessinez le couvercle du réservoir<br>cxt); fillStyle=tank. color[1]; <br>cxt.arc(tank.x 15,tank.y 10,4,0,360,true <br>cxt.fill();//Dessine le baril; (ligne droite) <br>cxt.strokeStyle=tank.color[1]; <br>//Définir la largeur de la ligne<br>cxt.lineWidth=1.5 <br>cxt.beginPath(); cxt.moveTo(tank. x 15,tank.y 10); <br>//À droite<br>if(tank.direct==1){ <br>cxt.lineTo(tank.x 30,tank. y 10); <br> }else if(tank.direct==3){ //Left<br>cxt.lineTo(tank.x,tank.y 10); <br>} <br>cxt.closePath( ); <br>cxt .stroke(); <br>break; <br>} <br>
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1359
52
Wie verwende ich Ansichtsfenster -Meta -Tags, um die Seite zu steuern, die auf mobilen Geräten skaliert wird?
Mar 13, 2025 pm 08:00 PM
In dem Artikel werden die Meta-Tags mit Ansichtsfenster besprochen, um die Seite zu steuern, die auf mobilen Geräten skaliert und sich auf Einstellungen wie Breite und initiale Maßstäbe für optimale Reaktionsfähigkeit und Leistung konzentriert.Character Count: 159
Wie erstelle ich interaktive Spiele mit HTML5 und JavaScript?
Mar 10, 2025 pm 06:34 PM
In diesem Artikel werden interaktive HTML5 -Spiele mit JavaScript erstellt. Es umfasst das Spieldesign, die HTML -Struktur, das CSS -Styling, die JavaScript -Logik (einschließlich Ereignisbearbeitung und -animation) und die Audio -Integration. Essentielle JavaScript -Bibliotheken (Phaser, PI
Wie füge ich meiner HTML5 -Website Audio hinzu?
Mar 10, 2025 pm 03:01 PM
In diesem Artikel wird erläutert, wie Audio in HTML5 mit dem & lt; audio & gt; Element, einschließlich Best Practices für die Formatauswahl (MP3, OGG Vorbis), Dateioptimierung und JavaScript -Steuerung für die Wiedergabe. Es betont die Verwendung von mehreren Audio f f
Wie benutze ich die API der HTML5 -Seite Sichtbarkeit, um zu erkennen, wann eine Seite sichtbar ist?
Mar 13, 2025 pm 07:51 PM
In dem Artikel werden die Sichtbarkeits -API der HTML5 -Seite mit der Sichtbarkeit von Seiten ermittelt, die Benutzererfahrung verbessert und die Ressourcennutzung optimiert. Zu den wichtigsten Aspekten gehören die Pause, die Verringerung der CPU -Last und die Verwaltung von Analysen auf der Grundlage von Sichtbarkeitsänderungen.
Wie gehe ich mit der Privatsphäre und Berechtigungen des Benutzer Ort mit der Geolocation -API um?
Mar 18, 2025 pm 02:16 PM
In dem Artikel wird die Verwaltung der Privatsphäre und Berechtigungen des Benutzerstandorts mithilfe der Geolocation -API erörtert, wobei die Best Practices für die Anforderung von Berechtigungen, die Gewährleistung der Datensicherheit und die Einhaltung der Datenschutzgesetze hervorgehoben werden.
Wie verwende ich HTML5 -Formulare für Benutzereingaben?
Mar 10, 2025 pm 02:59 PM
In diesem Artikel wird erläutert, wie HTML5 -Formulare erstellt und validiert werden. Es beschreibt die Form & gt; Element, Eingabetypen (Text, E -Mail, Nummer usw.) und Attribute (erforderlich, Muster, min, max). Die Vorteile von HTML5 -Formen gegenüber älteren Methoden, inkl.
Wie verwende ich die HTML5 -Drag & Drop -API für interaktive Benutzeroberflächen?
Mar 18, 2025 pm 02:17 PM
In dem Artikel wird erläutert, wie die HTML5 -Drag & Drop -API verwendet wird, um interaktive Benutzeroberflächen zu erstellen, Schritte zu detaillieren, um Elemente draggierbar zu machen, Schlüsselereignisse zu verarbeiten und Benutzererfahrung mit benutzerdefiniertem Feedback zu verbessern. Es wird auch gemeinsame Fallstricke zu a diskutiert
Wie verwende ich die HTML5 WebSockets -API für die bidirektionale Kommunikation zwischen Client und Server?
Mar 12, 2025 pm 03:20 PM
In diesem Artikel werden die HTML5 WebSockets-API für die Kommunikation zwischen bidirektionaler Client-Server in Echtzeit erläutert. Es werden clientseitige (JavaScript) und serverseitige (Python/Flask) -implementierungen beschrieben, die Herausforderungen wie Skalierbarkeit, staatliches Management, ein
