Cara Membuat Bilangan Acak di Game HTML5 Anda - dummies

Nomor acak adalah bagian penting dari pemrograman game HTML5. Seringkali Anda menginginkan semacam perilaku acak. Ini digunakan untuk meniru kompleksitas dan ketidakpastian alam semesta. Kebanyakan bahasa memiliki generator bilangan acak yang terpasang. Fungsi khusus ini menghasilkan semacam bilangan semi-acak. Seringkali Anda harus melakukan manipulasi untuk membuat nomor sesuai dengan pola yang Anda inginkan.

Halaman ini tampaknya sedikit rumit, namun menggambarkan sistem yang kuat dan fleksibel, setelah Anda tahu bagaimana menggunakannya. Inilah yang terjadi:

JavaScript menghasilkan nomor acak.

Bahasa yang berbeda melakukan ini dengan cara yang berbeda, namun JavaScript memiliki fungsi yang menciptakan nilai floating point acak antara 0 dan 1. Nilai itu ditunjukkan dalam kotak mentah.
Kalikan nilai mentahnya dengan 100.

Dalam contoh ini, Anda menginginkan sebuah angka antara 1 dan 100. Jika Anda mengalikan 0-ke-1 dengan 100, Anda akan mendapatkan 0 sampai 99. 9999 (dengan banyak nines) nilai. Itu semakin dekat. Kali 100 kotak menunjukkan nilai mentah setelah dikalikan dengan 100.
Mengkonversi jumlah besar menjadi bilangan bulat.

Pengguna tidak akan pernah menebak angka dengan 17 tempat setelah desimal, jadi Anda memerlukan bilangan bulat. JavaScript memiliki sejumlah cara untuk mengonversi float menjadi bilangan bulat. Untuk mendapatkan 1 sampai 100 perilaku yang Anda cari, Anda menggunakan metode yang disebut Matematika. ceil. Hasil akhirnya ditunjukkan di kotak akhir.

Inilah kodenya secara keseluruhan:

rand100. fieldset html {width: 600px; margin-right: auto; margin-left: auto;} label {float: left; lebar: 250px; text-align: right; margin-kanan: 1em; clear: left;} span {float: left;} button {display: block; jelas: keduanya; margin: auto;} fungsi roll () {// buat variabel untuk elemen bentuk var spnRaw = dokumen. getElementById ("spnRaw"); var spn100 = dokumen getElementById ("spn100"); var spnFinal = dokumen getElementById ("spnFinal"); // dapatkan bilangan acak var raw = Math. acak(); spnRaw innerHTML = mentah; // kalikan dengan 100 var times100 = raw * 100; spn100. innerHTML = times100; // dapatkan plafon var final = Math. ceil (times100); spnFinal innerhtml = final;} // end roll

Buat bilangan acak 1 - 100
raw 0 kali 100 0 final 0 roll dadu

Gunakan matematika untuk kode permainan Anda

Agar program ini berhasil, Anda perlu memanggil senjata paling akhir dari geekiness: Math.

JavaScript memiliki perpustakaan indah yang disebut Math . Perpustakaan Math memiliki beberapa kebaikan yang benar-benar culun terkubur di dalamnya, seperti sejumlah fungsi matematika yang umum digunakan serta konstanta (seperti pi) dan beberapa fungsi utilitas lainnya untuk bekerja dengan angka.

Pertama, tentu saja, adalah fungsi yang menghasilkan angka acak. Ini disebut Matematika. acak().

Anda benar-benar perlu mengatakan Math. acak(). Jika Anda memanggil secara acak () dengan sendirinya, JavaScript tidak akan tahu apa yang Anda bicarakan.

Matematika Fungsi random () menghasilkan bilangan semi-acak. (Ini tidak benar-benar acak tapi diproduksi melalui formula kompleks dari nomor lain.) Nomor acaknya adalah nilai floating-point antara 0 dan 1. Ini sepertinya tidak membantu, tapi dengan sedikit matematika, Anda bisa berkonversi. nilai 0 sampai 1 ke kisaran lain yang Anda inginkan.

Selain fungsi acak (), objek Math memiliki sejumlah fungsi yang memungkinkan Anda untuk mengubah nilai floating point (yaitu angka dengan titik desimal) ke bilangan bulat (Anda mendapatkannya - sebuah angka tanpa titik desimal). Metode parseInt () standar dibuat ke JavaScript, namun terkadang Anda ingin melakukan konversi yang lebih bagus. Perpustakaan Matematika memiliki sejumlah alat ini:

Math. round (): Mengonversi nomor menggunakan algoritma pembulatan standar. Jika bagian desimalnya adalah. 5 atau kurang, bilangan bulat lebih kecil dipilih; jika bagian desimal lebih besar dari. 5, bilangan bulat lebih besar dipilih. Ini berarti bahwa 3. 1 ronde ke 3 dan 3. 8 ronde ke 4.
Math. lantai (): Fungsi ini selalu berputar ke bawah, jadi 3. 1 dan 3. 8 keduanya menjadi 3. Fungsi parseInt () identik dengan Math. lantai().
Matematika ceil (): Fungsi ini (mengerti - fungsi langit-langit) selalu berputar, jadi 3. 1 dan 3. 8 keduanya berakhir sebagai 4.

Fungsi yang Anda butuhkan bergantung pada keadaan tertentu.

Cara membuat bentuk permainan HTML

Seperti biasa, HTML membentuk dasar dari setiap program JavaScript. Yang terpenting disini adalah form yang menyediakan user interface. Formulir ini memiliki beberapa fitur yang dapat diprediksi:

Bentang untuk menyimpan data mentah: Tidak ada yang bisa digunakan pengguna untuk mengetik, jadi gunakan rentang untuk berbagai elemen keluaran. Spans adalah tag inline generik. Mereka super untuk situasi seperti ini di mana Anda memerlukan beberapa elemen keluaran sederhana yang dapat disesuaikan dengan arus utama halaman. Rentang data mentah disebut (here you go …) spnRaw.
Rentang lain untuk data times100 : Karena program melakukan perhitungan, maka akan menampilkan hasilnya.
Rentang ketiga untuk hasil akhir: Setelah semua perhitungan selesai, Anda memerlukan beberapa cara untuk menampilkan karya cemerlang Anda. spnFinal akan melayani tujuan ini.
Label untuk membuat semuanya jelas: Tanpa label yang menjelaskan apa yang terjadi, hanya akan ada sejumlah angka di layar. Jangan lupa menambahkan label bahkan ke contoh sederhana sehingga pengguna bisa mengetahui apa yang sedang terjadi.
Tombol untuk memulai semua tindakan: Tidak ada yang akan terjadi sampai pengguna memintanya, jadi tambahkan sebuah tombol ke formulir. Saat tombol diklik, mintalah fungsi roll () untuk menggulung nomor.
CSS untuk membuat semuanya terlihat bagus: HTML tanpa CSS itu jelek, jadi tambahkan cukup CSS untuk membuat bentuk HTML terlihat layak.