Cara Membina Animasi dengan simpleGame. js Permainan HTML5 - dummies

Boleh membuat perpustakaan yang menyederhanakan semua ciri enjin permainan HTML5 yang pelbagai. Pertimbangkan menggunakan perpustakaan: simpleGame. js. Perpustakaan ini mudah digunakan dan mampu sepenuhnya pembangunan permainan canggih. Untuk bermula, anda benar-benar perlu memahami hanya dua objek:

• Adegan: Objek ini bermula dengan objek kanvas HTML dan menambah gelung utama. Adegan itu adalah objek menyatukan yang mengawal permainan.

• Sprites: Objek ini adalah elemen yang bergerak di skrin. Kebanyakan unsur permainan adalah sprites. Setiap sprite mesti tergolong dalam satu adegan, tetapi anda boleh mempunyai banyak sprite yang anda inginkan. Sprit adalah berdasarkan imej.

  

Kod ini sebenarnya jauh lebih canggih daripada kelihatan. Inilah yang ia lakukan:

• Ia menambah kanvas ke halaman. Gelombang kelabu sebenarnya adalah tag kanvas yang telah ditambah secara automatik ke halaman.

• Ia memulakan gelung permainan. Program ini mempunyai gelung permainan yang sudah berjalan pada 20 bingkai sesaat.

• Ia mengandungi sprite. Imej bola adalah sprite, yang mempunyai keupayaan untuk bergerak kelajuan mana-mana arah dan ciri menarik lain seperti pengesanan perlanggaran yang dibina.

• Bola bergerak. Ia secara automatik membalut ke sisi lain skrin apabila ia meninggalkan satu sisi.

Berikut adalah senarai kod keseluruhan:

redBall. html / permainan sederhana dengan adegan bola tunggal bergerak; var bola; fungsi init () {scene = scene baru (); bola = baru Sprite (tempat kejadian, "redBall. png", 50, 50); bola. setMoveAngle (180); bola. setSpeed ​​(3); tempat kejadian. mulakan ();} // kemas kinian fungsi akhir init () {adegan. jelas (); bola. Kemas kini ();} // akhir kemas kini

Anda bermula dengan halaman HTML5 asas dan menambah beberapa ciri untuk menjadikannya persekitaran permainan.

Bagaimana untuk membina halaman permainan anda

Mulailah dengan membina halaman asas:

1. Mulailah dengan halaman HTML5.

   Anda boleh menggunakan alat yang sama yang telah anda gunakan untuk perkembangan web anda yang lain. Bina template HTML5 asas seperti yang anda lakukan untuk mana-mana dokumen HTML5 yang lain.

2. Import simpleGame. js perpustakaan.

   Perpustakaan ini boleh didapati secara percuma dari laman web ini. Gunakan tag untuk mengimport perpustakaan. Tetapkan sifat src kepada nama pustaka (simpleGame. Js).

3. Pastikan HTML mudah.

   Anda tidak perlu banyak. Enjin permainan akan membuat kanvas yang mengandungi tempat kejadian. Anda boleh meletakkan tajuk, arahan, atau alat lain seperti papan skor di halaman, tetapi enjin permainan akan melakukan kebanyakan kerja.

4. Panggil init () apabila beban badan.

   Ia sangat biasa untuk mempunyai fungsi yang dipanggil apabila beban badan. Tambah onload = "init ()" pada tag tubuh untuk memanggil kaedah init ().

5. Buat tag skrip kedua untuk mengandungi kod anda.

   Anda perlu mempunyai tag skrip kedua untuk kod tersuai. Letakkan ini selepas tag yang mengimport perpustakaan.

6. Letakkan dua fungsi dalam skrip anda.

   Semua program simpleGame akan mempunyai sekurang-kurangnya dua fungsi: init () berlaku pada permulaan, dan kemas kini () berlaku sekali setiap bingkai.

Bagaimana untuk memulakan permainan anda

Bahagian permulaan permainan berlaku apabila halaman dimuatkan. Ini terutamanya diambil dengan menubuhkan sprite dan sumber lain. Berikut adalah kod:

var scene; var bola; fungsi init () {scene = scene baru (); bola = baru Sprite (tempat kejadian, "redBall. png", 50, 50); bola. setMoveAngle (180); bola. setSpeed ​​(3);} // end init

Kebanyakan permainan akan menggunakan gaya permulaan yang sama. Berikut adalah cara anda menyediakan permainan:

1. Tetapkan pembolehubah untuk mengandungi tempat kejadian.

   Setiap permainan simpleGame akan mempunyai sekurang-kurangnya satu objek adegan. Tentukan adegan di luar sebarang fungsi, jadi ia boleh didapati untuk kesemua mereka. Anda sebenarnya akan mewujudkan adegan di dalam fungsi init ().

2. Tetapkan pembolehubah untuk setiap sprite.

   Setiap sprite dalam permainan anda perlu juga menjadi pembolehubah global. Anda akan membuat sprite dalam fungsi init (), tetapi anda perlu membuat pembolehubah yang tersedia untuk semua fungsi.

3. Bina fungsi init ().

   Fungsi ini dipanggil oleh onload badan. Ia akan berjalan selepas halaman dimuatkan ke dalam memori.

4. Buat tempat kejadian.

   Untuk membina tempat kejadian, buat contoh kelas adegan. Apa yang anda katakan adalah "Buat saya objek Scene dan panggil adegan ini contoh tertentu." '"Pemandangan tidak memerlukan sebarang parameter.

5. Buat bola bola.

   Bola adalah contoh Sprite. Untuk membuat sprite, anda memerlukan sedikit lagi maklumat. Anda memerlukan pemandangan, nama fail imej, lebar, dan ketinggian.

6. Tetapkan sudut pergerakan bola.

   Anda boleh menukar sudut bola bergerak. Sudut diukur dalam darjah seperti pada peta.

7. Tetapkan kelajuan pergerakan bola.

   Anda juga boleh menentukan kelajuan bola.

8. Mulakan tempat kejadian.

   Apabila anda selesai menetapkan semuanya, beritahu tempat kejadian untuk bermula.

Kemas kini animasi permainan

Selepas anda memulakan tempat kejadian, pemasa akan bermula. Dua puluh kali sesaat, ia akan memanggil fungsi pada halaman anda dipanggil kemas kini (). Jadi, anda perlu mempunyai fungsi sedemikian, dan ia perlu mempunyai beberapa kod untuk permainan anda dijalankan.

Fungsi update () tidak terlalu sukar sama ada.

kemas kini fungsi () {adegan. jelas (); bola. kemas kini ();} // end update

Fungsi update () biasanya melakukan tiga perkara:

• Membersihkan skrin sebelumnya: Urutan pertama perniagaan adalah membersihkan sebarang kekacauan yang disebabkan oleh skrin terakhir. Objek Scene mempunyai fungsi yang jelas () untuk tujuan ini.

• Cek untuk acara: Biasanya, anda menyemak acara, seperti input pengguna, sprit yang menabrak satu sama lain, sprite meninggalkan skrin atau apa sahaja.Untuk animasi mudah ini, satu-satunya acara adalah sprite yang meninggalkan skrin, dan tingkah laku yang berkaitan dengan tindakan ini telah diautomatikasikan.

• Memperbarui setiap sprite: Bahagian akhir kemas kini skrin sedang mengemas kini sprite. Apabila anda mengemas kini sprite, ia akan menarik diri dalam kedudukan barunya.

Inilah yang berlaku jika anda tidak membersihkan skrin. Semua gerakan sprite akan ditarik pada kanvas, dan ia kelihatan seperti smear besar dan bukan bola bergerak.