スポンサーリンク

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

アイキャッチ 猫HTML/CSS
スポンサーリンク

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

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

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

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

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

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

ソースコード

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

<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行目 タイマー解除
みみねこ
みみねこ

上記で簡単に解説していますが、

START表示の処理は[ボタンを押しておみくじを表示]、

STOP表示の処理は[おみくじの結果の確率を設定]の実装を流用しています!

タイトルとURLをコピーしました