出る確率を調整できるランダムテキスト(インチキサイコロ)

ボタンクリックすると、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>

HTML

<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>

主に使用した構文、プロパティ、メソッド、イベント等。

スポンサード リンク

カテゴリー: JavaScript, 数学, 逆引き パーマリンク