Saya membuat jenis permainan visual visual yang sangat mendasar dalam JavaScript. Saya seorang pemula, jadi saya hanya melakukan ini untuk bersenang-senang dan belajar, dan karena perencanaan yang buruk saya telah mengalami sedikit masalah ketika Anda sampai ke cabang dalam dialog.
Saat ini saya memegang script untuk game dalam variabel string dan saya memecah setiap adegan dengan tag seperti "# ~" menjadi array yang lebih kecil sehingga script game terlihat seperti ini:
var script = "Hello World!#~How are you today?"
var gameText = script.split("#~");
//gameText[0]= Hello World!
Ini berfungsi baik untuk hal-hal linier, tetapi bagaimana saya harus menangani cabang di pohon dialog? Metode ini tampaknya sangat rumit, karena saya harus tahu persis berapa lama setiap jalur dan kemudian jika saya perlu mengubah apa pun itu akan menjadi sakit kepala.
Bagaimana saya bisa melakukan ini dengan cara yang lebih sederhana? Saya mencoba untuk tetap menggunakan vanilla JavaScript karena saya ingin game bekerja dengan Web Run Time.
sumber
Jawaban:
Jawaban Philipp sudah menunjukkan arah yang benar. Saya hanya berpikir struktur data tidak perlu bertele-tele. Teks yang lebih pendek akan lebih mudah untuk ditulis dan dibaca.
Sekalipun teks yang lebih pendek akan membuat algoritme sedikit lebih rumit, itu layak dilakukan, karena Anda hanya menulis algoritme satu kali, tetapi sebagian besar waktu Anda akan dihabiskan untuk menulis dan memelihara cerita. Karena itu optimalkan untuk mempermudah bagian yang paling Anda habiskan.
Beberapa penjelasan untuk desain ini:
Seluruh cerita ditulis dalam satu larik. Anda tidak harus memberikan angka, angka itu diberikan secara otomatis oleh sintaks array: item pertama memiliki indeks 0, item berikutnya memiliki indeks 1, dll.
Dalam kebanyakan kasus, tidak perlu menulis nomor langkah berikut. Saya berasumsi bahwa sebagian besar baris teks bukan cabang. Mari kita membuat "langkah selanjutnya adalah item berikut" sebagai asumsi default, dan hanya membuat catatan ketika sebaliknya.
Untuk lompatan, gunakan label , bukan angka. Kemudian, jika nanti Anda menambahkan atau menghapus beberapa baris, logika cerita akan dipertahankan, dan Anda tidak harus menyesuaikan angka.
Temukan kompromi yang masuk akal antara kejelasan dan kekurangan. Sebagai contoh, saya menyarankan untuk menulis "m" daripada "message", karena itu akan menjadi perintah yang paling sering digunakan, jadi membuatnya singkat akan membuat teks lebih terbaca. Tetapi tidak perlu mempersingkat kata kunci yang tersisa. (Namun, lakukan seperti yang Anda inginkan. Yang penting adalah membuatnya menjadi terbaca untuk Anda . Atau, Anda dapat mendukung "m" dan "pesan" sebagai kata kunci yang valid.)
Algoritma untuk gim harus seperti ini:
Ngomong-ngomong, ide-ide ini terinspirasi oleh Ren'Py , yang tidak persis seperti yang Anda inginkan (bukan JavaScript, bukan web), tetapi tetap dapat memberi Anda beberapa ide keren.
sumber
({ label: "like_yes"; m: "I am happy you like my game!"; next: "like_end" },)
harus memiliki ',' bukan ';'. Juga apa tepatnya yang disebut dalam kurung kurawal? Apakah itu objek dalam array? jika saya ingin info lebih lanjut tentang cara menggunakan ini apa yang akan saya cari?{...}
adalah sebuah objek. Dalam JavaScript, objek adalah array asosiatif nilai kunci (dengan beberapa fungsionalitas tambahan, tidak digunakan dalam contoh ini), mirip dengan array dalam PHP, atau Peta di Jawa. Untuk info lebih lanjut, lihat artikel Wikipedia tentang JavaScript dan ECMAScript, dan dokumentasi yang ditautkan dari sana, terutama dokumentasi resmi ECMAScript.Saya akan merekomendasikan Anda untuk membuat berbagai acara dialog. Setiap peristiwa adalah objek yang berisi teks yang dikatakan NPC dan berbagai kemungkinan tanggapan pemain, yang pada gilirannya adalah objek dengan teks respons dan indeks acara yang mengikuti respons ini.
sumber
Anda harus menggunakan pendekatan yang berbeda. JavaScript mendukung array dan objek, jadi mengapa tidak menggunakan satu per entri, menghemat semua pemisahan dan juga membuat teks aktual lebih mudah untuk diedit / dibaca?
Jika Anda mau, Anda dapat melihat beberapa prototipe yang saya buat selama beberapa jam untuk # 1gam . Sumbernya gratis untuk digunakan di bawah GPLv3 (saya baik-baik saja jika Anda tidak menggunakan GPL, jika Anda hanya menggunakannya untuk inspirasi. Tapi beri tahu saya setelah game Anda selesai.). Hanya saja, jangan berharap tulisan yang luar biasa atau semacamnya. ;)
Untuk memberikan penjelasan singkat tentang cara kerja kode, abaikan hal-hal animasi CSS dan hal-hal seperti itu:
var data
intinya berisi keseluruhan cerita dengan semua pilihan yang memungkinkan, dll.start
, yang keduacwait
, dll.[target location:display text]
.navigate()
: Fungsi ini membuat tautan Markup menjadi klik. Ini sedikit lebih lama, karena saya juga menangani beberapa teks statis untuk mati Berakhir di sana. Bagian penting adalah dua panggilan pertamareplace()
.Alih-alih mendefinisikan warna-warna ini, Anda juga bisa menambahkan tautan yang menunjuk ke lokasi lain (perhatikan ini tidak ditangani oleh kode saya; itu hanya beberapa ide untuk menunjukkan ini):
'start': ['Waking up', 'You wake...', 'cwait:yell for help', 'cwait: wait a bit', 'clook: look around']
sumber