Як використовувати JavaScript Math.random () як генератор випадкових чисел

Часто, розробляючи проекти, ви опиняєтесь у пошуку шляхів генерування випадкових чисел.

Найпоширенішими випадками використання випадкових чисел є азартні ігри, такі як кидання кубиків, перемішування гральних карт та обертання рулетки.

У цьому посібнику ви дізнаєтесь, як генерувати випадкове число за допомогою Math.random()методу, будуючи міні-гру в кістки.

Метод Math.random ()

MathОб'єкт в JavaScript є вбудованим об'єктом , який має властивість і методи для виконання математичних розрахунків.

Загальновживаним Mathоб’єктом є створення випадкового числа за допомогою random()методу.

const randomValue = Math.random();

Але Math.random()метод фактично не повертає цілого числа. Натомість він повертає значення з плаваючою комою між 0 (включно) та 1 (ексклюзивно). Також зауважте, що значення, яке повертається, Math.random()має псевдовипадковий характер.

Випадкові числа, що генеруються, Math.random()можуть здатися випадковими, але ці числа будуть повторюватися і в кінцевому підсумку відображатимуть випадковий шаблон протягом певного періоду часу.

Це тому, що алгоритмічне генерація випадкових чисел ніколи не може мати справді випадкового характеру. Ось чому ми називаємо їх генераторами псевдовипадкових чисел (PRNG).

Щоб дізнатись більше про Math.random()метод, ви можете ознайомитися з цим посібником.

Функція генератора випадкових чисел

Тепер давайте використаємо Math.random()метод для створення функції, яка поверне випадкове ціле число між двома значеннями (включно).

const getRandomNumber = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };

Давайте розберемо логіку тут.

Math.random()Метод повертає число з плаваючою точкою між 0 і 1 (Exclusive).

Тож інтервали будуть такими:

[0 .................................... 1) [min .................................... max)

Щоб врахувати другий інтервал, відніміть хв з обох кінців. Отже, це дасть вам інтервал між 0 і max-min.

[0 .................................... 1) [0 .................................... max - min)

Отже, щоб отримати випадкове значення, ви зробите наступне:

const x = Math.random() * (max - min)

Ось xвипадкове значення.

В даний час maxвиключається з інтервалу. Щоб зробити його інклюзивним, додайте 1. Крім того, вам потрібно додати minзворотну сторону, яку віднімали раніше, щоб отримати значення між [min, max).

const x = Math.random() * (max - min + 1) + min

Гаразд, отже, останнім кроком, який залишився, є переконатися, що xце завжди ціле число.

const x = Math.floor(Math.random() * (max - min + 1)) + min

Ви можете використовувати Math.round()метод замість floor(), але це дасть вам нерівномірний розподіл. Це означає, що у обох maxі minбуде половина шансів вийти як результат. Використання Math.floor()дасть вам ідеально рівномірний розподіл.

Отже, тепер, коли ви чітко розумієте, як працює випадкове покоління, давайте використаємо цю функцію для імітації кидок кубиків.

Гра в кості

У цьому розділі ми створимо справді просту гру в міні-кістки. Два гравці вводять своє ім'я і кидають кубики. Гравець, у кості якого більше число, виграє раунд.

По-перше, створіть функцію, rollDiceяка імітує дію для кидання кубиків.

Усередині функції функції викличте getRandomNumber()функцію з аргументами 1та 6як аргументи. Це дасть вам будь-яке випадкове число від 1 до 6 (обидва включно), подібно до того, як спрацюють справжні кубики.

const rollDice = () => getRandomNumber(1, 6);

Далі створіть два поля введення та кнопку, як показано нижче:

 Roll Dice 

Після натискання кнопки "Кинути кістки", дістаньте імена гравців із полів введення та викликайте rollDice()функцію для кожного гравця.

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}

`; });

Ви можете перевірити поля імен гравців і покращити розмітку за допомогою CSS. Для стислості я даю просту інформацію для цього посібника.

Це все. Демонстрацію ви можете переглянути тут.

Висновок

Тож генерування випадкових чисел у JavaScript зрештою не таке вже й випадкове. Все, що ми робимо, - це взяти деякі вхідні числа, використовуючи деяку математику і виплюнути псевдовипадкове число.

Для більшості програм та ігор на базі браузера достатньо такої випадковості і вона служить своєму призначенню.

Це все для цього посібника. Залишайтеся в безпеці та продовжуйте кодувати як звір.