suchen

Heim >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

WBOY
WBOYOriginal
2016-05-16 15:48:462436Durchsuche

Code kopieren
Der Code lautet wie folgt:

tank.html
 ><meta charset="utf-8"/> <br></head><body onkeydown="getCommand();"> ; /h1> <br><!--Das Schlachtfeld der Panzerschlacht--> "&gt ;</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>

 
 
 





Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung der Verwendung von postMessage in der domänenübergreifenden HTML5-Kommunikation_HTML5-Tutorial-FähigkeitenNächster Artikel：Zusammenfassung der Verwendung von postMessage in der domänenübergreifenden HTML5-Kommunikation_HTML5-Tutorial-Fähigkeiten
In Verbindung stehende Artikel
Mehr sehen