Membina permainan pacman dengan bacon.js

Ciri pengaturcaraan asynchronous JavaScript adalah berkat dan kutukan kerana ia menyebabkan "neraka panggil balik". Walaupun perpustakaan utiliti seperti async.js dapat membantu mengatur kod tak segerak, masih sukar untuk mengesan aliran kawalan dengan berkesan dan menyimpulkan logik kod tak segerak.

Artikel ini akan memperkenalkan konsep pengaturcaraan responsif, yang menggunakan perpustakaan seperti bacon.js untuk mengendalikan ciri -ciri asynchronous JavaScript.

mata utama

Pengaturcaraan responsif mengendalikan aliran data tak segerak, membantu menguruskan ciri -ciri asynchronous JavaScript dan mengelakkan "panggil balik neraka". Perpustakaan seperti bacon.js boleh digunakan untuk melaksanakan konsep ini.

bacon.js adalah perpustakaan pengaturcaraan responsif yang boleh digunakan untuk membuat versi permainan PAC Man. Perpustakaan ini membolehkan pengendalian ralat yang lebih baik dan keupayaan untuk menggabungkan aliran data, memberikan kawalan dan fleksibiliti yang hebat.
aliran acara atau objek yang dapat dilihat boleh dibuat dan dimanipulasi dalam bacon.js. Anda boleh melanggan aliran ini untuk memerhatikan peristiwa yang tidak segerak. Ini boleh digunakan untuk mengendalikan input pengguna, logik permainan, dan rendering, sebagai contoh, dalam permainan PAC Man.
bacon.js juga mengandungi bacon.property, harta responsif yang bertindak balas dan mengemas kini dirinya apabila perubahan berlaku. Ini boleh digunakan untuk menguruskan perubahan dalam keadaan permainan.
Mulakan pengaturcaraan responsif

Proses pengaturcaraan responsif aliran data tak segerak. Ia menggantikan mod iterator dengan mod yang boleh dilihat. Ini berbeza dengan pengaturcaraan penting, di mana anda secara aktif melangkah ke atas data untuk memproses urus niaga. Dalam pengaturcaraan responsif, anda melanggan data dan bertindak balas terhadap peristiwa secara tidak segerak.

Bart de Smet menerangkan peralihan ini dalam ucapannya. André Staltz meneroka pengaturcaraan responsif dalam artikel ini.

Apabila anda mula menggunakan pengaturcaraan responsif, semuanya menjadi aliran data tak segerak: pangkalan data pada pelayan, peristiwa tetikus, janji, dan permintaan pelayan. Ini membolehkan anda mengelakkan apa yang disebut "panggil balik neraka" dan memberikan pengendalian ralat yang lebih baik. Satu lagi ciri yang kuat dalam pendekatan ini adalah keupayaan untuk menggabungkan aliran data, yang memberikan anda kawalan dan fleksibiliti yang hebat. Jafar Husain menerangkan konsep -konsep ini dalam ucapannya.

bacon.js adalah perpustakaan pengaturcaraan responsif yang merupakan alternatif kepada RXJS. Di bahagian seterusnya, kami akan menggunakan bacon.js untuk membina versi permainan Pac-Man yang terkenal.

Tetapan Projek

Untuk memasang bacon.js, anda boleh menggunakan Bower untuk menjalankan arahan berikut pada CLI:

Selepas memasang perpustakaan, anda boleh mula menggunakan pengaturcaraan responsif.

$ bower install bacon

pac man game API dan unicodetiles.js

Demi penampilan dan rasa, saya akan menggunakan sistem berasaskan teks supaya saya tidak perlu berurusan dengan sumber dan sprite. Untuk mengelakkan menciptanya sendiri, saya akan menggunakan unicodetiles.js perpustakaan yang hebat.

Pertama, saya mencipta kelas yang dipanggil Pacmangame yang mengendalikan logik permainan. Ia menyediakan kaedah berikut:

• pacmangame (ibu bapa): Buat objek permainan pacman
• mula (): Mulakan permainan
• Tick (): Kemas kini logik permainan dan menjadikan permainan
• spawnghost (warna): menghasilkan hantu baru
• updateGhosts (): Kemas kini setiap hantu dalam permainan
• MovePacman (P1V): Pindahkan Pacman ke arah yang ditentukan

Di samping itu, ia mendedahkan panggilan balik berikut:

