ボタンクリックすると、50%の確率で「1」、30%の確率で「2」、5%づつの確率で「3」「4」「5」「6」の数字を表示するJavaScriptサンプル。
名付けて、インチキサイコロ(フェイクダイス)。
サンプル(実装例)
サンプルはこちら実装例の動作について
- 「インチキサイコロ」ボタンをクリックすると、ボタンの右横に1から6までの数値を表示する。
- 「1」の数字が出る確率は「50%」。「2」の数字が出る確率は「30%」。「3~6」の数字が出る確率は、それぞれ「5%」。
ソースコード
JavaScript
<script type="text/javascript">
function fakeDice() {
$probability = new Array();
$text = new Array();
var $numA = 0;
var $numB = 0;
$probability[0] = 10; $text[0] = '1';
$probability[1] = 6; $text[1] = '2';
$probability[2] = 1; $text[2] = '3';
$probability[3] = 1; $text[3] = '4';
$probability[4] = 1; $text[4] = '5';
$probability[5] = 1; $text[5] = '6';
function sumElements( $previousValue, $currentValue ) {
return $previousValue + $currentValue;
}
var $sum = $probability.reduce( sumElements );
$num = Math.floor( Math.random() * $sum );
$num++;
for( $i=0; $i <= $probability.length - 1; $i++ ) {
$numA = $numB;
$numB += $probability[$i];
if( $numA < $num && $num <= $numB ){
$printText = $text[$i];
}
}
document.getElementById( "sampleOutput" ).innerHTML = $printText;
}
</script>
function fakeDice() {
$probability = new Array();
$text = new Array();
var $numA = 0;
var $numB = 0;
$probability[0] = 10; $text[0] = '1';
$probability[1] = 6; $text[1] = '2';
$probability[2] = 1; $text[2] = '3';
$probability[3] = 1; $text[3] = '4';
$probability[4] = 1; $text[4] = '5';
$probability[5] = 1; $text[5] = '6';
function sumElements( $previousValue, $currentValue ) {
return $previousValue + $currentValue;
}
var $sum = $probability.reduce( sumElements );
$num = Math.floor( Math.random() * $sum );
$num++;
for( $i=0; $i <= $probability.length - 1; $i++ ) {
$numA = $numB;
$numB += $probability[$i];
if( $numA < $num && $num <= $numB ){
$printText = $text[$i];
}
}
document.getElementById( "sampleOutput" ).innerHTML = $printText;
}
</script>
HTML
<p>
<button onclick="fakeDice();">インチキサイコロ</button>:<span id="sampleOutput"></span>
</p>
<button onclick="fakeDice();">インチキサイコロ</button>:<span id="sampleOutput"></span>
</p>
解説
JavaScript
<script type="text/javascript">
// ユーザー定義関数
function fakeDice() {
// 配列を生成
$probability = new Array();
$text = new Array();
// 変数を定義
var $numA = 0;
var $numB = 0;
// 配列を定義
$probability[0] = 10; $text[0] = '1';
$probability[1] = 6; $text[1] = '2';
$probability[2] = 1; $text[2] = '3';
$probability[3] = 1; $text[3] = '4';
$probability[4] = 1; $text[4] = '5';
$probability[5] = 1; $text[5] = '6';
// 配列「$probability」の全ての値を合計し、変数「$sum」に代入
function sumElements( $previousValue, $currentValue ) {
return $previousValue + $currentValue;
}
var $sum = $probability.reduce( sumElements );
// 1~20の乱数を生成
$num = Math.floor( Math.random() * $sum );
$num++;
// 確率に基づき表示するテキストを決定
// 配列「$probability」の数値が多い方が高確率
for( $i=0; $i <= $probability.length - 1; $i++ ) {
$numA = $numB;
$numB += $probability[$i];
if( $numA < $num && $num <= $numB ){
$printText = $text[$i];
}
}
// id属性値が「sampleOutput」である要素内に表示
document.getElementById( "sampleOutput" ).innerHTML = $printText;
}
</script>
// ユーザー定義関数
function fakeDice() {
// 配列を生成
$probability = new Array();
$text = new Array();
// 変数を定義
var $numA = 0;
var $numB = 0;
// 配列を定義
$probability[0] = 10; $text[0] = '1';
$probability[1] = 6; $text[1] = '2';
$probability[2] = 1; $text[2] = '3';
$probability[3] = 1; $text[3] = '4';
$probability[4] = 1; $text[4] = '5';
$probability[5] = 1; $text[5] = '6';
// 配列「$probability」の全ての値を合計し、変数「$sum」に代入
function sumElements( $previousValue, $currentValue ) {
return $previousValue + $currentValue;
}
var $sum = $probability.reduce( sumElements );
// 1~20の乱数を生成
$num = Math.floor( Math.random() * $sum );
$num++;
// 確率に基づき表示するテキストを決定
// 配列「$probability」の数値が多い方が高確率
for( $i=0; $i <= $probability.length - 1; $i++ ) {
$numA = $numB;
$numB += $probability[$i];
if( $numA < $num && $num <= $numB ){
$printText = $text[$i];
}
}
// id属性値が「sampleOutput」である要素内に表示
document.getElementById( "sampleOutput" ).innerHTML = $printText;
}
</script>
主に使用した構文、プロパティ、メソッド、イベント等。