JavaScriptを使って簡単な福引プログラムを作ろう～重み付け【初心者向け】

2022年1月22日

前回

JavaScriptを使って簡単な福引プログラムを作ろう【初心者向け】

福引の当たりに重みを付けよう

前回は福引プログラムを作りましたが、1等賞から6等賞まで全て同じ確率で当たりました。
通常、1等賞が当たる確率は低く、6等賞が当たる確率は高いので、今回は当たる確率に重みを付けてみましょう。

福引の賞の重みの付け方

各賞に重みを付けるために、以下のようなオブジェクトを定義します。

var object = {'1等賞':1,'2等賞':4,'3等賞':8,'4等賞':12,'5等賞':25,'6等賞':50}

1等賞は1%、2等賞は4%、3等賞は8%、4等賞は12%、5等賞は25%、6等賞は50%の出現確率になるイメージです。
考え方としては、0から99の整数の中からランダムで値を取得して、その値が以下のどの賞に当たるかを判定します。

1等賞：0
2等賞：1～4
3等賞：5～12
4等賞：13～24
5等賞：25～49
6等賞：50～99

0から99の中からランダムに値を取得するコードは、以下のようになります。

var number = Math.floor(Math.random() * 100);

上記のコードは、Math.random()によって0から1未満の値をランダムに出力して、それに100を掛けてからMath.floor()で小数点以下を切り捨てるという意味になります。

重みを付けた福引プログラム

福引の賞に重みを付けたプログラムは、以下のようになります。
26行目から32行目が、ランダム値がどの賞に当たるのかを決める処理です。
定義したオブジェクトからキー(賞)を取得し、その重み(確率)を変数weightに加算していきます。
変数weightは1等賞の時は1、2等賞の時は5、3等賞の時は13、4等賞の時は25、5等賞の時は50、6等賞の時は100となります。
ランダム値を表す変数numberと重みを表す変数weightを比較して、変数numberの方が小さければキー(賞)を保存して、ループを終了します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Roulette</title>
</head>
<body>
  <input type="button" value="スタート" onclick="startRoulette();"></input>
  <input type="button" value="ストップ" onclick="stopRoulette();"></input>
  <div id="pos1"></div>
  <script type="text/javascript">
    // グローバル変数
    var timer;

    // 開始関数
    function startRoulette() {
      timer = setInterval("drawRoulette();", 100);
    }

    // 終了関数
    function stopRoulette() {
      clearInterval(timer);
    }

    // ルーレット関数
    function drawRoulette() {
      var object = {'1等賞':1,'2等賞':4,'3等賞':8,'4等賞':12,'5等賞':25,'6等賞':50};
      var number = Math.floor(Math.random() * 100);
      var weight = 0;
      for (var key in object) {
        weight += object[key];
        if (number < weight) {
            value = key;
            break;
        }
      }
      var id1 = document.getElementById('pos1');
      id1.style.fontSize = "32pt";
      id1.style.color = "blue";
      id1.innerHTML = value;
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Roulette</title>

</head>

<body>

// グローバル変数

var timer;

// 開始関数

function startRoulette() {

timer = setInterval("drawRoulette();", 100);

}

// 終了関数

function stopRoulette() {

clearInterval(timer);

}

// ルーレット関数

function drawRoulette() {

var object = {'1等賞':1,'2等賞':4,'3等賞':8,'4等賞':12,'5等賞':25,'6等賞':50};

var number = Math.floor(Math.random() * 100);

var weight = 0;

for (var key in object) {

weight += object[key];

if (number < weight) {

value = key;

break;

}

var id1 = document.getElementById('pos1');

id1.style.fontSize = "32pt";

id1.style.color = "blue";

id1.innerHTML = value;

}

</script>

</body>

</html>

スタートボタンを押下するとオブジェクトに定義したキーがランダムで次々に表示され、ストップボタンを押下するとランダム表示の処理が終了して、最後に表示されたキーがそのまま残ります。

JavaScriptの詳しい使い方は、以下の「MDN Web Docs」を参照してください。

MDN Web Docs ～ JavaScript