Membuat permainan Windows 8 yang mudah dengan JavaScript: Input dan Suara

Siri jawatan ini akan menunjukkan kepada anda cara membuat permainan Windows 8 yang mudah, menggunakan HTML5, JavaScript, WinJS, dan CreateJS . Permainan ini didasarkan pada permainan sampel XNA "Lab Wars Catapult". Kami akan menggunakan semula aset dari permainan itu kerana kami membangunkan versi baru untuk Windows 8 yang berdasarkan teknologi web. Dalam siaran ini, kami akan bertindak balas terhadap input pengguna dan membuat perkara sedikit lebih meriah dengan menambah bunyi.

Kunci Takeaways

• Tutorial menunjukkan cara membuat permainan Windows 8 yang mudah menggunakan HTML5, JavaScript, WinJs, dan CreateJS, dengan permainan berdasarkan permainan sampel XNA "Lab Catapult Wars".
• Permainan ini direka untuk bertindak balas terhadap input pengguna dalam pelbagai bentuk seperti tetikus, sentuhan, pen, dan bahkan gerak isyarat, dengan pelaksanaan sistem MSPointer dan MSGESTURE untuk mengesan gerak isyarat seperti TAP dan T-TAP.
• Permainan ini juga menggabungkan kesan bunyi menggunakan elemen audio HTML dan preloadjs untuk memastikan fail bunyi siap apabila permainan bermula, meningkatkan pengalaman permainan.

Mengendalikan Input Pengguna

Sudah tentu terdapat banyak cara kita dapat menembak kerja yang bertujuan-berasaskan rawak, berasaskan masa, berasaskan ketepatan (mis. "Klik ... sekarang!"), Tetapi dalam hal ini kita akan membiarkan pengguna melukis garis yang menunjukkan kedua-dua arah dan kelajuan . Pertama, mari tambahkan pembolehubah baru berhampiran bahagian atas lalai.js: Windows 8 menyokong beberapa cara untuk menarik - tetikus, sentuhan, pen - dan permainan kami perlu cukup fleksibel untuk menyokong mana -mana pengguna.  Nasib baik, sistem MSPointer menggabungkan sokongan untuk semua ini.  Kami akan menggunakan mspointerdown/up untuk memulakan dan menamatkan sasaran, ditambah mspointermove untuk memberikan maklum balas sebagai pengguna menyesuaikan matlamat. Dengan cara ini, terdapat juga sokongan yang hebat melalui MSGESTURE untuk mengesan gerak isyarat seperti TAP, Double Tap, dan lain-lain. Contoh yang baik untuk mengendalikan input dan gerak isyarat adalah sampel "ballineight" pada MSDN. Peristiwa -peristiwa ini digunakan dengan menunjuk kepada fungsi pendengar, yang dipanggil ketika mereka api.  Mari kita jaga itu sekarang, menambah berhampiran bahagian atas fungsi (): Dan sekarang untuk fungsi itu sendiri: tambahkan di mana anda suka, tetapi saya meletakkan antara kemas kini () dan fireshot (): Perhatikan latihan ditinggalkan di sini.  Untuk kesederhanaan, saya tidak menunjukkan teks dengan AIM % dan/atau melukis anak panah yang bertujuan semasa fungsi penyesuaian ().  Teruskan dan cuba tambahnya - dari bahagian -bahagian terdahulu, kami sudah menggunakan teknik yang sama yang anda perlukan. Dan fungsi untuk membantu kita mengira matlamat: Sekali lagi, peraturan kesederhanaan hari ini dan ini hanya untuk Pemain 1, tetapi inilah yang berlaku:

• Lines 239-241-Buat titik baru dari jarak dari titik ke akhir.  Skala ke halaju yang baik untuk memohon setiap bingkai/kemas kini.
• garis 242 & 244 - pastikan x dan y terhad sehingga pukulan tidak hanya hilang dari skrin, terlalu cepat
• Lines 243 & 245 - Pastikan pukulan akan menuju ke musuh ... lebih kurang.