• onPacManMove (Movvev): Jika hadir, hubungi
apabila pengguna menekan butang dan meminta Pacman bergerak.

Jadi, untuk menggunakan API ini, kami akan memulakan permainan, panggil Spawnghost secara teratur untuk menjana hantu, dengar untuk panggil balik OnPacmanmove, dan apabila ini berlaku, hubungi MovePacman untuk benar -benar memindahkan Pacman. Kami juga memanggil UpdateGhosts secara teratur untuk mengemas kini pergerakan Ghost. Akhirnya, kami memanggil Tick secara teratur untuk mengemas kini perubahan. Yang penting, kami akan menggunakan bacon.js untuk membantu kami mengendalikan acara.

Sebelum memulakan, mari buat objek permainan:

$ bower install bacon

Kami membuat pacmangame baru dan lulus dalam objek induk ibu bapa ibu bapa, di mana permainan akan diberikan. Sekarang kami bersedia untuk membina permainan kami.

aliran acara atau objek yang boleh dilihat

Event Stream adalah objek yang dapat dilihat yang anda boleh melanggan untuk memerhatikan peristiwa secara tidak segerak. Anda boleh melihat tiga jenis peristiwa ini menggunakan tiga kaedah berikut:

• Observable.onvalue (f): Dengarlah peristiwa nilai, ini adalah cara paling mudah untuk mengendalikan peristiwa.
• Observable.onerror (f): Dengar peristiwa ralat, digunakan untuk mengendalikan kesilapan dalam aliran.
• Observable.onend (F): Dengar untuk peristiwa yang telah berakhir di sungai dan tidak lagi mempunyai nilai bergerak yang tersedia.

Buat aliran

Sekarang kita telah memahami penggunaan asas aliran acara, mari kita lihat bagaimana untuk membuat aliran acara. Bacon.js menyediakan beberapa kaedah yang boleh anda gunakan untuk membuat aliran acara dari acara jQuery, Ajax Promise, Dom EventTarget, Panggilan Mudah, dan juga Array.

Satu lagi konsep berguna mengenai aliran acara adalah konsep masa. Iaitu, peristiwa mungkin datang pada masa akan datang. Sebagai contoh, kaedah ini membuat aliran acara yang melewati peristiwa dalam selang waktu tertentu:

• bacon.interval (selang, nilai): Mengulangi nilai ini tak terhingga pada selang tertentu.
• bacon.Repeatedly (selang, nilai): Ulangi nilai -nilai ini tak terhingga pada selang tertentu.
• bacon.later (kelewatan, nilai): Menjana nilai selepas kelewatan yang diberikan.

Untuk lebih banyak kawalan, anda boleh menggunakan bacon.frombinder () untuk membuat aliran acara anda sendiri. Kami akan menunjukkan ini dalam permainan dengan mewujudkan pembolehubah Movestream yang akan menjana acara untuk gerakan lelaki PAC kami.

var game = new PacmanGame(parentDiv);

kita boleh memanggil tenggelam dengan nilai yang akan menghantar peristiwa yang boleh didengar oleh pemerhati. Panggilan untuk tenggelam adalah dalam panggilan balik OnPacmanMove kami-iaitu, apabila pengguna menekan kekunci dan meminta Pac-Man bergerak. Oleh itu, kami membuat objek yang dapat dilihat yang mengeluarkan peristiwa mengenai permintaan langkah Pac-Man.

Perhatikan bahawa kami memanggil sinki menggunakan nilai mudah MOVEV. Ini akan menggunakan nilai MoveV untuk menolak acara Pindah. Kami juga boleh menolak peristiwa seperti bacon.error atau bacon.end.

Mari buat aliran acara lain. Kali ini kita mahu mengeluarkan pemberitahuan untuk menjana acara hantu. Kami akan membuat pemboleh ubah spawnstream untuk ini:

$ bower install bacon

bacon.sequential () mencipta aliran yang melewati nilai pada selang waktu yang diberikan. Dalam kes kita, ia akan lulus warna hantu setiap 800 milisaat. Kami juga mempunyai panggilan untuk kelewatan () kaedah. Ia menangguhkan aliran, jadi acara akan mula dipancarkan selepas kelewatan 2.5 saat.

kaedah dan rajah marmar pada aliran acara

Dalam bahagian ini, saya akan menyenaraikan beberapa kaedah yang lebih praktikal yang boleh digunakan untuk aliran acara:

