Verwendung von JavaScript Math.random () als Zufallszahlengenerator

Während der Entwicklung von Projekten werden Sie häufig nach Möglichkeiten suchen, Zufallszahlen zu generieren.

Die häufigsten Anwendungsfälle zum Generieren von Zufallszahlen sind Glücksspiele wie Würfeln, Mischen von Spielkarten und Drehen von Roulette-Rädern.

In diesem Handbuch erfahren Sie, wie Sie mithilfe der Math.random()Methode eine Zufallszahl generieren , indem Sie ein Mini-Würfelspiel erstellen.

Die Math.random () -Methode

Das MathObjekt in JavaScript ist ein integriertes Objekt mit Eigenschaften und Methoden zur Durchführung mathematischer Berechnungen.

Eine häufige Verwendung des MathObjekts besteht darin, mit der random()Methode eine Zufallszahl zu erstellen .

const randomValue = Math.random();

Die Math.random()Methode gibt jedoch keine ganze Zahl zurück. Stattdessen wird ein Gleitkommawert zwischen 0 (einschließlich) und 1 (exklusiv) zurückgegeben. Beachten Sie außerdem, dass der von zurückgegebene Wert Math.random()pseudozufällig ist.

Zufallszahlen, die von generiert werden, Math.random()scheinen zufällig zu sein, aber diese Zahlen wiederholen sich und zeigen schließlich über einen bestimmten Zeitraum ein nicht zufälliges Muster an.

Dies liegt daran, dass die algorithmische Zufallszahlengenerierung niemals wirklich zufällig sein kann. Deshalb nennen wir sie Pseudozufallszahlengeneratoren (PRNGs).

Weitere Informationen zur Math.random()Methode finden Sie in diesem Handbuch.

Zufallszahlengeneratorfunktion

Verwenden Sie nun die Math.random()Methode, um eine Funktion zu erstellen, die eine zufällige Ganzzahl zwischen zwei Werten (einschließlich) zurückgibt.

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

Lassen Sie uns hier die Logik aufschlüsseln.

Die Math.random()Methode gibt eine Gleitkommazahl zwischen 0 und 1 zurück (exklusiv).

Die Intervalle wären also wie folgt:

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

Um das zweite Intervall zu faktorisieren, subtrahieren Sie min von beiden Enden. Das würde Ihnen also ein Intervall zwischen 0 und geben max-min.

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

Um einen zufälligen Wert zu erhalten, gehen Sie wie folgt vor:

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

Hier xist der Zufallswert.

Derzeit maxist aus dem Intervall ausgeschlossen. Fügen Sie 1 hinzu, um es inklusiv zu machen. Außerdem müssen Sie die minzuvor subtrahierte Rückseite hinzufügen , um einen Wert zwischen zu erhalten [min, max).

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

Okay, jetzt müssen Sie als letzten Schritt sicherstellen, dass xes sich immer um eine Ganzzahl handelt.

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

Sie könnten die Math.round()Methode anstelle von verwenden floor(), aber das würde Ihnen eine ungleichmäßige Verteilung geben. Dies bedeutet, dass beide maxund mineine halbe Chance haben, als Ergebnis herauszukommen. Durch Math.floor()die Verwendung erhalten Sie eine perfekt gleichmäßige Verteilung.

Nachdem Sie nun ein gutes Verständnis für die Funktionsweise einer zufälligen Generation haben, können Sie diese Funktion verwenden, um das Würfeln zu simulieren.

Das Würfelspiel

In diesem Abschnitt erstellen wir ein wirklich einfaches Mini-Würfelspiel. Zwei Spieler geben ihren Namen ein und würfeln. Der Spieler, dessen Würfel eine höhere Zahl haben, gewinnt die Runde.

Erstellen Sie zunächst eine Funktion rollDice, die die Aktion zum Würfeln simuliert.

Rufen Sie im getRandomNumber()Funktionskörper die Funktion mit 1und 6als Argumente auf. Dies gibt Ihnen eine beliebige Zufallszahl zwischen 1 und 6 (beide inklusive), genau wie echte Würfel funktionieren würden.

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

Erstellen Sie als Nächstes zwei Eingabefelder und eine Schaltfläche wie unten gezeigt:

 Roll Dice 

Wenn Sie auf die Schaltfläche "Würfeln" klicken, rufen Sie die Spielernamen aus den Eingabefeldern ab und rufen Sie die rollDice()Funktion für jeden Spieler auf.

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}

`; });

Sie können die Namensfelder der Spieler validieren und das Markup mit etwas CSS verschönern. Der Kürze halber halte ich es für diesen Leitfaden einfach.

Das ist es. Sie können die Demo hier ansehen.

Fazit

Das Generieren von Zufallszahlen in JavaScript ist also doch nicht so zufällig. Alles, was wir tun, ist, einige Eingabenummern mit etwas Mathematik aufzunehmen und eine Pseudozufallszahl auszuspucken.

Für die meisten browserbasierten Anwendungen und Spiele reicht diese Zufälligkeit aus und erfüllt ihren Zweck.

Das war's für diesen Leitfaden. Bleib sicher und codiere weiter wie ein Biest.