HTML5 menyedari pertempuran kereta kebal klasik boleh bergerak dan menembak kemahiran tutorial bullet_html5

// Untuk kemudahan pengaturcaraan, kami mentakrifkan dua tatasusunan warna 
var heroColor=new Array("#BA9658","#FEF26E"); 
var enmeyColor=new Array("#00A2B5","#00FEFE"); 🎜>//Untuk kereta kebal musuh yang lain, skalabiliti di sini masih bagus 
//Kelas Bullet
fungsi Bullet(x,y,direct,speed){ 
ini.x=x; this.y=y; 
this.direct=direct; 
this.speed=speed; run(){ 
//Apabila menyenaraikan koordinat peluru ini, kami mula-mula menentukan sama ada peluru itu telah mencapai sempadan 
jika(ini.x<=0||ini.x>=400|| ini. y<=0||this.y>=300){ 
//Peluru akan berhenti 
tetingkap.clearInterval(this.timer); this.isLive =false; 
}else{ 
//Ini boleh digunakan untuk mengubah suai koordinat 
suis(this.direct){ 
kes 0: 
this.y-=this .kelajuan; 
 pecah; 
kes 1: 
ini.x =ini.kelajuan; pecah; 
kes 3: 
ini.x-=ini.kelajuan; 
} 
} 
document.getElementById("aa"). " this.x " Bullet y=" this.y; 
} 
} 
//Ini ialah kelas Tank 
fungsi Tank(x,y,direct,color){ 
ini .x=x; 
ini.y=y; 
ini.kelajuan=1; warna; 
//Naik
this.moveUp=function(){ 
this.y-=this.speed; 
this.direct=0; Ke kanan
this.moveRight=function(){ 
this.x =this.speed; 
this.direct=1; 
} 
//Gerakan ke bawah
ini. moveDown=function( ){ 
this.y =this.speed; 
this.direct=2; 
} 
//Left
this.moveLeft=function(){ 
 this.x- =this.speed; 
this.direct=3; 
} 
} 
//Tentukan kelas Wira
//x mewakili absis tangki, y mewakili ordinat, arah langsung 
fungsi Wira(x,y,direct,color){ 
//Fungsi dua ayat berikut ialah untuk mencapai kesan pewarisan melalui penyamaran objek
this.tank=Tank ; 
this.tank (x,y,direct,color); 
//Tambahkan fungsi untuk menembak kereta kebal musuh 
this.shotEnemy=function(){ 
//Buat peluru. , kedudukan peluru harus berkaitan dengan wira , dan berkaitan dengan arah wira.!!! 
//ini.x adalah absis wira semasa Di sini kita hanya memproses (memperhalusi) 
switch(this.direct){ 
case 0 : 
heroBullet=new Bullet(this.x 9,this.y,this.direct,1); 🎜>heroBullet=Peluru baharu(ini.x 30,ini .y 9,ini.direct,1); 
pecah; 
kes 2: 
heroBullet=Peluru baharu(ini.x 9,ini. y 30,this.direct,1); 
 pecah; 
kes 3: //kanan
heroBullet=new Bullet(this.x,this.y 9,this.direct,1); >break; 
} 
//call Bullet run kami, 50 adalah kesimpulan yang diperolehi oleh guru selepas banyak ujian 
var timer=window.setInterval("heroBullet.run()",50); 
//Tetapkan pemasa ini kepada peluru ini ( objek js dihantar melalui rujukan!) 
heroBullet.timer=timer; 
} 
} 
//Tentukan kelas EnemyTank 
fungsi EnemyTank (x,y,direct,color){ 
//Juga warisi Tank melalui penyamaran objek 
this.tank=Tank; 
this.tank(x,y,direct,color); } 
//Lukis peluru anda sendiri , satu lagi, anda juga boleh merangkum fungsi ini ke dalam kelas Hero 
fungsi drawHeroBullet(){ 
//Di sini, kami telah menambah ayat, tetapi anda mesti tahu bahawa menambahkannya di sini memerlukan pemahaman tentang keseluruhan program. y,2,2); 
} 
} 
//Lukis tangki
fungsi drawTank(tangki){ 
//Pertimbangkan arah
suis(tank.direct){ 
kes 0: //Ke atas
kes 2 :// Seterusnya
//Lukis tangki anda sendiri, menggunakan teknik lukisan sebelumnya
//Tetapkan warna
cxt.fillStyle=tank. color[0]; 
//Teacher Han menggunakan Die pertama --->Live kemudian (pemula adalah terbaik untuk menggunakan kaedah ini) 
//Lukis segi empat tepat di sebelah kiri dahulu 
cxt.fillRect( tank.x, tank.y,5,30); 
//Lukis segi empat tepat di sebelah kanan (sila berikan pendapat anda pada masa ini -> mesti ada titik rujukan) 
cxt.fillRect(tangki. x 15, tank.y,5,30); 
//Lukiskan segi empat tepat tengah
cxt.fillRect(tank.x 6,tank.y 5,8,20); Lukis penutup tangki
cxt.fillStyle=tank.color[1]; (); 
//Lukiskan laras (garis lurus) 
cxt.strokeStyle =tank.color[1]; 🎜>cxt.beginPath(); 
cxt.moveTo(tank.x 10,tank.y 15); ,tank.y); 
}lain jika(tank.direct==2){ 
cxt.lineTo(tank.x 10,tank.y 30); ); 
cxt.stroke(); 
break; 
kes 1: / /kanan dan kiri
kes 3: 
//Lukis tangki anda sendiri, menggunakan teknik lukisan sebelumnya
//Tetapkan warna
cxt.fillStyle=tank.color[0];//Lehrer Han verwendet zuerst die Würfel --->Später leben (Anfänger verwenden diese Methode am besten) 
//Zeichne zuerst das Rechteck auf der linken Seite 
cxt.fillRect(tank.x, tank.y,30 ,5); 
//Zeichne das Rechteck auf der rechten Seite (bitte denken Sie zu diesem Zeitpunkt darüber nach -> es muss einen Referenzpunkt geben) 
cxt.fillRect(tank.x, tank.y 15,30, 5); 
//Zeichne das mittlere Rechteck
cxt.fillRect(tank.x 5, tank.y 6,20,8); 
//Zeichne die Abdeckung des Tanks
cxt. fillStyle=tank.color[1]; 
cxt.arc(tank.x 15,tank.y 10,4,0,360,true); 
cxt.fill(); 
/Zeichne das Fass (gerade Linie) 
cxt.strokeStyle=tank.color[1];//Legen Sie die Breite der Linie fest
cxt.lineWidth=1.5; 
cxt.beginPath(); cxt.moveTo(tank. x 15,tank.y 10); 
//Nach rechts
if(tank.direct==1){ 
cxt.lineTo(tank.x 30,tank. y 10); 
 }else if(tank.direct==3){ //Left
cxt.lineTo(tank.x,tank.y 10); 
cxt.closePath( ); 
cxt .Stroke(); 
break;