Membina Klon Skribbl.io: Dari Konsep hingga Selesai

Mencipta permainan berbilang pemain masa nyata seperti Skribbl.io ialah cabaran menarik yang menggabungkan pelbagai aspek pembangunan web. Dalam artikel ini, saya akan bercakap tentang pelaksanaan dan pemikiran saya dalam membina klon masa nyata bagaimana anda boleh mengendalikan permainan yang berasaskan bulat dan sistem pemasa

Jika anda ingin menyemak kod sumber untuk projek, anda boleh menemuinya di sini Github

Timbunan Teknologi

Sebelum menyelami butirannya, mari kita lihat secara ringkas susunan teknologi yang digunakan untuk projek ini:

• Node.js: Untuk pelayan hujung belakang.
• Socket.IO: Untuk komunikasi masa nyata.
• Redis: Untuk pengendalian data yang cekap.
• Vite: Untuk pembangunan pantas dengan React.
• Skrip Jenis: Untuk keselamatan taip di bahagian hadapan dan belakang.
• React: Untuk membina antara muka pengguna.
• Docker: Untuk kontena aplikasi.

Menyediakan Bahagian Belakang

Halaman belakang dikuasakan oleh Node.js dan Socket.IO, yang sesuai untuk mengendalikan interaksi masa nyata. Berikut ialah gambaran keseluruhan ringkas komponen utama:

1. WebSockets untuk Komunikasi Masa Nyata

Socket.IO membolehkan komunikasi lancar antara pelayan dan pelanggan. Kami menggunakannya untuk mengendalikan acara seperti pemain menyertai bilik, memulakan permainan dan menghantar data lukisan.

2. Sistem Bilik

Setiap permainan dihoskan dalam bilik unik, yang dikenal pasti melalui ID bilik. Pemain menyertai bilik menggunakan ID ini dan berinteraksi dengan orang lain dalam bilik yang sama. Sistem ini juga mengendalikan sambungan pemain dan pemutusan sambungan.

Tetapi di sini kami menghadapi masalah bagaimana kami boleh memastikan pelayan kami mengekalkan data yang ada dalam permainan jika pelayan itu pernah ranap

Di sini kami menggunakan pangkalan data yang pantas dan juga badan yang berasingan daripada pelayan

Redis ialah pilihan yang bagus untuk jenis bekas penggunaan sedemikian. Ia adalah pangkalan data dalam memori yang pantas dan boleh dijalankan secara berasingan pada pelayan yang berbeza

Kita akan bercakap tentang perkara itu lebih lanjut dalam siaran nanti.

3. Pengendalian Acara

Pelayan mendengar dan mengeluarkan pelbagai acara:

• Acara Pelanggan: sambung, putuskan sambungan, joinRoom, leaveRoom, startGame, cabutan, teka, tukarSettings, wordSelect
• Acara Pelayan: joinedRoom, playerJoined, playerLeft, gameStarted, gameEnded, drawData, guessed, turnEnded, chooseWord, wordChosen, settingsChanged, guessFail

Membangunkan Frontend

Untuk bahagian hadapan, saya menggunakan React dengan TypeScript dan Vite untuk pengalaman pembangunan yang lancar.

1. Membina UI

Antara muka pengguna termasuk komponen untuk melukis, meneka dan mengurus tetapan permainan. Seni bina berasaskan komponen React memudahkan untuk mencipta UI yang dinamik dan responsif.

2. Mengendalikan Keadaan Permainan

Halaman hadapan mengurus keadaan permainan, termasuk markah pemain, giliran semasa dan data lukisan. TypeScript memastikan bahawa struktur data ditakrifkan dengan baik dan bebas ralat.

3. Kemas Kini Masa Nyata

Menggunakan Socket.IO, bahagian hadapan mengemas kini dalam masa nyata berdasarkan acara pelayan. Contohnya, apabila pemain melukis, data lukisan dihantar kepada semua pelanggan di dalam bilik.

Permainan Pengurusan Negeri

Pengurusan keadaan permainan yang berkesan adalah penting untuk memastikan pengalaman yang lancar dan menyeronokkan dalam permainan berbilang pemain masa nyata seperti Skribbl.io. Berikut ialah pandangan terperinci tentang cara pelbagai aspek keadaan permainan diurus:

Pemain Menyertai dan Keluar

Mengurus pemain menyertai dan meninggalkan bilik melibatkan beberapa langkah penting:

