戻る

乱数

数字を使った乱数のサンプル

サイコロを振る

<div> <img id="dice" style="width:50px;height:50px;"> </div> <button id="btn1">サイコロを振る</button>
copy

const b1 = document.getElementById("btn1");
b1.addEventListener("click", () => 
{
	let number =1;
	//サイコロの目を取得
	number = dice();
	//サイコロを表示
	displayDice(number);
});
//サイコロの目を取得
function dice()
{
	let number = 1;
	const start = 1;
	const end = 6;
	//指定の範囲の整数を取得
	number = Math.floor(Math.random() * (end - start + 1)) + start;
	return number;
}
//サイコロを表示
function displayDice(number)
{
	//サイコロの画像は準備してください
	let file = "";
	switch(number)
	{
		case 1:
			file = "dice1.png";
			break;
		case 2:
			file = "dice2.png";
			break;
		case 3:
			file = "dice3.png";
			break;
		case 4:
			file = "dice4.png";
			break;
		case 5:
			file = "dice5.png";
			break;
		case 6:
			file = "dice6.png";
			break;
	}
	const img = document.getElementById("dice");
	img.src = img;
}

このサンプルでは下記の関数を実行することでサイコロの目の1から6までのランダムに発生する値を使った
サイコロを表示するサンプルです。

関数	内容
Math.random	疑似乱数で、完全なランダム性を持つわけではありません。
Math.floor	小数点以下を切り捨てることで整数に変換するために使用しています。

0以上1未満の浮動小数点(小数点以下を含む数字)の疑似乱数を生成します。
常に0以上1未満の値を返します。
(例)
0.123
0.987
0.009
など

取得したい乱数の範囲を計算します。
今回の例ではサイコロの目は1から6まで範囲なので
start:1(最小)
end:6(最大)
この範囲は(6 - 1 + 1) = 6となります。
Math.random() * (end - start + 1)
0以上1未満 * 6(範囲の計算結果)の範囲を返すことになるため、
乱数としての範囲は0から6未満までの範囲となります。
計算式の全体は下記の通りです。
Math.random()が返す値が「0.258」と仮定します。
Math.random() * (end - start + 1) = 0.258 * (6 - 1 + 1) = 1.548
Math.floorは切り捨てなので「1」を返します。
1「Math.floor(Math.random() * (end - start + 1))」 + start
1 + 1 = 2
サイコロの目として表示されるのは「2」となります。

例えばサイコロを2個使う場合は
startが2(2個分なので最小の「1」✕2=2)
endが12(2個分なので最大の「6」✕2=12)
この範囲は(12 - 2 + 1) = 11となります。
0以上1未満 * 11(範囲の計算結果)の範囲を返すことになるため、
乱数としての範囲は0から11未満までの範囲となります。
計算式の全体は下記の通りです。
Math.random()が返す値が「0.658」と仮定します。
Math.random() * (end - start + 1) = 0.658 * (12 - 2 + 1) = 7.238
Math.floorは切り捨てなので「7」を返します。
7「Math.floor(Math.random() * (end - start + 1))」 + start
7 + 2 = 9
サイコロの目として表示されるのは「9」となります。

戻る

back

random numbers

random numbers sample using number

Roll the dice

<div> <img id="dice" style="width:50px;height:50px;"> </div> <button id="btn1">Roll the dice</button>
copy

const b1 = document.getElementById("btn1");
b1.addEventListener("click", () => 
{
	let number =1;
	//get dice number
	number = dice();
	//display dice
	displayDice(number);
});
//get dice number
function dice()
{
	let number = 1;
	const start = 1;
	const end = 6;
	//get specific range integer
	number = Math.floor(Math.random() * (end - start + 1)) + start;
	return number;
}
//display dice
function displayDice(number)
{
	//prepare dice image
	let file = "";
	switch(number)
	{
		case 1:
			file = "dice1.png";
			break;
		case 2:
			file = "dice2.png";
			break;
		case 3:
			file = "dice3.png";
			break;
		case 4:
			file = "dice4.png";
			break;
		case 5:
			file = "dice5.png";
			break;
		case 6:
			file = "dice6.png";
			break;
	}
	const img = document.getElementById("dice");
	img.src = img;
}

This sample executes the function below to display a dice using randomly generated values ​​from 1 to 6.

Function	Contents
Math.random	This is a pseudo-random number, and is not completely random.
Math.floor	Used to convert to an integer by truncating the decimal point.

Generates a pseudo-random floating point number (a number with a decimal point) between 0 and 1.
Always returns a value between 0 and 1.
(Example)
0.123
0.987
0.009
etc.

Calculate the range of the random number you want to obtain.
In this example, the dice numbers range from 1 to 6, so
start:1 (minimum)
end:6 (maximum)
The range is (6 - 1 + 1) = 6.
Math.random() * (end - start + 1)
The range returned is 0 to less than 1 * 6 (the range calculation result), so
The range of the random number is 0 to less than 6.
The entire calculation formula is as follows.
Assume that the value returned by Math.random() is "0.258".
Math.random() * (end - start + 1) = 0.258 * (6 - 1 + 1) = 1.548
Since Math.floor rounds down, it returns "1".
1 "Math.floor(Math.random() * (end - start + 1))" + start
1 + 1 = 2
The number displayed on the dice is "2".

For example, if you use two dice,
start is 2 (the smallest is "1" x 2 = 2)
end is 12 (the largest is "6" x 2 = 12)
The range is (12 - 2 + 1) = 11.
Since the range returned is 0 or more and less than 1 * 11 (the range calculation result),
the range of random numbers is from 0 to less than 11.
The entire formula is as follows.
Assume that the value returned by Math.random() is "0.658".
Math.random() * (end - start + 1) = 0.658 * (12 - 2 + 1) = 7.238
Since Math.floor rounds down, it returns "7".
7 "Math.floor(Math.random() * (end - start + 1))" + start
7 + 2 = 9
The number displayed on the dice is "9".


back