Selalunya semasa membuat projek, anda akan mencari cara untuk menghasilkan nombor rawak.
Kes penggunaan yang paling biasa untuk menghasilkan nombor rawak adalah permainan kebetulan seperti menggulung dadu, mengocok kad bermain, dan memutar roda rolet.
Dalam panduan ini, anda akan belajar bagaimana menghasilkan nombor rawak menggunakan Math.random()kaedah dengan membina permainan dadu mini.
Kaedah Math.random ()
The Mathobjek dalam JavaScript adalah objek terbina dalam yang mempunyai ciri-ciri dan kaedah untuk melaksanakan pengiraan matematik.
Penggunaan umum Mathobjek adalah membuat nombor rawak menggunakan random()kaedah.
const randomValue = Math.random();Tetapi Math.random()kaedah itu sebenarnya tidak mengembalikan nombor bulat. Sebaliknya, ia mengembalikan nilai floating-point antara 0 (inklusif) dan 1 (eksklusif). Juga, perhatikan bahawa nilai yang dikembalikan Math.random()adalah sifat pseudo-random.
Nombor rawak yang dihasilkan Math.random()mungkin kelihatan rawak, tetapi nombor tersebut akan berulang dan akhirnya akan menunjukkan corak bukan rawak dalam jangka masa tertentu.
Ini kerana penjanaan nombor rawak algoritmik tidak semestinya bersifat rawak. Inilah sebabnya mengapa kami memanggil mereka penjana nombor pseudo-random (PRNG).
Untuk mengetahui lebih lanjut mengenai Math.random()kaedah, anda boleh melihat panduan ini.
Fungsi Penjana Nombor Rawak
Sekarang mari kita gunakan Math.random()kaedah untuk membuat fungsi yang akan mengembalikan integer rawak antara dua nilai (inklusif).
const getRandomNumber = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };Mari hancurkan logik di sini.
The Math.random()kaedah akan mengembalikan nombor titik apung di antara 0 dan 1 (eksklusif).
Jadi selang waktu adalah seperti berikut:
[0 .................................... 1) [min .................................... max)Untuk memfaktorkan selang kedua, tolak min dari kedua hujungnya. Jadi itu akan memberi anda selang waktu antara 0 dan max-min.
[0 .................................... 1) [0 .................................... max - min)Jadi sekarang, untuk mendapatkan nilai rawak, anda akan melakukan perkara berikut:
const x = Math.random() * (max - min)Inilah xnilai rawak.
Pada masa ini, maxdikecualikan dari selang waktu. Untuk menjadikannya inklusif, tambahkan 1. Juga, anda perlu menambahkan bahagian minbelakang yang dikurangkan lebih awal untuk mendapatkan nilai antara [min, max).
const x = Math.random() * (max - min + 1) + minBaiklah, jadi sekarang langkah terakhir yang tinggal adalah memastikan bahawa xia selalu menjadi bilangan bulat.
const x = Math.floor(Math.random() * (max - min + 1)) + minAnda boleh menggunakan Math.round()kaedah sebagai gantinya floor(), tetapi itu akan memberi anda pengedaran yang tidak seragam. Ini bermaksud bahawa kedua-duanya maxdan minakan mempunyai setengah peluang untuk keluar sebagai hasilnya. Menggunakan Math.floor()akan memberikan pengagihan yang sama rata.
Oleh itu, setelah anda mempunyai pemahaman yang baik tentang bagaimana generasi rawak berfungsi, mari gunakan fungsi ini untuk mensimulasikan dadu bergulir.
Permainan Rolling Dice
Di bahagian ini, kami akan membuat permainan dadu mini yang sangat sederhana. Dua pemain memasukkan nama mereka dan akan menggulung dadu. Pemain yang dadu mempunyai bilangan yang lebih tinggi akan memenangi pusingan.
Pertama, buat fungsi rollDiceyang mensimulasikan tindakan untuk menggulung dadu.
Di dalam badan fungsi, panggil getRandomNumber()fungsi dengan 1dan 6sebagai argumen. Ini akan memberi anda nombor rawak antara 1 dan 6 (termasuk kedua-duanya) seperti bagaimana dadu sebenar berfungsi.
const rollDice = () => getRandomNumber(1, 6);Seterusnya, buat dua medan input dan butang seperti yang ditunjukkan di bawah:
Roll Dice Apabila butang 'Roll Dice' diklik, dapatkan nama pemain dari medan input dan panggil rollDice()fungsi untuk setiap pemain.
const getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; const rollDice = () => getRandomNumber(1, 6); document.getElementById("roll").addEventListener("click", function () { // fetch player names from the input fields const player1 = document.getElementById("player1").value; const player2 = document.getElementById("player2").value; // roll dice for both players const player1Score = rollDice(); const player2Score = rollDice(); // initialize empty string to store result let result = ""; // determine the result if (player1Score > player2Score) { result = `${player1} won the round`; } else if (player2Score > player1Score) { result = `${player2} won the round`; } else { result = "This round is tied"; } // display the result on the page document.getElementById("results").innerHTML = ` ${player1} => ${player1Score}
${player2} => ${player2Score}
${result}
`; }); Anda boleh mengesahkan bidang nama pemain dan memperagakan penanda dengan beberapa CSS. Untuk tujuan ringkas, saya mempermudah panduan ini.
Iaitu ia. Anda boleh melihat demo di sini.
Kesimpulannya
Oleh itu, menghasilkan nombor rawak dalam JavaScript tidak begitu rawak. Yang kami lakukan hanyalah mengambil beberapa nombor input, menggunakan beberapa Matematik, dan mengeluarkan nombor pseudo-random.
For most browser-based applications and games, this much randomness is enough and serves its purpose.
That's it for this guide. Stay safe and keep coding like a beast.