Gunakan HTML5 Canvas untuk mencipta kemahiran tutorial game_html5 melancap mudah

Saya pernah melihat permainan melancap dalam DEMO Donnet sebelum ini, dan kemudian saya menurunkan gambar dan audionya. . . . Saya menulis semula hanya untuk suka-suka. Sekadar hiburan. . . . . . Saya tidak menggunakan rangka kerja, saya menulis semua js sendiri. . . . . . Jadi ini adalah tutorial mudah Ia mungkin berguna kepada mereka yang baru berjinak-jinak dengan kanvas untuk masa yang lama.

Tanpa berlengah lagi, mari kita mulakan dengan DEMO: Permainan Pesawat Terbang Poster asal menulis ini hanya untuk keseronokan, dan tidak berniat untuk menulisnya dalam permainan yang serius.

Mari kita masuk ke topik: Fail permainan melancap termasuk fail entri index.html, fail pemprosesan logik allSprite.js sprite, fail pemprosesan loading.js dan data.js (beberapa data yang dimulakan).

Pertama sekali, permainan biasa pada asasnya memerlukan pemuatan Halaman pemuatan digunakan untuk pramuat data, termasuk imej helaian sprite, audio, dsb. Kerana ini adalah permainan kecil, hanya beberapa audio dan imej yang perlu dimuatkan. Kod pemuatan di dalamnya terutamanya yang berikut adalah untuk membuat animasi memuatkan, jadi saya tidak akan menyiarkannya, lihat sahaja konsol dalam DEMO:

Kod XML/HTMLSalin kandungan ke papan keratan

1. loadImg:function(data){   
2.             var _ini = ini;   
3.              var dataIndex = 0;   
4.             li();   
5.             fungsi li(){   
6.                 jika(data[dataIndex].indexOf("mp3")>=0){   
7.                     var audio = dokumen.createElement("audio");   
8.                     document.body.appendChild(audio);   
9.                     audio.pramuat = "auto";   
10.                     audio.src = data[dataIndex];   
11.                     audio.oncanplaythrough = fungsi(){   >
12.                          ini.oncanplaythrough = null;   
13.                         Indeks data ;   
14.                          jika(Index data===datas.length){   
15.                             _ini.peratus = 100;   
16.                         } lain {   
17.                             _this.percent = parseInt0.   
18.                             li.call(_this);   
19.                         }   
20.                     }   
21.                 }lain {   
22.                     preLoadImg(datas[dataIndex] , function(){   
23.                         Indeks data ;   
24.                          jika(Index data===datas.length){   
25.                             _ini.peratus = 100;   
26.                         } lain {   
27.                             _this.percent = parseInt0.   
28.                             li.call(_this);   
29.                         }   
30.                     })   
31.                 }   
32.             }   
33.         },   
34.   
35. //再贴出preLoadImg的方法   
36. fungsi preLoadImg(src , panggilan balik){   
37.     var img = baharu Imej();   
38.     img.src = src;   
39.     jika(img.complete){   
40.         panggilan balik.panggilan(img);   
41.     }lain {   
42.         img.onload = fungsi(){   
43.             panggilan balik.panggilan(img);   
44.         }   
45.     }   
46. }     

Saya mula-mula menggunakan tatasusunan untuk menyimpan pautan ke fail dalam data.js, dan kemudian menentukan sama ada pautan ini adalah gambar atau audio Jika ia adalah gambar, gunakan preLoadImg untuk memuatkannya adalah sangat mudah, hanya buat gambar baharu, kemudian tetapkan pautan kepadanya, dan panggil semula selepas dimuatkan. Audio dimuatkan dengan menjana objek dom audio HTML5 dan memberikan pautan kepadanya Audio mempunyai acara "canplaythrough". , yang bermaksud bahawa apabila canplaythrough dipanggil, audio telah hampir dimuatkan dan audio seterusnya boleh dimuatkan. Sama seperti ini, selepas semuanya dimuatkan, panggilan balik dibuat dan permainan bermula.

