JavaScript Math.random()を乱数ジェネレーターとして使用する方法

多くの場合、プロジェクトの開発中に、乱数を生成する方法を探していることに気付くでしょう。

乱数を生成するための最も一般的な使用例は、サイコロを振る、トランプをシャッフルする、ルーレットのホイールを回転させるなどの運が左右するゲームです。

このガイドではMath.random()、ミニサイコロゲームを作成する方法を使用して乱数を生成する方法を学習します。

Math.random()メソッド

MathJavaScriptのオブジェクトは、数学計算を実行するためのプロパティとメソッドを持つ組み込みオブジェクトです。

Mathオブジェクトの一般的な使用random()法は、メソッドを使用して乱数を作成することです。

const randomValue = Math.random();

ただし、このMath.random()メソッドは実際には整数を返しません。代わりに、0(包括的)から1(排他的)までの浮動小数点値を返します。また、から返される値はMath.random()本質的に疑似ランダムであることに注意してください。

によって生成されたMath.random()乱数はランダムに見えるかもしれませんが、それらの数値は繰り返され、最終的には一定期間にわたってランダムでないパターンを表示します。

これは、アルゴリズムによる乱数の生成が本質的に真にランダムになることは決してないためです。これが、それらを疑似乱数ジェネレーター(PRNG)と呼ぶ理由です。

この方法の詳細については、Math.random()このガイドをご覧ください。

乱数発生器機能

次に、このMath.random()メソッドを使用して、2つの値(両端を含む)の間のランダムな整数を返す関数を作成しましょう。

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

ここでロジックを分解してみましょう。

このMath.random()メソッドは、0から1(排他的)までの浮動小数点数を返します。

したがって、間隔は次のようになります。

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

2番目の間隔を因数分解するには、両端からminを引きます。したがって、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()すると、完全に均等に分散されます。

ランダム生成がどのように機能するかを正しく理解したので、この関数を使用してローリングダイスをシミュレートしましょう。

ローリングダイスゲーム

このセクションでは、本当にシンプルなミニサイコロゲームを作成します。2人のプレイヤーが名前を入力し、サイコロを振ります。サイコロの数が多いプレイヤーがラウンドに勝ちます。

まず、rollDiceサイコロを振るアクションをシミュレートする関数を作成します。

関数本体内で、引数としておよびを使用してgetRandomNumber()関数を呼び出します。これにより、実際のサイコロが機能するのと同じように、1から6(両方を含む)の任意の乱数が得られます。16

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

次に、以下に示すように、2つの入力フィールドと1つのボタンを作成します。

 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で乱数を生成することは、結局のところそれほどランダムではありません。私たちが行っているのは、いくつかの入力数値を取り込んで、いくつかの数学を使用し、疑似乱数を吐き出すことだけです。

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.