HTML5 verwirklicht die klassische Panzerschlacht. Panzer können sich bewegen und ein Bullet_html5-Tutorial abfeuern-H5-Tutorial-php.cn

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>