Membuat permainan Windows 8 yang mudah dengan JavaScript: Logik Permainan

Kunci Takeaways

• Loop Game, yang merupakan denyutan jantung dari mana -mana permainan, adalah fungsi yang berjalan banyak kali sesaat dan mempunyai dua pekerjaan utama
• Mengemas kini apa yang sedang berlaku dan menarik adegan baru. Kelas Ticker Easeljs digunakan untuk menguruskan masa gelung permainan, jeda/meneruskan gelung permainan, dan mengukur masa berlalu.
• Logik permainan melibatkan menambah fungsi untuk menembak tembakan, mengemas kini paparan, menggerakkan pukulan, mengendalikan hits, dan mengakhiri permainan. The EaseLjs DisplayObjects menyokong kaedah yang paling hangat (), yang memudahkan untuk melihat apakah titik berada di atas kedudukan objek semasa.

Ini adalah yang ketiga dalam satu siri empat jawatan selama empat minggu yang akan menunjukkan kepada anda bagaimana untuk 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 jawatan ini, kami akan membawa kehidupan dengan beberapa logik permainan dan JavaScript.

Loop Game

Heartbeat dari mana -mana permainan adalah gelung permainan.  Ini fungsi yang berjalan banyak kali sesaat dan mempunyai dua pekerjaan utama - mengemas kini apa yang sedang berlaku kemudian menarik adegan baru. Dalam Bahagian 2, kami sudah meletakkan garis besar di tempatnya: Sekarang persoalannya, bagaimana kita mendapatkan fungsi gameloop () bermula, dan terus berjalan banyak kali sesaat?

kelas ticker Easeljs

Nasib baik, Easeljs mempunyai kelas ticker yang mempunyai beberapa ciri yang akan kami gunakan:

• Menguruskan masa gelung permainan
• jeda/resume gelung permainan
• Ukur masa berlalu

Ia adalah kelas statik, jadi kita boleh mula menggunakannya.  Dalam lalai.js, tambahkan fungsi startgame () baru dan panggilnya pada akhir prepedGame (): Di sini kami memberitahu Ticker untuk menggunakan Window.RequestanimationFrame untuk mengawal seberapa kerap fungsi Gameloop dipanggil. RequestAnimationFrame adalah API yang agak baru untuk aplikasi web yang membantu memastikan kerja tidak dilakukan dengan tidak perlu.  Untuk memahami mengapa ini boleh menjadi lebih baik daripada menetapkan pemasa tetap (mis. Dengan setTimeout ()), lihat sampel RequestAnimationFrame pada tapak pemacu ujian IE. Setiap kali RequestAnimationFrame siap, gelung permainan kami akan berjalan.

"Bersedia, AIM, FIRE!"

Okay, sekarang kami mempunyai permainan dengan gelung permainan yang berjalan, jadi sudah tiba masanya untuk menambah keseronokan! Setiap pemain/catapult akan menembak peluru/batu ke arah yang lain.  Kita perlu tahu sama ada tembakan sedang terbang, siapa yang menghidupkannya, dan bagaimana pukulan bergerak. Pertama, mari kita tambahkan lebih banyak pembolehubah kepada lalai.js: Sekarang mari kita gunakan sebahagian daripada mereka dengan menambahkan yang berikut ke fungsi kemas kini (): Buat masa ini, kedua -dua pemain secara automatik membakar (pada halaju rawak) pada giliran mereka.  Ammobitmap dipindahkan ke pusat atas tembakan tembakan, dan kelembapan tembakan diberikan nilai rawak dalam julat yang dibatasi (diselaraskan untuk resolusi skrin.) Kami juga akan menambah fungsi fireshot () untuk menunjukkan pukulan dan memberitahu permainan yang ada di udara:  

Mengemas kini paparan

Sebelum kita menggerakkan tembakan melalui udara, mari fokus pada separuh ke -2 persamaan gelung permainan - melukis ke skrin.  Ini selalunya sangat kompleks, tetapi peringkat Easeljs menjaga lukisan kandungan kami (semua kanak -kanak - bitmaps, teks, dan lain -lain - kami menambah ke panggung) ke kanvas, jadi ini semua yang kita perlukan: Itu sahaja!  Jika anda menjalankan permainan, Player 1 akan secara automatik dan pukulan akan muncul di atas Catapult Merah ... ... tetapi ia tidak akan berganjak.  Mari kita dapat bergerak.

menggerakkan pukulan

Mari kita kembali ke fungsi kemas kini () dan tambahkan logik ke pernyataan IF (ShotisFlying): Jangan lari lagi, kita masih memerlukan dua fungsi, tetapi inilah yang berlaku:

• garis 149 & 150 - gerakkan pukulan dengan menambahkan halaju (yang mungkin negatif untuk naik dan/atau kiri)
• baris 151 - Guna graviti untuk melambatkan halaju
• garis 153-155-Adakah pukulan memukul tanah atau pergi dari tepi kiri atau kanan skrin?
• garis 157-160-terlepas-tamatkan pemain pukulan dan menukar
• Lines 162-168-Pukulan Pemain 1-Lihat jika ia melanda Player 2. Jika ya, kemas kini kehidupan Pemain 2.
• Lines 169-175-Pukulan Pemain 2-Lihat jika ia melanda Player 1. Jika ya, kemas kini kehidupan Pemain 1.

Mari tambahkan pemeriksaan (bitmap) fungsi: Apa itu perbincangan tentang Hittest?  Easeljs DisplayObjects (di mana bitmap berasaskan) menyokong kaedah yang paling hangat (), yang menjadikannya sangat mudah untuk melihat apakah titik berada di atas kedudukan objek semasa.  Malangnya, kami mensyaratkan objek dan paling hangat hanya berfungsi dengan saiz asal, jadi kami perlu menyemak hits sendiri.  Hanya sedikit matematik dan kami ditetapkan.

