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

2022年1月15日

JavaScriptを使った福引プログラムの作り方

今回はJavaScriptを使って、福引プログラムを作ってみましょう。
画面上にスタートボタンとストップボタンを配置して、スタートボタンを押下すると、1等賞から6等賞までが次々とランダムに表示され、ストップボタンを押下すると、表示が止まるというプログラムです。
福引は配列に1等賞から6等賞までを定義して、ランダムでそのいずれかの要素を取得するようにします。
JavaScriptには配列からランダムに要素を選択する関数はありませんので、Math関数を組み合わせて実現します。
配列からランダムに要素を選択するやり方は、こちらの記事を参照してください。

一定時間毎に処理を行うタイマー機能の使い方

配列の要素を一定間隔で次々と画面に表示するには、JavaScriptのタイマー機能を使います。
タイマー機能にはいくつか種類がありますが、今回のプログラムではsetInterval()とclearInterval()を使います。

識別子 = setInterval(呼び出す関数, 間隔)	指定した間隔(ミリ秒)で繰り返し処理を実行する
clearInterval(識別子)	setIntervalで設定した繰り返し処理をキャンセルする

福引プログラム

上記の内容を踏まえた福引プログラムは、以下のようになります。
スタートボタンを押下すると、setInterval()によって100ミリ秒毎にdrawRoulette()関数を呼び出し、画面に1等賞から6等賞までのいずれかの要素が次々に表示されます。
ストップボタンを押下すると、clearInterval()によってdrawRoulette()関数を呼び出す処理がキャンセルされるので、結果として現在表示されている要素が画面にそのまま残ります。

<!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 array = ['1等賞','2等賞','3等賞','4等賞','5等賞','6等賞'];
      var value = array[Math.floor(Math.random() * array.length)];
      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 array = ['1等賞','2等賞','3等賞','4等賞','5等賞','6等賞'];

var value = array[Math.floor(Math.random() * array.length)];

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

次回

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