• Menyertai:

  1. Emisi Acara: Apabila pemain ingin menyertai bilik, mereka menghantar acara joinRoom dengan ID bilik ke pelayan.
  2. Pengesahan: Pelayan mengesahkan ID bilik dan menyemak sama ada bilik itu wujud.
  3. Penambahan Pemain: Jika sah, pemain ditambahkan pada senarai pemain bilik. Pelayan kemudiannya mengemas kini keadaan permainan dan memancarkan acara PlayerJoined kepada semua pelanggan di dalam bilik, memaklumkan mereka tentang ketibaan pemain baharu.
  4. Kemas Kini UI: Pada bahagian hadapan, kehadiran pemain baharu ditunjukkan dalam senarai pemain bilik, memastikan semua orang melihat senarai pemain terkini.

• Meninggalkan:

  1. Emisi Acara: Apabila pemain memutuskan untuk keluar, mereka menghantar acara leaveRoom ke pelayan.
  2. Penyingkiran Pemain: Pelayan mengalih keluar pemain daripada senarai pemain bilik dan mengemas kini keadaan permainan dengan sewajarnya.
  3. Pemberitahuan: Pelayan memancarkan acara PlayerLeft kepada semua pelanggan yang tinggal, memberitahu mereka bahawa pemain telah meninggalkan bilik.
  4. Kemas Kini UI: Bahagian hadapan menggambarkan perubahan ini dengan mengalih keluar pemain daripada senarai pemain dan melaraskan mana-mana mekanik permainan yang sedang berjalan jika perlu.

Pemilihan Perkataan

Memilih perkataan dan mengurus giliran siapa untuk memilih melibatkan beberapa mekanisme:

• Pusingan Pemain Semasa:
  1. Pengurusan Giliran: Pelayan mengekalkan rekod giliran siapa untuk memilih perkataan. Ini diurus oleh keadaan permainan, yang termasuk sifat yang menunjukkan ID pemain semasa.
  2. Gesaan Pemilihan Perkataan: Apabila tiba giliran pemain untuk memilih perkataan, mereka menerima acara chooseWord daripada pelayan, menggesa mereka memilih perkataan.

• Mencegah Kebocoran Perkataan:

  1. Akses Giliran Terhad: Perkataan yang dipilih tidak segera disiarkan kepada pemain lain. Sebaliknya, ia hanya dikongsi apabila tiba giliran laci, untuk mengelakkan sebarang kelebihan yang tidak adil.
  2. Emisi Acara: Setelah laci telah memilih perkataan, pelayan memancarkan acara wordChosen kepada semua pemain. Acara ini termasuk pemberitahuan bahawa perkataan itu telah dipilih dan sedia untuk meneka.

• Pemberitahuan Pemilihan Perkataan:

  1. Siaran: Acara wordChosen termasuk pemberitahuan bahawa perkataan telah dipilih, yang dihantar kepada semua pemain dalam bilik.
  2. Pengendalian Depan: Di sisi pelanggan, pemain dikemas kini untuk menunjukkan bahawa fasa lukisan telah bermula, dan mereka kini boleh mula meneka.

Mengendalikan Tamat Masa untuk Pemilihan Perkataan

Untuk mengendalikan kes di mana pemain semasa mungkin menangguhkan pemilihan perkataan:

• Tugasan Automatik:
  1. Mekanisme Tamat Masa: Pelayan melaksanakan pemasa yang bermula apabila giliran pemain untuk memilih perkataan. Jika pemain tidak memilih perkataan dalam masa yang diperuntukkan, acara tamat masa akan dicetuskan.
  2. Tugasan Perkataan: Pelayan secara automatik memilih perkataan daripada senarai yang dipratentukan dan memberikannya kepada pemain. Ini memastikan permainan diteruskan tanpa kelewatan yang tidak perlu.
  3. Pemberitahuan: Acara wordChosen kemudiannya dipancarkan untuk memberitahu semua pemain bahawa satu perkataan telah ditetapkan dan fasa lukisan sedang bermula.

Melukis Pengendalian Data

Mengendalikan data lukisan adalah penting untuk mengekalkan penyegerakan antara pemain:

• Lukisan Masa Nyata:
  1. Acara Lukisan: Pemain menghantar data lukisan ke pelayan menggunakan acara seri. Data ini termasuk warna berus, jejari dan koordinat titik yang dilukis.
  2. Penyiaran: Pelayan menerima data ini dan menyiarkannya kepada semua pelanggan di dalam bilik menggunakan acara drawData. Ini memastikan bahawa setiap kanvas pemain dikemas kini dalam masa nyata dengan maklumat lukisan terkini.

Mengendalikan Acara Teka Pemain

