Часто при разработке проектов вы найдете себя способами генерирования случайных чисел.
Наиболее распространенные случаи использования для генерирования случайных чисел являются шанс, как Rolling Dice, перенапряжение игральных карт и вращающиеся колеса рулетки.
В этом руководстве вы узнаете, как генерировать случайное число, используя Math.random () Метод, создавая игрушечную игру.
Метод math.random ()
Математика Объект в JavaScript является встроенным объектом, обладающим свойствами и методами выполнения математических расчетов.
Общее использование Математика Объект состоит в том, чтобы создать случайное число, используя Случайные () метод.
const randomValue = Math.random();
Но Math.random () Метод на самом деле не возвращает целое число. Вместо этого он возвращает значение с плавающей запятой между 0 (включительно) и 1 (эксклюзивно). Кроме того, обратите внимание, что значение, возвращенное из Math.random () является псевдо-случайным в природе.
Случайные числа, созданные Math.random () может показаться случайным, но эти цифры будут повторяться и в конечном итоге отображать неслучайную картину в течение определенного периода времени.
Это связано с тем, что алгоритмическое поколение случайного числа никогда не может быть по-настоящему случайным в природе. Вот почему мы называем их ими генераторами псевдослучайных номеров (PRNGS).
Чтобы узнать больше о Math.random () Метод вы можете проверить это руководство.
Функция генератора случайных чисел
Теперь давайте будем использовать Math.random () Способ создания функции, которая вернет случайное целое число между двумя значениями (включительно).
const getRandomNumber = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
};Давайте сломаем логику здесь.
Math.random () Метод вернет номер с плавающей запятой между 0 и 1 (эксклюзив).
Таким образом, интервалы будут следующими следующим образом:
[0 .................................... 1) [min .................................... max)
Для факторов второго интервала вычитайте мин от обоих концов. Так что это даст вам интервал между 0 и Макс-мин Отказ
[0 .................................... 1) [0 .................................... max - min)
Так что теперь, чтобы получить случайное значение, которое вы сделаете следующее:
const x = Math.random() * (max - min)
Здесь х это случайное значение.
В настоящее время Макс исключен из интервала. Чтобы сделать его включительно, добавьте 1. Кроме того, вам нужно добавить мин назад, которая была вычтена ранее, чтобы получить значение между [Мин, Макс) Отказ
const x = Math.random() * (max - min + 1) + min
Хорошо, так что теперь последний шаг остается, чтобы убедиться, что х всегда целое число.
const x = Math.floor(Math.random() * (max - min + 1)) + min
Вы могли бы использовать Math.round () Метод вместо пол () , но это даст вам неоднородное распределение. Это означает, что оба Макс и мин будет половина шанса выйти как результат. Использование Math.floor () даст вам идеально даже распространение.
Так что теперь, когда у вас есть справедливое понимание того, как работает случайное поколение, давайте будем использовать эту функцию для моделирования прокатки кости.
Игра Rolling Dice
В этом разделе мы создадим действительно простую игру мини-кости. Два игрока входят в свое имя и будут катиться в кубиках. Игрок, чей кости имеет большее число, выиграет раунд.
Во-первых, создайте функцию 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 не так случайно. Все, что мы делаем, предпринимает некоторые входные номера, используя немного математики и выпив псевдослучайное число.
Для большинства на основе браузеров приложений и игр это много случайности достаточно и служит ее цели.
Вот это для этого руководства. Оставайтесь в безопасности и продолжайте кодировать как зверь.