Bagaimana Membangun Animasi dengan simpleGame. js HTML5 Game - dummies

Mungkin untuk membangun sebuah perpustakaan yang menyederhanakan semua fitur mesin permainan HTML5. Pertimbangkan untuk menggunakan perpustakaan: simpleGame. js. Perpustakaan ini mudah digunakan dan sepenuhnya mampu pengembangan game yang canggih. Untuk memulai, Anda benar-benar perlu memahami hanya dua objek:

• Adegan: Objek ini dimulai dengan objek kanvas HTML dan menambahkan lingkaran utama. Adegan adalah objek pemersatu yang mengendalikan permainan.

• Sprite: Objek ini adalah elemen yang bergerak di sekitar layar. Sebagian besar elemen permainan adalah sprite. Setiap sprite harus termasuk dalam satu adegan tunggal, tapi Anda bisa memiliki sprite sebanyak yang Anda mau. Sprite didasarkan pada gambar.

  

Kode ini sebenarnya jauh lebih canggih dari tampilannya. Inilah yang terjadi:

• Ini menambahkan kanvas ke halaman. Kotak abu-abu sebenarnya adalah tag kanvas yang telah ditambahkan secara otomatis ke halaman.

• Ini memulai sebuah lingkaran permainan. Program ini memiliki loop permainan yang sudah berjalan pada 20 frame per detik.

• berisi sprite Gambar bola adalah sprite, yang memiliki kemampuan untuk menggerakkan kecepatan ke segala arah dan fitur menarik lainnya seperti deteksi tabrakan yang terpasang.

• Bola sedang bergerak. Ini secara otomatis membungkus sisi lain layar saat meninggalkan satu sisi.

Inilah keseluruhan daftar kode:

redBall. html // permainan sederhana dengan adegan var bola yang bergerak; bola var; fungsi init () {scene = new Scene (); bola = Sprite baru (adegan, "redBall. png", 50, 50); bola. setMoveAngle (180); bola. setSpeed ​​(3); tempat kejadian. start ();} // akhirin fungsi init update () {scene. bersih(); bola. update ();} // end update

Anda memulai dengan halaman HTML5 dasar dan menambahkan beberapa fitur untuk mengubahnya menjadi lingkungan game.

Cara membuat halaman permainan Anda

Mulailah dengan membangun halaman yang mendasari:

1. Mulailah dengan halaman HTML5.

   Anda dapat menggunakan alat yang sama dengan yang Anda gunakan untuk pengembangan web lainnya. Buat template HTML5 dasar seperti yang Anda lakukan untuk dokumen HTML5 lainnya.

2. Impor simpleGame. perpustakaan js

   Perpustakaan ini tersedia secara gratis dari situs web. Gunakan tag untuk mengimpor perpustakaan. Setel properti src ke nama perpustakaan (simpleGame.js).

3. Jaga agar HTML tetap sederhana.

   Anda tidak perlu banyak. Mesin permainan akan membuat kanvas yang berisi adegan. Anda bisa memasang judul, instruksi, atau alat lainnya seperti papan skor di halaman, namun mesin permainan akan melakukan sebagian besar pekerjaan.

4. Panggil init () saat tubuh dimuat.

   Sangat umum untuk memiliki fungsi yang disebut saat beban tubuh. Tambahkan onload = "init ()" ke tag body untuk memanggil metode init ().

5. Buat tag skrip kedua untuk memuat kode Anda.

   Anda harus memiliki tag skrip kedua untuk kode ubahsuaian. Tempatkan ini setelah tag yang mengimpor perpustakaan.

6. Tempatkan dua fungsi dalam naskah Anda.

   Semua program simpleGame akan memiliki setidaknya dua fungsi: init () terjadi saat startup, dan update () terjadi satu kali per frame.

Cara menginisialisasi permainan Anda

Bagian inisialisasi permainan terjadi saat halaman dimuat. Ini terutama diambil dengan menyiapkan sprite dan sumber lainnya. Inilah kodenya:

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

Kebanyakan game akan menggunakan gaya inisialisasi yang sama. Beginilah cara Anda mengatur permainan:

1. Tentukan sebuah variabel yang berisi adegan itu.

   Setiap permainan SimpleGame akan memiliki setidaknya satu objek adegan. Tentukan adegan di luar fungsi apapun, jadi tersedia untuk semuanya. Anda benar-benar akan membuat adegan di dalam fungsi init ().

2. Tentukan sebuah variabel untuk setiap sprite.

   Setiap sprite dalam permainan Anda juga harus termasuk dalam variabel global. Anda akan membuat sprite di fungsi init (), namun Anda harus membuat variabel tersedia untuk semua fungsi.

3. Bangun fungsi init ().

   Fungsi ini disebut dengan body onload. Ini akan berjalan setelah halaman dimuat ke memori.

4. Buat adegan

   Untuk membangun adegan, buat sebuah instance dari kelas adegan. Apa yang sebenarnya Anda katakan adalah "Buat saya objek Scene dan panggil contoh kejadian ini '. '"Adegan tidak memerlukan parameter apapun.

5. Buat bola sprite.

   Bola adalah contoh Sprite. Untuk membuat sprite, Anda membutuhkan beberapa informasi lagi. Anda butuh adegan, nama file gambar, lebar, dan tinggi.

6. Atur sudut gerakan bola.

   Anda dapat mengubah sudut gerakan bola. Sudut diukur dalam derajat seperti pada peta.

7. Atur kecepatan gerakan bola.

   Anda juga bisa menentukan kecepatan bola.

8. Mulai TKP.

   Setelah selesai mengatur semuanya, katakan pada TKP untuk memulai.

Perbarui animasi game

Setelah memulai adegan, sebuah timer akan dimulai. Dua puluh kali per detik, ini akan memanggil fungsi di halaman Anda yang disebut update (). Jadi, Anda harus memiliki fungsi seperti itu, dan perlu ada beberapa kode untuk permainan Anda berjalan.

Fungsi update () juga tidak terlalu sulit.

update fungsi () {scene. bersih(); bola. update ();} // end update

Fungsi update () biasanya melakukan tiga hal:

• Menghapus layar sebelumnya: Urutan pertama bisnis adalah membersihkan kekacauan yang disebabkan oleh layar terakhir. Objek Scene memiliki fungsi clear () untuk tujuan ini.

• Memeriksa kejadian: Biasanya, Anda memeriksa kejadian, seperti masukan pengguna, sprite saling menabrak, sprite meninggalkan layar, atau apa pun.Untuk animasi sederhana ini, satu-satunya acara adalah sprite yang meninggalkan layar, dan perilaku yang terkait dengan tindakan ini telah otomatis.

• Pembaruan setiap sprite: Bagian terakhir dari pembaruan layar memperbarui sprite. Saat Anda memperbarui sprite, itu akan menarik posisi barunya.

Inilah yang terjadi jika Anda tidak menghapus layar. Semua gerakan sprite akan digambar di kanvas, dan itu terlihat seperti noda besar daripada bola yang bergerak.