Permainan dimulakan memerlukan banyak objek, jadi saya menyatukannya menjadi satu objek sprite Pergerakan setiap bingkai antara objek yang berbeza boleh ditulis secara berasingan menggunakan gelagat.

Kod XML/HTMLSalin kandungan ke papan keratan

1. W.Sprite = fungsi(nama , pelukis , tingkah laku , args){   
2.     jika(nama !== tidak ditentukan) nama.ini = nama;   
3.     jika(pelukis !== tidak ditentukan) pelukis ini = pelukis;   
4.     ini.top = 0;   
5.     ini.kiri = 0;   
6.     ini.lebar = 0;   
7.     ini.tinggi = 0;   
8.     ini.velocityX = 3;   
9.     ini.halajuY = 2;   
10.     ini.kelihatan = benar;   
11.     ini.animating = palsu;   
12.     ini.tingkah laku = tingkah laku;   
13.     ini.rotateAngle = 0;   
14.     ini.darah = 50;   
15.     ini.fullBlood = 50;   
16.     jika(nama==="pelan"){   
17.         ini.rotateSpeed = 0.05;   
18.         ini.putar Kiri = salah;   
19.         ini.putarkan Kanan = salah;   
20.         ini.api = salah;   
21.         ini.firePerFrame = 10;   
22.         ini.fireLevel = 1;   
23.     }lain jika(nama==="bintang"){   
24.         ini.lebar = Matematik.random()*2;   
25.         ini.kelajuan = 1*ini.lebar/2;   
26.         ini.lightLength = 5;   
27.         this.cacheCanvas = dokumen.createElement("kanvas");   
28.         iniini.cacheCtx = this.cacheCanvas.getContext('2d');   
29.         iniini.cacheCanvas.width = ini.lebar ini.lightLength*2;   
30.         iniini.cacheCanvas.height = ini.lebar ini.lightLength*2;   
31.         this.painter.cache(this);   
32.     }lain jika(nama==="badPlan"){   
33.         ini.badKind = 1;   
34.         ini.kelajuan = 2;   
35.         ini.rotateAngle = Math.PI;   
36.     }lain jika(nama==="missle"){   
37.         ini.lebar = missleWidth;   
38.     }lain jika(nama==="boom"){   
39.         ini.lebar = boomWidth;   
40.     }lain jika(nama==="makanan"){   
41.         ini.lebar = 40;   
42.         ini.kelajuan = 3;   
43.         ini.jenis = "LevelUP"  
44.     }  
45.     ini.ke Kiri = salah;   
46.     ini.toTop = palsu;   
47.     ini.ke Kanan = salah;   
48.     ini.toBottom = palsu;   
49.   
50.     this.outArcRadius = Math.sqrt((this.width/2*this.width/2 )*2);   
51.   
52.     if(args){   
53.         untuk(var arg dalam args){   
54.             ini[arg] = args[arg];   
55.         }   
56.     }   
57. }   
58. Sprite.prototype = {   
59.     pembina:Sprite,   
60.     paint:function(){   
61.         jika(ini.nama==="badPlan"){this.update();}   
62.   
63.         jika(pelukis ini !== tidak ditentukan && ini.kelihatan){   
64.             jika(this.name!=="badPlan") {   
65.                 ini.kemas kini();   
66.             }   
67.              jika(nama.ini==="rancangan"||nama.ini===" missle"||nama.ini==="badPlan"){   
68.                 ctx.save();   
69.                 ctx.translate(ini.kiri , ini.atas);   
70.                 ctx.rotate(this.rotateAngle);   
71.                 ini.pelukis.cat(ini);   
72.                 ctx.restore();   
73.             }lain {   
74.                 ini.pelukis.cat(ini);   
75.             }   
76.         }   
77.     },
78. kemas kini:fungsi(masa){
79. jika(tingkah laku ini){
80. untuk(var i=0;i<ini.tingkah laku.panjang;i ){
81. this.behaviors[i].execute(this,time);
82.                                                                 
                                                              
83. }
84. }

Selepas menulis kelas elf, anda boleh menjana objek berbeza dengan menulis setiap pelukis dan tingkah laku. Langkah seterusnya ialah menulis pelukis Pelukis terbahagi kepada dua jenis, satu pelukis biasa, dan satu lagi pelukis lembaran sprite Kerana animasi letupan dan animasi menembak kapal terbang tidak boleh dilakukan dengan hanya satu gambar, jadi anda perlu menggunakan Masanya. kepada helaian sprite:

Untuk melukis ini, anda perlu menyesuaikan pelukis helaian sprite untuk mereka Berikut adalah pelukis helaian sprite yang paling mudah Mengikut kerumitan permainan, kaedah penulisan helaian sprite boleh diubah suai sehingga ia sesuai , prinsipnya serupa, iaitu Hanya pengubahsuaian kecil:

Kod XML/HTML

Salin kandungan ke papan keratan

1. var SpriteSheetPainter = fungsi(sel){   <🎜
2.             ini.sel = sel || [];   
3.              ini.cellIndex = 0;   
4.         }   
5.         SpriteSheetPainter.prototype = {   
6.             advance:function(){   
7.                  jika(ini.cellIndex === ini.cells.length-1){   
8.                     ini.cellIndex = 0;   
9.                 }   
10.                 lain ini.cellIndex ;   
11.             },   
12.             paint:function(sprite){   
13.                 var sel = ini.sel[this.cellIndex];   
14.                 context.drawImage(spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left , sprite.top , cell.w , cell.h);   
15.             }   
16.         }     

而普通的绘制器就更简单了，直接写一个pelukis，把要画的什么东西都写进去个。

有了精灵类和精灵表绘制器后，我们就可以把星星，飞机，子弹：爆炸对来象整个allSprite.js的代码：

Kod JavaScript

复制内容到剪贴板

1. (fungsi(W){   
2.     "gunakan ketat"  
3.     var planWidth = 24,   
4.         planHeight = 24,   
5.         missleWidth = 70,   
6.         missleHeight = 70,   
7.         lebar lebar = 60;   
8.     //精灵类   
9.     W.Sprite = fungsi(nama , pelukis , tingkah laku , args){   
10.         jika(nama !== tidak ditentukan) ini.name = nama;   
11.         jika(pelukis !== tidak ditentukan) ini.pelukis = pelukis;   
12.         ini.atas = 0;   
13.         ini.kiri = 0;   
14.         ini.lebar = 0;   
15.         ini.tinggi = 0;   
16.         ini.velocityX = 3;   
17.         ini.velocityY = 2;   
18.         ini.kelihatan = benar;   
19.         ini.menghidupkan = palsu;   
20.         ini.tingkah laku = tingkah laku;   
21.         ini.rotateAngle = 0;   
22.         ini.darah = 50;   
23.         ini.fullBlood = 50;   
24.         jika(nama==="pelan"){   
25.              ini.rotateSpeed = 0.05;   
26.              ini.rotateLeft = false;   
27.             ini.rotateRight = salah;   
28.              ini.api = palsu;   
29.             ini.firePerFrame = 10;   
30.             ini.fireLevel = 1;   
31.         }lain jika(nama==="bintang" ){   
32.             ini.width = Math.random()*2;   
33.              ini.kelajuan = 1*ini.lebar/2;   
34.              ini.lightLength = 5;   
35.             ini.cacheCanvas = document.createElement("kanvas");   
36.              ini.cacheCtx = ini.cacheCanvas.getContext2(🎜>'<'' 🎜>);   
37.             ini.cacheCanvas.width = ini.lebar .cacheCanvas.width = ini.lebar
38. <🎜 🎜>.lightLength*2;                 ini.cacheCanvas.height = ini.lebar .cacheCanvas.height = 
39. ini.lebar <🎜 🎜>.lightLength*2;                 ini
.painter.cache(
40. ini);            }lain jika
(nama===
41. "badPlan" ){   
             
42. ini.badKind = 1;   
            
43. ini.kelajuan = 2;   
            
44. ini.rotateAngle = Math.PI;            }lain jika
(nama===
45. "missle" ){   
             
46. ini.width = missleWidth;            }lain jika
(nama===
47. "boom" ){   
            
48. ini<🎜><🎜>.width = boomWidth;   <🎜><🎜> <🎜><🎜>        }lain jika(nama==="makanan"){   
49.             ini.lebar = 40;   
50.             ini.kelajuan = 3;   
51.              ini.jenis = "LevelUP"  
52.         }   
53.         ini.ke Kiri = salah;   
54.         ini.toTop = salah;   
55.         ini.ke Kanan = salah;   
56.         ini.toBottom = palsu;   
57.   
58.         ini.outArcRadius = Math.sqrt((ini.lebar/2*ini.lebar/2)*2);   
59.   
60.         jika(args){   
61.              untuk(var arg dalam arg
62.                 ini[arg] = args[arg];   
63.             }   
64.         }   
65.     }   
66.     Sprite.prototype = {   
67.         pembina:Sprite,   
68.         cat:fungsi(){   
69.              jika(ini.name==="badPlan"<🎜 ){ini.kemas kini();}   
70.   
71.              jika(ini.pelukis !== undefined && (ini
.pelukis !== undefined && 
72. ini><🎜 .kelihatan){                    jika(ini.nama!==
<🎜<>"Rancangan buruk"
73. ) {                        ini
74. .kemas kini();   <🎜> <🎜><🎜>                }  
75.                 jika(ini.name==="rancangan" ||ini.name==="missle"||ini .name==="badPlan"){   
76.                     ctx.save();   
77.                     ctx.translate(ini.kiri , ini.atas);   
78.                     ctx.rotate(ini.rotateAngle);   
79.                     ini.pelukis.cat(ini);   
80.                     ctx.restore();   
81.                 }lain {   
82.                     ini.pelukis.cat(ini);   
83.                 }   
84.             }   
85.         },   
86.         kemas kini:fungsi(masa){   
87.              jika(ini.kelakuan){   
88.                 untuk(var i=0;i<ini 🎜>.kelakuan.panjang;i ){   
89.                     ini.tingkah laku[i].laksanakan(ini,masa);   
90.                 }   
91.             }   
92.         }   
93.     }  
94.   
95.     // 精灵表绘制器   
96.     W.SpriteSheetPainter = Funktion(Zellen , isloop , endCallback , spritesheet){   
97.         dieses.cells = cells || [];   
98.         this.cellIndex = 0;   
99.         this.dateCount = null;   
100.         dieses.isloop = isloop;   
101.         dieses.endCallback = endCallback;   
102.         dieses.spritesheet = spritesheet;   
103.     }   
104.     SpriteSheetPainter.prototype = {   
105.         advance:Funktion(){   
106.             this.cellIndex = this.isloop?(this.cellIndex===this.cells.length-1?0:this.cellIndex 1):(dies.cellIndex 1);   
107.         },   
108.         paint:function(sprite){   
109.             if(this.dateCount===null){   
110.                                 }else {   
111.                 var newd = 
new
112.  Date();                                        
if
113. (tc>40){                         this.advance();   
114.                      dieses.dateCount = newd;   
115.                 }                }  
116.             if(this.cellIndex<this. celles.length || . this.isloop){   
117.                 .cellIndex];                    ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left-sprite.width/ 2 , sprite.top-sprite.width/2 , cell.w , cell.h);                } 
else
118.  if(
this
119. .endCallback) {                    dieses.endCallback.call(sprite);                    
this
120. .cellIndex = 0;                }   
121.         }        }   
122.   
123.     
//特制飞机精灵表绘制器
124.   
125.     W.controllSpriteSheetPainter = 
Funktion
126. (Zellen , Spritesheet){            
dieses
127. .cells = cells || [];            
this
128. .cellIndex = 0;            
this
129. .dateCount = null;   
130.         this.isActive = false;   
131.         this.derection = true;   
132.         dieses.spritesheet = spritesheet;        }  
133.     controllSpriteSheetPainter.prototype = {   
134.         advance:Funktion(){   
135.             if(this.isActive){   
136.                 this.cellIndex ;   
137.                 >.cells.length){                        this.cellIndex = 0;                           
138.                 }                }   
139.         },            paint:function(sprite){   
140.             
if
141. (
this
142. .dateCount===
null
143. ){                       
144.             }else {                    var newd = 
new
145.  Date();                                        
if
146. (tc>sprite.firePerFrame){                        
this
147. .advance();                         dieses.dateCount = newd;   
148.                 }                }                
var
149.  cell = this.cells[
this
150. .cellIndex];                ctx.drawImage(
this
151. .spritesheet , cell.x , cell.y , cell.w , cell.h , -planWidth/2 , -planHeight/ 2 , cell.w , cell.h);            }  
152.     }   
153.   
154.     W.planBehavior = [   
155.         {execute:function(sprite,time){   
156.             if(sprite.toTop){   
157.                 sprite.top = sprite.top
158.             }   
159.             if(sprite.toLeft){   
160.                 sprite.left = sprite.left
161.             }   
162.             if(sprite.toRight){   
163.                 sprite.left = sprite.left>canvas.width-planWidth/2? sprite.left : sprite.left sprite.velocityX;   
164.             }   
165.             if(sprite.toBottom){   
166.                 sprite.top = sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top sprite.velocityY;   
167.             }   
168.             if(sprite.rotateLeft){   
169.                 sprite.rotateAngle -= sprite.rotateSpeed;   
170.             }   
171.             if(sprite.rotateRight){   
172.                 sprite.rotateAngle  = sprite.rotateSpeed;   

Label berkaitan：

canvas html5

sumber：php.cn

Artikel sebelumnya：Kaedah untuk mengesan sokongan pelayar untuk kemahiran tutorial HTML5 dan CSS3_html5 Artikel seterusnya：Pengenalan kepada API untuk memaparkan status bateri dalam kemahiran tutorial HTML5_html5

Kenyataan Laman Web ini

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

Artikel terbaru oleh pengarang

• Apakah itu NullPointerException, dan bagaimana saya membetulkannya?
  2024-10-22 09:46:29
• Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C
  2024-10-13 13:53:41
• Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula
  2024-10-12 12:15:51
• Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu
  2024-10-11 22:47:31
• Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak
  2024-10-11 19:36:51
• Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak
  2024-10-11 15:50:41
• Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula
  2024-10-11 15:07:41
• PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web
  2024-10-11 14:21:21
• Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda
  2024-10-11 12:59:11
• Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula
  2024-10-11 12:17:31

Isu terkini

Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...

daripada 2024-04-06 15:33:12

0

1

433

Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...

daripada 2024-04-05 12:57:00

0

1

456

Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...

daripada 2024-04-02 11:47:56

0

1

275

Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....

daripada 2024-04-01 20:42:38

0

1

259

Topik-topik yang berkaitan

Lagi>

• Apakah kaedah penghasilan penghasilan animasi html5?
• Perbezaan antara HTML dan HTML5
• Perbezaan kelajuan antara usb2.0 dan 3.0
• Bagaimana untuk membaca fail py dalam python
• cip
• css3transition
• Apakah itu Indeks Baidu
• Apakah perbezaan antara mesin demo dan mesin sebenar?