<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>
pré>