• Observable.Map (F): Peta nilai dan kembalikan aliran acara baru.
• Observable.Filter (F): Tapis nilai menggunakan predikat yang diberikan.
• Observable.TakeweHile (F): Mendapat apabila predikat yang diberikan adalah benar.
• Observable.Skip (N): Langkau unsur -unsur N pertama dalam aliran.
• Observable.Throttle (Delay): Menggalakkan aliran melalui kelewatan tertentu.
• Observable.debounce (kelewatan): Mengganggu aliran melalui kelewatan tertentu.
• Observable.Scan (Seed, F) mengimbas aliran dengan nilai benih dan fungsi penumpuk. Ini memudahkan aliran ke satu nilai.

Untuk lebih banyak kaedah untuk streaming acara, sila rujuk halaman dokumentasi rasmi. Anda boleh menggunakan rajah marmar untuk melihat perbezaan antara pendikit dan de-jittering:

var game = new PacmanGame(parentDiv);

Seperti yang anda lihat, pendikit adalah peristiwa-peristiwa yang rutin, sementara de-jittering hanya memancarkan peristiwa selepas "tempoh kesunyian" yang diberikan.

utiliti ini mudah dan berkuasa, mampu mengkonseptualisasikan dan mengawal aliran, dengan itu mengawal data di dalamnya. Saya cadangkan menonton ceramah ini tentang bagaimana Netflix menggunakan kaedah mudah ini untuk membuat kotak autocomplete.

Perhatikan aliran acara

Setakat ini, kami telah mencipta dan memanipulasi aliran acara dan sekarang kami akan memerhatikan peristiwa dengan melanggan aliran.

Mengkaji Movestream dan Spawnstream yang kami buat sebelum ini. Mari kita melanggannya sekarang:

var moveStream = Bacon.fromBinder(function(sink) {
   game.onPacmanMove = function(moveV) {
      sink(moveV);
   };
});

Walaupun anda boleh menggunakan stream.subscribe () untuk melanggan aliran, anda juga boleh menggunakan stream.onvalue (). Perbezaannya ialah melanggan akan memancarkan ketiga -tiga jenis peristiwa yang telah kita lihat sebelum ini, sementara onValue akan memancarkan hanya peristiwa jenis bacon.next. Iaitu, ia akan mengabaikan acara bacon.error dan bacon.end.

Apabila peristiwa muncul di Spawnstream (kemalangan setiap 800 milisaat), nilainya akan menjadi salah satu warna hantu, yang kami gunakan untuk menjana hantu. Apabila peristiwa muncul di Movestream, ingatlah bahawa ini berlaku apabila pengguna menekan kekunci untuk memindahkan lelaki PAC. Kami memanggil Game.Movepacman dengan Arah Movev: ia muncul dengan acara itu, jadi Pacman bergerak.

menggabungkan aliran acara dan bacon.bus

Anda boleh menggabungkan aliran acara untuk membuat aliran lain. Terdapat banyak cara untuk menggabungkan aliran acara, dan di sini terdapat beberapa daripada mereka:

• bacon.comBineAreArray (Streams): pelbagai aliran peristiwa gabungan supaya nilai aliran hasil adalah nilai.
• bacon.zipasArray (Streams): Memampatkan aliran ke dalam aliran baru. Peristiwa setiap aliran digabungkan secara berpasangan.
• bacon.comBinetemplate (template): Gunakan objek templat untuk menggabungkan aliran acara.

mari kita lihat contoh bacon.combinetemplate:

$ bower install bacon

Seperti yang anda lihat, kami menggunakan templat untuk menggabungkan aliran acara (iaitu kata laluan, nama pengguna, nama pertama, dan nama terakhir) ke dalam aliran acara gabungan yang dipanggil Logininfo. Apabila aliran acara menerima acara, LoginInfo Stream memancarkan peristiwa, menggabungkan semua templat lain ke dalam satu objek template.

bacon.js Terdapat juga kaedah menggabungkan sungai, iaitu bacon.bus (). Bacon.bus () adalah aliran acara yang membolehkan anda menolak nilai ke dalam aliran. Ia juga membolehkan aliran lain dimasukkan ke dalam bas. Kami akan menggunakannya untuk membina bahagian terakhir permainan:

var game = new PacmanGame(parentDiv);