Mengurus tekaan pemain melibatkan pemprosesan dan pengesahan setiap tekaan:

• Teka Penyerahan:

  1. Pengendalian Acara: Apabila pemain membuat tekaan, mereka menghantar acara tekaan ke pelayan dengan kata tekaan mereka.
  2. Pengesahan: Pelayan memproses tekaan, menyemaknya dengan perkataan yang betul. Jika tekaan itu betul, pelayan mengemas kini keadaan permainan dan markah pemain.

• Hasil Penyiaran:

  1. Keputusan Teka: Pelayan mengeluarkan acara yang telah diteka kepada semua pemain, menunjukkan sama ada tekaan itu betul atau tidak.
  2. Kemas Kini UI: Pada bahagian hadapan, keputusan dipaparkan kepada semua pemain, menunjukkan siapa yang meneka dengan betul dan mengemas kini kemajuan permainan.

Tamat masa untuk Melukis dan Meneka

Menguruskan kekangan masa adalah kunci untuk memastikan permainan menarik:

• Masa Cabutan Berakhir:
  1. Pengurusan Masa: Setiap pusingan mempunyai had masa yang ditetapkan untuk melukis. Pelayan menjejak masa ini dan mencetuskan acara TurnEnded apabila masa tamat.
  2. Peralihan: Acara ini menandakan tamatnya fasa lukisan dan permainan beralih ke fasa meneka atau pusingan seterusnya.

• Semua Pemain Ditebak:
  1. Teka Selesai: Jika semua pemain meneka perkataan sebelum masa tamat, pelayan akan mencetuskan acara TurnEnded lebih awal.
  2. Aliran Permainan: Acara ini mengemas kini semua pelanggan bahawa fasa meneka telah selesai dan mengalihkan permainan ke fasa atau pusingan seterusnya.

Pendekatan untuk mengurus keadaan permainan ini memastikan pengalaman yang lancar, interaktif dan adil untuk semua pemain, meningkatkan keseronokan keseluruhan permainan.

Kesimpulan

Membina klon Skribbl.io melibatkan interaksi kompleks komunikasi masa nyata, pengurusan keadaan permainan dan interaksi pengguna. Melalui projek ini, kami telah meneroka pelbagai aspek pembangunan permainan, daripada mengendalikan sambungan pemain dan pemilihan perkataan kepada mengurus data lukisan dan tekaan pemain.

Pengambilan Utama

• Komunikasi Masa Nyata: Memanfaatkan Socket.IO membolehkan permainan yang lancar dan interaktif, memastikan semua pemain kekal disegerakkan.
• Pengurusan Negeri: Pengendalian keadaan permainan yang cekap—seperti penyertaan pemain, pemilihan perkataan dan data lukisan—adalah penting untuk pengalaman pengguna yang lancar. Melaksanakan tamat masa dan tugasan automatik memastikan permainan berjalan tanpa gangguan.
• Pengalaman Pengguna: Mengekalkan antara muka yang menarik dan responsif meningkatkan kepuasan pemain. Maklum balas yang jelas tentang tindakan seperti melukis dan meneka, digabungkan dengan kemas kini tepat pada masanya, memastikan pemain mendapat maklumat dan melabur dalam permainan.

Langkah Seterusnya

Jika anda mendapat inspirasi untuk meneruskan projek ini, pertimbangkan:

• Menambah Ciri Baharu: Laksanakan mod permainan tambahan, penyesuaian atau peningkatan untuk menjadikan permainan lebih dinamik.
• Mengoptimumkan Prestasi: Teroka cara untuk meningkatkan prestasi, seperti mengoptimumkan penghantaran data lukisan atau mengurangkan kependaman.
• Meningkatkan UI/UX: Perhalusi antara muka dan pengalaman pengguna berdasarkan maklum balas pemain untuk menjadikan permainan lebih menyeronokkan.

Projek ini telah menjadi satu perjalanan yang menarik ke dalam pembangunan permainan masa nyata, menggabungkan pelbagai teknologi dan teknik untuk mencipta pengalaman berbilang pemain yang menyeronokkan dan menarik. Saya harap artikel ini telah memberikan cerapan berharga tentang pengurusan keadaan permainan dan memberi inspirasi kepada anda untuk meneroka lebih banyak dalam dunia pembangunan permainan.

Jangan ragu untuk berkongsi pendapat, soalan atau penambahbaikan anda tentang projek ini dalam ulasan di bawah. Selamat mengekod!

Atas ialah kandungan terperinci Membina Klon Skribbl.io: Dari Konsep hingga Selesai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!