Kami sebelum ini menambah beberapa kod sementara untuk mengemas kini () untuk mempunyai pemain 1 sentiasa api secara rawak.  Sekarang kita boleh menggantikannya untuk menggunakan AIMVector baru: Teruskan dan jalankan permainan ... Sekarang anda boleh menggunakan tetikus, pen, atau sentuhan untuk mengawal pukulan!

"Saya mesti mendengar perkara!" - Menambah bunyi

Tugas kami sebagai permainan dev tidak dilakukan sehingga kami mempunyai bunyi.  Kami telah menambah fail bunyi di Bahagian 2 jadi mari kita ambil langkah seterusnya dengan memuatkannya. Pertama, beberapa pembolehubah dalam lalai.js untuk menjaga perkara yang kemas: Ingat dari Bahagian 2 bahawa kami telah mengikat Preloadjs untuk memastikan sumber kami siap apabila permainan bermula?  Kita boleh menggunakan pendekatan yang sama dengan bunyi, jadi mari kita tambahkannya ke manifes: Untuk menggunakan fail ini, kami akan membuat contoh elemen audio HTML.  Cerita panjang pendek, jika anda hanya membuat satu contoh audio setiap fail bunyi, anda mungkin akan berjalan ke dalam keratan sebagai satu bunyi gagal bermain sebelum permainan terdahulu contohnya selesai.  Terdapat beberapa pendekatan untuk menangani perkara ini (contohnya, lihat "Kawalan Audio dan JavaScript HTML5" ), tetapi kita akan melakukan perkara yang mudah & yang tidak cekap menggunakan satu contoh setiap kali kita memainkan bunyi. Perhatikan, kami tidak akan menggunakan Soundjs (bahagian lain dari CreateJs) dalam contoh ini, tetapi sudah tentu anda dialu -alukan untuk mengambilnya untuk berputar! Tambahkan fungsi penolong (fail) playsound: Itu sahaja!  Sekarang kita hanya memanggilnya, menyatakan yang berterusan menunjuk ke fail yang betul.  Kami akan melakukan ini di beberapa tempat. Pertama, tambahkan panggilan ke Fireshot (): Sekarang, Processhit (): Seperti yang disebutkan oleh komen, anda boleh menggunakan bunyi "hit" dan bukannya "meletup" jika anda ingin mengambil beberapa hits untuk memusnahkan catapult. Dan akhirnya, bermain akhir kemenangan atau kehilangan bunyi di endgame (): Teruskan dan berikannya untuk mencuba sesuatu. permainan di ... dan pada ... dan pada ...

Tahniah!  Anda telah membuat permainan! Kami telah meliputi banyak tanah dalam jawatan ini, tetapi seperti apa -apa, ada

banyak perkara lain untuk dicuba.  Mengapa tidak menikam sebahagian daripada mereka? Pelarasan Skrin - Potret/Landskap, Snapped/Diisi.  Peluang besar untuk belajar mengenai pertanyaan media CSS!

• Meningkatkan sokongan sentuhan/isyarat
• Sprites/Animations - Shot Hit/Miss, Catapult Rundingan/Kebakaran, Catapult Destroyed
• Gameplay Dynamics - Menambah angin, adegan baru, ciri -ciri/peningkatan ciri -ciri baru, pilihan dalam peluru, dan lain -lain
• tambahkan awan gunung dan bergerak ke latar belakang (aset sudah ada)
• tambahkan beberapa kecerdasan ke kecerdasan buatan sekarang
• Pertimbangkan menggunakan jubin hidup - mungkin menunjukkan skor terakhir/tinggi pemain?

Nikmati!  Tidak sabar -sabar untuk mendengar perkara baru yang hebat yang anda tambahkan!

soalan yang sering ditanya mengenai membuat permainan Windows 8 yang mudah dengan JavaScript