Sekarang kita menggunakan bacon.interval untuk membuat aliran lain - Ghoststream. Aliran ini akan memancarkan 0 setiap 1 saat. Kali ini kami melanggannya dan memanggil Game.updateghosts untuk memindahkan hantu. Ini adalah untuk menggerakkan hantu setiap 1 saat. Sila ambil perhatian bahawa permainan.tick telah mengulas dan ingat permainan lain.TICKS di Movestream? Kedua -dua aliran mengemas kini permainan dan akhirnya memanggil permainan.tick untuk menjadikan perubahan, jadi bukannya memanggil permainan.tick dalam setiap aliran, kita boleh menjana aliran ketiga -gabungan kedua -dua aliran ini -dan dalam gabungan panggilan gabungan. aliran.

Untuk menggabungkan aliran, kita boleh menggunakan bacon.bus. Ini adalah aliran akhir peristiwa dalam permainan kami, yang kami panggil CombinedTickStream. Kemudian kami memasukkan Movestream dan Ghoststream ke dalamnya, dan akhirnya melanggannya dan panggil Game.tick di dalamnya.

itu sahaja, kami sudah selesai. Satu -satunya perkara yang tersisa adalah untuk memulakan permainan menggunakan game.start ();.

bacon.property dan lebih banyak contoh

bacon.property adalah harta responsif. Bayangkan bahawa harta responsif adalah jumlah array. Apabila kita menambah elemen ke array, atribut responsif akan bertindak balas dan mengemaskini sendiri. Untuk menggunakan bacon.property, anda boleh melanggannya dan mendengar perubahan, atau menggunakan kaedah property.assign (OBJ, metode), yang memanggil kaedah objek yang diberikan apabila harta itu berubah. Berikut adalah contoh cara menggunakan bacon.property:

var moveStream = Bacon.fromBinder(function(sink) {
   game.onPacmanMove = function(moveV) {
      sink(moveV);
   };
});

Pertama, kami membuat aliran acara yang menghasilkan nilai array yang diberikan pada selang 1 saat -1, 2, 3, dan 4, dan kemudian kami membuat harta responsif yang merupakan hasil imbasan. Ini akan memberikan nilai 1, 3, 6, dan 10 kepada ReactiveValue.

Ketahui lebih banyak maklumat dan demonstrasi masa nyata

Dalam artikel ini, kami memperkenalkan pengaturcaraan responsif menggunakan bacon.js dengan membina permainan PAC Man. Ia memudahkan reka bentuk permainan kami dan memberi kami lebih banyak kawalan dan fleksibiliti melalui konsep streaming acara. Kod sumber lengkap boleh didapati di GitHub, dan demo langsung boleh didapati di sini.

Berikut adalah beberapa pautan yang lebih berguna:

• Bacon.js API Rujukan
• bacon.js video pengenalan
• laman web rxjs
• Highland.js Perpustakaan Streaming Advanced
• "Pengaturcaraan Permainan Responsif untuk Hippies Berhubungan" oleh Bodil Stokke

Soalan Lazim Mengenai Bangunan Pac-Man dengan bacon.js

bagaimana saya mula membina permainan pac lelaki saya sendiri menggunakan bacon.js?

Untuk mula membina permainan Pac Man anda sendiri dengan bacon.js, anda perlu memahami asas -asas JavaScript dan pengaturcaraan responsif fungsional (FRP). Sebaik sahaja anda menguasai pengetahuan ini, anda boleh mula menubuhkan persekitaran pembangunan. Anda perlu memasang Node.js dan NPM (Pengurus Pakej Node) pada komputer anda. Selepas itu, anda boleh memasang bacon.js menggunakan npm. Sebaik sahaja anda mempunyai segala -galanya, anda boleh mula menulis kod permainan. Anda boleh mengikuti tutorial di laman web kami untuk panduan langkah demi langkah mengenai cara membina permainan PAC lelaki menggunakan bacon.js.

Apakah peranan bacon.js dalam membina permainan pac lelaki?

bacon.js adalah perpustakaan pengaturcaraan reaktif berfungsi (FRP) untuk JavaScript. Ia membolehkan anda mengendalikan peristiwa asynchronous seperti input pengguna dengan cara yang lebih mudah diurus dan boleh dibaca. Dalam membina permainan PAC Man, bacon.js boleh digunakan untuk memproses input pengguna (seperti peristiwa papan kekunci), logik permainan (seperti pergerakan Pac Man and Ghost), dan menjadikan keadaan permainan ke skrin.

