ramdom アーカイブ - nyanblog ~にゃんぶろぐ~ https://nyanblog2222.com/tag/ramdom/ ちょっとしたことを調べているよ Fri, 15 Nov 2024 08:56:13 +0000 ja hourly 1 https://wordpress.org/?v=6.7 https://nyanblog2222.com/wp-content/uploads/2021/09/cropped-favicon-32x32.png ramdom アーカイブ - nyanblog ~にゃんぶろぐ~ https://nyanblog2222.com/tag/ramdom/ 32 32 【初心者】JavaScriptでおみくじの作り方【サンプル】 https://nyanblog2222.com/programming/4764/ https://nyanblog2222.com/programming/4764/#respond Tue, 06 Sep 2022 14:43:10 +0000 https://nyanblog2222.com/?p=4764 今回はJavaScriptでおみくじを作成しました。三段階で作成してみましたので、初心者の方が勉強するのにおすすめですよ♪ 段階としては三段階で作成していきます。 目次 ボタンを押しておみくじを表示ソースコード解説おみく […]

投稿 【初心者】JavaScriptでおみくじの作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

今回は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表示の処理は[おみくじの結果の確率を設定]の実装を流用しています！

投稿 【初心者】JavaScriptでおみくじの作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/programming/4764/feed/ 0