mengendalikan hits

Sekarang, tambahkan ProcessHit () fungsi: Ini hanya menamatkan pukulan, mengubah pemain, dan memastikan permainan tidak berakhir.

mengakhiri permainan

Mari kita tamatkan jawatan ini dengan mengakhiri permainan.  Tambahkan fungsi endgame (imej): Itu sahaja!  Sekarang anda boleh menjalankan permainan dan melihat siapa yang menang.

Apa yang akan datang?

Kami telah menambah banyak di bahagian ini - perkara -perkara yang melukis, bergerak, memukul, berakhir ... tetapi terdapat dua lubang ternganga.  Pertama, pemain sebenarnya tidak bermain, jadi kami akan menambah pemprosesan input seterusnya.  Kedua, perkara -perkara yang sangat tenang, terutamanya untuk perang, jadi kami akan melemparkan beberapa bunyi juga. Ke Bahagian 4: Minggu depan!

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

Bagaimana saya boleh mula membuat permainan dengan JavaScript untuk Windows 8?

Untuk mula membuat permainan dengan JavaScript untuk Windows 8, anda perlu mempunyai pemahaman asas tentang JavaScript dan HTML5. Anda juga perlu memasang Visual Studio, yang merupakan persekitaran pembangunan untuk aplikasi Windows 8. Sebaik sahaja anda mempunyai prasyarat ini, anda boleh mulakan dengan membuat projek baru di Visual Studio dan memilih template "Blank App". Dari sana, anda boleh mula menulis logik permainan anda di JavaScript dan mereka bentuk antara muka permainan anda dengan HTML5 dan CSS. Bahasa pengaturcaraan yang boleh digunakan untuk membuat pelbagai permainan. Beberapa contoh termasuk permainan teka -teki, permainan strategi, platformer, dan juga permainan 3D. Kemungkinannya tidak berkesudahan, dan dengan alat dan sumber yang betul, anda boleh membuat apa -apa jenis permainan yang boleh anda bayangkan.

Bagaimana saya boleh menambah interaktiviti ke permainan JavaScript saya?

Interaktiviti dalam permainan JavaScript boleh dicapai melalui pengendali acara. Ini adalah fungsi yang dicetuskan apabila peristiwa tertentu berlaku, seperti klik tetikus atau akhbar utama. Sebagai contoh, anda boleh menggunakan acara 'onclick' untuk mencetuskan fungsi apabila pengguna mengklik pada elemen permainan, atau acara 'onkeydown' untuk memindahkan watak apabila pengguna menekan kekunci. Ujian dan debug permainan JavaScript saya?

Ujian dan penyahpepijatan adalah bahagian penting dalam pembangunan permainan. Visual Studio menyediakan alat debugging yang kuat yang membolehkan anda melangkah melalui kod anda, memeriksa pembolehubah, dan mengenal pasti sebarang kesilapan atau pepijat. Anda juga boleh menggunakan konsol untuk log mesej dan menjejaki pelaksanaan kod anda.

Bagaimana saya boleh mengoptimumkan permainan JavaScript saya untuk prestasi? . Ini termasuk meminimumkan penggunaan pembolehubah global, menggunakan RequestAnimationFrame untuk gelung permainan, mengoptimumkan imej dan aset anda, dan menggunakan algoritma yang cekap untuk logik permainan. Ia juga penting untuk menguji permainan anda pada pelbagai peranti dan penyemak imbas untuk memastikan ia berjalan lancar. ke permainan JavaScript menggunakan API audio HTML5. Ini membolehkan anda memuatkan dan memainkan fail bunyi, mengawal kelantangan, dan juga membuat kesan bunyi. Anda juga boleh menggunakan perpustakaan seperti Howler.js untuk memudahkan proses dan menambah ciri audio yang lebih maju.

Bagaimana saya boleh menerbitkan permainan JavaScript saya di kedai Windows? Permainan anda, anda boleh menerbitkannya di kedai Windows dengan membuat akaun kedai, mendaftarkan aplikasi anda, dan menyerahkannya untuk pensijilan. Anda perlu menyediakan tangkapan skrin, keterangan, dan maklumat lain mengenai permainan anda. Sebaik sahaja permainan anda diluluskan, ia akan tersedia untuk dimuat turun di kedai Windows.

Bolehkah saya mengewangkan permainan JavaScript saya? Satu pilihan ialah menjual permainan anda di kedai Windows. Anda juga boleh memasukkan pembelian dalam aplikasinya, di mana pemain boleh membeli kandungan atau ciri tambahan. Pilihan lain adalah untuk memaparkan iklan dalam permainan anda, walaupun ini harus dilakukan dengan berhati -hati untuk mengelakkan mengganggu pengalaman permainan. Tidak terhad kepada Windows 8 atau mana -mana platform tertentu. Dengan alat dan perpustakaan yang betul, anda boleh membuat permainan yang berjalan pada pelbagai platform, termasuk pelayar web, peranti mudah alih, dan juga konsol permainan. Beberapa perpustakaan yang popular untuk pembangunan permainan silang platform dengan JavaScript termasuk phaser, pixi.js, dan tiga.js.

di mana saya boleh mengetahui lebih lanjut mengenai perkembangan permainan dengan JavaScript?

Terdapat banyak sumber yang tersedia dalam talian untuk belajar tentang perkembangan permainan dengan JavaScript. Laman web seperti W3Schools, Rangkaian Pemaju Mozilla, dan CodeCademy menawarkan tutorial dan panduan mengenai pembangunan JavaScript dan permainan. Terdapat juga banyak buku, kursus dalam talian, dan forum di mana anda boleh belajar dan mendapatkan bantuan daripada pemaju lain.

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