Bolehkah saya menyesuaikan permainan pac man yang dibina menggunakan bacon.js?

Sudah tentu! Selepas membina permainan Pac Man asas dengan bacon.js, anda boleh menyesuaikannya dengan keinginan anda. Anda boleh mengubah kesan visual permainan, menambah ciri -ciri baru, dan juga mengubah suai peraturan permainan. Kemungkinannya tidak berkesudahan, dan bahagian yang terbaik ialah anda boleh melakukannya semasa masih mendapat manfaat daripada kuasa dan kesederhanaan bacon.js dan pengaturcaraan responsif berfungsi.

bagaimana saya debug permainan pac-man yang dibina menggunakan bacon.js?

Debugging Games Pac-Man yang dibina dengan bacon.js adalah serupa dengan debugging mana-mana aplikasi JavaScript yang lain. Anda boleh menggunakan alat pemaju penyemak imbas untuk menyemak kod, menetapkan titik putus, dan melangkah melalui kod. Di samping itu, bacon.js menyediakan kaedah yang dipanggil "onError" yang boleh anda gunakan untuk mengendalikan kesilapan dalam aliran acara.

Bagaimana saya mengoptimumkan prestasi permainan pac man yang dibina dengan bacon.js?

Terdapat beberapa cara untuk mengoptimumkan prestasi permainan PAC Man yang dibina dengan bacon.js. Salah satu cara adalah untuk meminimumkan bilangan kemas kini DOM. Anda boleh menggunakan fungsi "Combinetemplate" bacon.js untuk mencapai ini dengan menggabungkan pelbagai aliran ke dalam satu aliran yang mengemas kini DOM. Cara lain ialah menggunakan fungsi "Flatmap" untuk mengelakkan membuat aliran yang tidak perlu.

Bolehkah saya membina jenis permainan lain menggunakan bacon.js?

Ya, anda boleh menggunakan bacon.js untuk membina mana -mana jenis permainan yang perlu mengendalikan peristiwa asynchronous. Ini termasuk bukan sahaja permainan arked klasik seperti PAC Man, tetapi juga permainan yang lebih kompleks seperti permainan strategi masa nyata atau permainan dalam talian berbilang pemain.

bagaimana saya menambah fungsi multiplayer ke permainan pac man yang dibina dengan bacon.js?

Menambah ciri multiplayer ke permainan PAC Man yang dibina dengan bacon.js memerlukan pelayan untuk mengendalikan komunikasi antara pemain. Anda boleh menggunakan Node.js dan WebSockets untuk ini. Pada pelanggan, anda akan menggunakan bacon.js untuk mengendalikan mesej WebSocket yang masuk dan keluar.

Bolehkah saya menggunakan permainan pac man yang dibina dengan bacon.js ke laman web saya?

Ya, anda boleh menggunakan permainan PAC Man yang dibina dengan bacon.js ke laman web anda. Anda perlu membungkus kod JavaScript anda dengan alat seperti Webpack atau Browserify, dan kemudian anda boleh menjadi tuan rumah kod dan sumber permainan yang dibundel seperti imej dan bunyi pada pelayan web anda.

Bolehkah saya menggunakan bacon.js dengan perpustakaan atau rangka kerja JavaScript yang lain?

Ya, anda boleh menggunakan bacon.js dengan perpustakaan atau kerangka JavaScript lain. Bacon.js adalah perpustakaan mandiri, jadi ia tidak bergantung kepada perpustakaan atau kerangka lain. Walau bagaimanapun, ia boleh digunakan bersempena dengan perpustakaan atau rangka kerja lain untuk membina aplikasi yang lebih kompleks.

di mana saya boleh mengetahui lebih lanjut mengenai pengaturcaraan reaktif berfungsi (FRP) dan bacon.js?

Terdapat banyak sumber yang tersedia dalam talian untuk mempelajari pengaturcaraan reaktif berfungsi (FRP) dan bacon.js. Anda boleh bermula dengan dokumentasi rasmi Bacon.js, yang menyediakan panduan yang komprehensif untuk keupayaan dan API perpustakaan. Terdapat juga banyak tutorial, jawatan blog, dan kursus dalam talian yang meliputi FRP dan bacon.js dengan lebih terperinci.

Atas ialah kandungan terperinci Membina permainan pacman dengan bacon.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!