【初心者】JavaScriptでおみくじの作り方【サンプル】

今回はJavaScriptでおみくじを作成しました。
三段階で作成してみましたので、初心者の方が勉強するのにおすすめですよ♪

段階としては三段階で作成していきます。

ボタンを押しておみくじを表示する
おみくじの結果の確率を設定する
ボタンを押しておみくじルーレットを表示する
おみくじは画像で表示する

ボタンを押しておみくじを表示
1. ソースコード
2. 解説
おみくじの結果の確率を設定
1. ソースコード
2. 解説
ボタンを押しておみくじルーレットを表示
1. ソースコード
  1. HTML
  2. JavaScript
2. 解説

ボタンを押しておみくじを表示

まずは一番簡単なコードで作成していきます。

こちらがデモページになります。

ソースコード

こちらがソースコードです。

<script>
  window.onload = function () {
    // おみくじ
    // この順番が良い順番らしい（吉と中吉が逆になることも）
    const list = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];

    document.getElementById("button").onclick = function () {
      var random = Math.floor(Math.random() * list.length);
      document.getElementById("result").textContent = list[random];
    }
  }
</script>

<body>
  <div class="wrapper">
    <p>おみくじ<br>ボタンをクリックしてください。</p>
    <div class="wrapper-button">
      <button id="button" class="button">おみくじを引く</button>
    </div>
    <p id="result"></p>
  </div>
</body>

解説

HTML

17～19行目　ボタン：押すことでおみくじが引く
20行目　pタグ：おみくじの結果を表示

JavaScript

5行目　おみくじの結果をリストに設定
7～10行目　ボタンのクリックイベント
8行目　random関数を利用して0～リストの数までのランダムの数を作成
　　　 floor関数で小数を切り捨てて整数にする
9行目　8行目で作成した数字を使っておみくじ結果リストにアクセスし、id=”result”に設定

おみくじの結果の確率を設定

続いて、おみくじの結果の確率を設定して出やすさを変えていきます。

こちらがデモページになります。

ソースコード

こちらがソースコードです。

<script>
  window.onload = function () {
    const list = {
      "大吉" : 10,
      "吉" : 15,
      "中吉" : 20,
      "小吉" : 25,
      "末吉" :15,
      "凶" : 10,
      "大凶" : 5,
    };

    document.getElementById("button").onclick = function () {
      var random = Math.floor(Math.random() * 100);
      var rate = 0;
      for(var data in list){
        rate += list[data];
        if(random <= rate){
          document.getElementById("result").textContent = data;
          return;
        }
      }
    }
  }
</script>

<body>
  <div class="wrapper">
    <p>おみくじ<br>ボタンをクリックしてください。</p>
    <div class="wrapper-button">
      <button id="button" class="button">おみくじを引く</button>
    </div>
    <p id="result"></p>
  </div>
</body>

解説

HTMLは変更なしのため、解説は割愛します。

JavaScript

3～11行目　おみくじの結果を連想配列に設定
　　　 valueを数字にして確率を設定（数字が大きい方が出やすい）
　　　 ※ 全ての項目のvalueの和が100になるように
13～23行目　ボタンのクリックイベント
14行目　random関数を利用して0～100の数までのランダムの数を作成
　　　　 floor関数で小数を切り捨てて整数にする
15～21行目　14行目でランダムに設定した値を使い、for文で連想配列を回しながら14行目で取得した値の結果をid=”result”に設定

ボタンを押しておみくじルーレットを表示

最後にボタンを「START」「STOP」に変更しておみくじルーレットを作成します。
また、おみくじの結果は画像にしました。

こちらがデモページになります。

ソースコード

こちらがソースコードです。

HTML

<body>
  <div class="wrapper">
    <p>おみくじ<br>ボタンをクリックしてください。</p>
    <div class="wrapper-button">
      <button id="button" class="button">START</button>
    </div>
    <div>
      <img id="img" src="img/muji.png" alt="">
    </div>
  </div>
</body>

JavaScript

window.onload = function () {

  const list = {
    "daikichi":10,
    "kichi":15,
    "chuukichi":20,
    "syoukichi":25,
    "suekichi":15,
    "kyou":10,
    "daikyou":5,
  };

  var timer;
  // START・STOPボタンクリックのイベント
  document.getElementById("button").onclick = function () {
    // START
    if (this.textContent == "START") {
      // ボタンのテキストを"STOP"に変更
      this.textContent = "STOP";

      // ルーレットタイマーを設定
      timer = setInterval(function () {
        var random = Math.floor(Math.random() * Object.keys(list).length);
        document.getElementById("img").src = "img/" + Object.keys(list)[random] + ".png";
      }, 10);
    // STOP
    } else {
      // ボタンのテキストを"START"に変更
      this.textContent = "START";

      var rate = 0;
      var random = Math.floor(Math.random() * 100);
      for(var data in list){
        rate += list[data];
        if(random <= rate){
          document.getElementById("img").src = "img/" + data + ".png";

          // ルーレットタイマーを停止
          clearInterval(timer);
          return;
        }
      }
    }
  };
};

解説

HTML

4～6行目　ボタン：押すことでおみくじが引く
7～9行目　pタグ：おみくじの結果を表示

JavaScript

3～11行目　おみくじの結果を連想配列に設定
15～行目　ボタンのクリックイベント
16～24行目　START表示時にクリックしたときの処理
・19行目　ボタン表示を[STOP]に変更
・22～25行目　タイマーを設定（ルーレットを作ります）
・23行目　randomにランダムに値を設定（0～連想配列の数）
・24行目　23行目の値を使って画像を設定
26～43行目　STOP表示時にクリックしたときの処理
・29行目　ボタン表示を[START]に変更
・31～42行目　[おみくじの結果の確率を設定]のおみくじの設定を流用
・39行目　タイマー解除