Cara Membuat Nombor Rawak dalam Permainan HTML5 Anda - dummies

Nombor Rawak adalah bahagian utama pengaturcaraan permainan HTML5. Sering kali anda mahu beberapa jenis tingkah laku rawak. Ini digunakan untuk meniru kerumitan dan ketidakpastian alam semesta. Kebanyakan bahasa mempunyai penjana nombor rawak yang dibina. Fungsi khas ini menghasilkan beberapa jenis separa rawak. Sering kali anda perlu melakukan beberapa manipulasi untuk membuat nombor sesuai corak yang anda inginkan.

Halaman kelihatan sedikit rumit, tetapi ia menggambarkan sistem yang kuat dan fleksibel, sebaik sahaja anda tahu cara menggunakannya. Inilah yang berlaku:

1. JavaScript menjana nombor rawak.

   Bahasa yang berbeza melakukan ini dengan cara yang berbeza, tetapi JavaScript mempunyai fungsi yang membuat nilai titik terapung rawak antara 0 dan 1. Nilai tersebut ditunjukkan dalam kotak mentah.

2. Kalikan nilai mentah sebanyak 100

   Dalam contoh ini, anda ingin nombor di antara 1 dan 100. Jika anda melipatgandakan 0 ke 1 dengan 100, anda akan mendapat 0 hingga 99. 9999 (dengan banyak nines) nilai. Itu semakin dekat. Kotak 100 kali menunjukkan nilai mentah selepas ia telah didarabkan sebanyak 100.

3. Tukar nombor besar ke integer.

   Pengguna tidak akan meneka nombor dengan 17 tempat selepas perpuluhan, jadi anda memerlukan integer. JavaScript mempunyai beberapa cara untuk menukar float ke integer. Untuk mendapatkan tingkah laku 1 hingga 100 yang anda cari, anda menggunakan kaedah yang dipanggil Matematik. ceil. Hasil akhir ditunjukkan dalam kotak akhir.

Berikut adalah kod keseluruhannya:

rand100. html fieldset {width: 600px; margin-right: auto; margin-left: auto;} label {float: left; lebar: 250px; teks-align: right; margin-right: 1em; jelas: kiri;} span {float: left;} button {display: block; jelas: kedua-duanya; margin: auto;} roll fungsi () {// membuat pembolehubah untuk elemen bentuk var spnRaw = dokumen. getElementById ("spnRaw"); var spn100 = dokumen. getElementById ("spn100"); var spnFinal = dokumen. getElementById ("spnFinal"); // dapatkan nombor rawak var mentah = Matematik. rawak (); spnRaw. innerHTML = mentah; // didarab dengan 100 var times100 = mentah * 100; spn100. innerHTML = times100; // dapatkan siling var akhir = Matematik. ceil (times100); spnFinal. innerHTML = final;} // end roll

Make numbers random 1 - 100
raw 0 times 100 0 final 0 roll the dice

Use math for code game

To make this program work, you perlu memanggil senjata utama geekiness: Matematik.

JavaScript mempunyai perpustakaan yang indah yang dipanggil Matematik . Perpustakaan matematik mempunyai beberapa kebaikan yang sangat kasar yang dikebumikan di dalamnya, seperti beberapa fungsi matematik yang lazim digunakan serta pemalar (seperti pi) dan beberapa fungsi utiliti lain untuk bekerja dengan nombor.

Pertama, tentu saja, adalah fungsi yang menjana nombor rawak. Ia dipanggil Matematik. rawak ().

Anda benar-benar perlu mengatakan Matematik. rawak (). Sekiranya anda memanggil rawak () dengan sendirinya, JavaScript tidak akan tahu apa yang anda bercakap.

Matematik. fungsi rawak () menghasilkan nombor separa rawak. (Ia tidak benar-benar rawak tetapi dihasilkan melalui formula rumit dari nombor lain.) Nombor rawak akan menjadi nilai terapung antara 0 dan 1. Ini nampaknya tidak berguna, tetapi dengan sedikit matematik, anda boleh menukar nilai 0 hingga 1 ke mana-mana julat lain yang anda kehendaki.

Sebagai tambahan kepada fungsi rawak (), objek Matematik mempunyai sejumlah fungsi yang membolehkan anda menukar nilai titik terapung (iaitu, nombor dengan titik perpuluhan) ke integer (anda memperolehnya - nombor tanpa titik perpuluhan). Kaedah parseInt () standard dibina dalam JavaScript, tetapi kadang-kadang anda mahu melakukan penukaran yang lebih menarik. Perpustakaan Matematik mempunyai beberapa alat ini:

• Matematik. bulat (): Menukar nombor menggunakan algoritma penggenapan standard. Jika bahagian perpuluhan adalah. 5 atau kurang, integer kecil dipilih; jika bahagian perpuluhan lebih besar daripada. 5, integer yang lebih besar dipilih. Ini bermakna 3. 1 pusingan ke 3 dan 3. 8 pusingan ke 4.

• Matematik. lantai (): Fungsi ini sentiasa dibundarkan, jadi 3. 1 dan 3. 8 kedua-duanya menjadi 3. Fungsi parseInt () adalah sama dengan Matematik. lantai ().

• Matematik. ceil (): Fungsi ini (dapatkannya - fungsi siling) sentiasa pusingan, jadi 3. 1 dan 3. 8 kedua-duanya berakhir sebagai 4.

Fungsi yang anda perlukan bergantung pada keadaan tertentu.

Bagaimana untuk menjadikan borang permainan HTML

Seperti biasa, HTML membentuk asas bagi sebarang program JavaScript. Perkara utama di sini ialah bentuk yang menyediakan antara muka pengguna. Bentuk ini mempunyai beberapa ciri yang dapat diramalkan:

• Jangka untuk memegang data mentah: Tidak ada apa-apa bagi pengguna untuk menaip, jadi gunakan rentang untuk pelbagai elemen output. Rentang adalah tag inline generik. Mereka super untuk situasi seperti ini di mana anda memerlukan beberapa elemen output mudah yang boleh seiring dengan aliran utama halaman. Rentang data mentah dipanggil (di sini anda pergi …) spnRaw.

• Jangka lagi untuk data times100 : Seperti yang dilakukan pengiraan, ia akan memaparkan output.

• Jangkauan ketiga untuk output akhir: Setelah semua pengiraan selesai, anda memerlukan beberapa cara untuk memaparkan kerja cemerlang anda. spnFinal akan memenuhi maksud ini.

• Label untuk membuat semuanya jelas: Tanpa label yang menerangkan apa yang berlaku, hanya akan ada banyak nombor pada skrin. Jangan lupa untuk menambah label walaupun kepada contoh mudah supaya pengguna dapat memikirkan apa yang sedang berlaku.

• Butang untuk memulakan semua tindakan: Tiada apa yang akan berlaku sehingga pengguna meminta, jadi tambah butang pada borang. Apabila butang diklik, adakah ia memanggil fungsi roll () untuk melancarkan nombor.

• CSS untuk menjadikannya kelihatan baik: HTML tanpa CSS hodoh, jadi tambahkan CSS yang mencukupi untuk menjadikan bentuk HTML kelihatan baik.