Bagaimana saya boleh menambah pergerakan yang lebih kompleks ke watak permainan saya?

Untuk menambah pergerakan yang lebih kompleks ke watak permainan anda, anda boleh menggunakan kaedah 'RequestAnimationFrame'. Kaedah ini membolehkan anda membuat animasi yang lebih lancar dengan memanggil fungsi animasi anda sebelum mengecat semula penyemak imbas. Anda boleh menggunakan kaedah ini untuk mengemas kini kedudukan aksara permainan anda berdasarkan input pengguna atau logik permainan. Sebagai contoh, anda boleh menggunakannya untuk membuat lompat watak apabila pengguna menekan kekunci tertentu.

Bagaimana saya boleh menambah kesan bunyi ke permainan saya?

Menambah kesan bunyi ke permainan anda dapat meningkatkan pengalaman permainan. Anda boleh menggunakan objek 'Audio' di JavaScript untuk memainkan fail bunyi. Untuk memainkan bunyi, anda perlu membuat objek audio baru dan memanggil kaedah 'bermain'. Anda juga boleh mengawal kelantangan, gelung bunyi, dan menghentikan bunyi menggunakan kaedah 'Volume', 'Loop', dan 'Jeda'.

Untuk membuat permainan anda responsif, anda boleh menggunakan sifat 'window.innerwidth' dan 'window.innerheight' dalam JavaScript. Ciri -ciri ini mengembalikan lebar dan ketinggian tetingkap penyemak imbas masing -masing. Anda boleh menggunakan sifat -sifat ini untuk menyesuaikan saiz dan kedudukan elemen permainan anda berdasarkan saiz tetingkap penyemak imbas.

Bagaimana saya boleh menambah fungsi multiplayer ke permainan saya? Permainan anda boleh menjadi agak rumit. Anda perlu menggunakan WebSockets untuk membolehkan komunikasi masa nyata antara pemain. Anda juga perlu mengendalikan isu -isu seperti latensi dan penyegerakan.

Bagaimana saya boleh mengoptimumkan permainan saya untuk prestasi yang lebih baik?

Terdapat beberapa cara untuk mengoptimumkan permainan anda untuk prestasi yang lebih baik. Salah satu cara ialah menggunakan kaedah 'RequestAnimationFrame' untuk animasi anda. Kaedah ini lebih cekap daripada 'setInterval' atau 'setTimeout' kerana ia menjeda animasi apabila pengguna beralih ke tab lain. Cara lain adalah untuk meminimumkan penggunaan pembolehubah dan penutupan global, kerana mereka boleh mengambil banyak ingatan.

Bagaimanakah saya boleh menambah kawalan sentuhan ke permainan saya? Peristiwa -peristiwa ini dipecat apabila pengguna menyentuh skrin, menggerakkan jari mereka, dan mengangkat jari masing -masing. Anda boleh menggunakan acara ini untuk mengawal pergerakan watak permainan anda.

Bagaimana saya boleh menerbitkan permainan saya di kedai Windows? Akaun pemaju Windows Store. Sebaik sahaja anda mempunyai akaun, anda boleh menghantar permainan anda untuk pensijilan. Sekiranya permainan anda melepasi proses pensijilan, ia akan diterbitkan di kedai Windows. , anda perlu menggunakan ruang nama Windows.applicationModel.Store. Ruang nama ini menyediakan kelas dan kaedah yang anda perlukan untuk melaksanakan pembelian dalam aplikasinya. ApplicationModel.UserDataAccounts Namespace. Ruang nama ini menyediakan kelas dan kaedah yang anda perlukan untuk melaksanakan pencapaian.

Bagaimana saya boleh menguji permainan saya pada peranti yang berbeza? . Alat ini membolehkan anda jauh dari debug dan menguji permainan anda pada peranti Windows.

Atas ialah kandungan terperinci Membuat permainan Windows 8 yang mudah dengan JavaScript: Input dan Suara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!