Rumah > Artikel > hujung hadapan web > HTML5 menyedari pertempuran kereta kebal klasik boleh bergerak dan menembak kemahiran tutorial bullet_html5
HTML5 menyedari pertempuran kereta kebal klasik boleh bergerak dan menembak kemahiran tutorial bullet_html5
- WBOYasal
- 2016-05-16 15:48:462422semak imbas
Salin kod
Kod adalah seperti berikut:tank.html
<!DOCTYPE html> <br><html> >< meta charset="utf-8"/> <br></head> <br><body onkeydown="getCommand();"> ; /h1> <br><!--Medan pertempuran kereta kebal--> "> ;</canvas> <br><span id="aa">data</span> <br><!--Perkenalkan tankGames.js ke halaman ini--> <br>< script type="text/javascript" src="tank.js"></script> <br><script type="text/javascript"> <br>//Dapatkan kanvas<br>var canvas1= document.getElementById("tankMap"); <br>//Dapatkan konteks lukisan (anda boleh memahaminya sebagai berus) <br>var cxt=canvas1.getContext("2d"); <br>//Arah<br>var hero=new Hero(140,140,0,heroColor); enemy's Berapakah bilangan kereta kebal yang ada? kami akan menambah Kuantiti kereta kebal musuh, buat pembolehubah <br>//0->atas, 1->kanan, 2->bawah 3->kiri<br>untuk(var i=0;i<3 ;i ){ <br />//Buat kereta kebal<br />var enemyTank=new EnemyTank((i 1)*50,0,2,enmeyColor); [i]=enemyTank; <br />} <br />//Panggilan pertama <br />flashTankMap(); (kereta kebal anda sendiri, kereta kebal musuh, peluru, bom, <br />//Halangan...)->Idea Permainan<br>fungsi flashTankMap(){ <br>//Kosongkan kanvas<br>cxt.clearRect( 0,0,400,300) ; <br>//Tangki saya<br>drawTank(hero); harus melakukannya setiap masa tertentu (setInterval) untuk menyegarkan kawasan pertempuran Jika koordinat peluru berubah semasa penyegaran, ia akan memberi gambaran bahawa peluru sedang terbang!] <br>drawHeroBullet(); <br>// Lukis semua kereta kebal musuh <br>untuk(var i=0;i<3;i ){ <br />drawTank(enemyTanks[i]); Ini ialah fungsi kekunci pengguna terima<br />fungsi getCommand(){ <br />//Bagaimana saya tahu kekunci apa yang ditekan oleh pemain<br />//Terangkan peristiwa apabila kekunci ditekan --->objek acara- --- ->Fungsi pengendalian acara () <br>var code=event.keyCode;//Kod ascii bagi huruf yang sepadan-> Mari kita lihat jadual kod <br>suis(kod){ <br> kes 87://on<br>hero.moveUp(); <br>break; <br>kes 68: <br>hero.moveRight(); <br>kes 83: <br>hero .moveDown(); <br>break; <br>kes 65: <br>hero.moveLeft(); <br>kes 74: <br>hero.shotEnemy(); <br>} <br> //Cetuskan fungsi ini flashTankMap(); <br>flashTankMap(); <br>//Lukis semula semua kereta kebal musuh Anda boleh menulis kod di sini (fikir, mari kita buat fungsi khusus untuk menyegarkan kereta kebal secara tetap Kanvas [kawasan pertempuran]) <br>} <br>//Segarkan kawasan pertempuran setiap 100 milisaat <br>window.setInterval("flashTankMap()",100); ></body> <br></html>tank.js
Salin kod
Kod adalah seperti berikut:
// 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;
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn