ビンゴ抽選をjQueryで作る!

ビンゴ抽選をjQueryで作る!
この記事は約9分で読めます。

Youtuber江頭さん、元SMAP草薙さんのチャンネル登録者数が100万人達成したよって動画見てなんかすごい時代だなぁ~って思いつつ。
今回はjQueryでクリック数の取得をしてみたいと思います。
さらに、応用編があるのでそちらも見てくださると嬉しいです!
コピペで出来るのでよかったら使ってください。
まずはDEMOでどの様な動きかご確認ください。

クリックで数をカウントする

DEMO

現在のクリック数0

ここを押してね!

HTML

<div class="demo1">
  <p>現在のクリック数<span>0</span></p>
  <div class="btn">ここを押してね!</div>
</div>

CSS

.demo1 {
  display: block;
  height: 300px;
  text-align: center;
}
.demo1 > p {
  font-size: 32px;
  margin-bottom: 32px;
}
.demo1 > p span {
  display: inline-block;
  border: 1px solid #515151;
  padding: 0px 12px;
  margin-left: 15px;
  border-radius: 8px;
  font-weight: bold;
  color: #03dba7;
}
.btn {
  padding: 9px 0;
  display: block;
  cursor: pointer;
  width: 336px;
  font-size: 30px;
  border-radius: 8px;
  margin: 0 auto;
  background: #03dba7;
}

jQuery

var num = 0;
$(".btn").on("click", function() {
  num++
  $(".demo1 &gt; p span").text(num);
});

僕はクリッカー系ゲームが大好きでベッドでずっとiphoneをタップしてるから
クリックで数字が変化するといつまでもクリックし続けちゃう癖がありました。
次に、クリックしたら数を表示する機能を使いランダム数を表示して抽選を作ったりしてみます。

クリックでランダム数(乱数)を表示して抽選みたいなことをしてみる

ランダム数(乱数)を使って抽選をする場合。
1数が決められた範囲の整数、例として「1~50」まででランダムな数を取得。
2一度出た数字は出ちゃいけない。
3出た数字を羅列して後から見返せるようにする。
この1~3を踏まえて作ってみます。

DEMO

抽選番号は番です!

抽選する

    HTML

    「抽選する」ボタンを押すと「.lottery ul」の中に「li」を作りそこに番号をどんどん入れてくイメージです。

    <div class="demo2">
      <p>抽選番号は<span></span>番です!</p>
      <div class="btn2">抽選する</div>
      <div class="lottery">
        <ul>
        </ul>
      </div>
    </div>
    

    CSS

    .demo2 {
      display: block;
      min-height: 200px;
      padding-bottom: 40px;
      text-align: center;
    }
    .demo2 > p {
      font-size: 32px;
      margin-bottom: 32px !important;
    }
    .demo2 > p span {
      display: inline-block;
      border: 1px solid #515151;
      padding: 0px 12px;
      margin-left: 15px !important;
      border-radius: 8px;
      font-weight: bold;
      color: #03dba7;
    }
    .btn2 {
      padding: 9px 0;
      display: block;
      cursor: pointer;
      width: 336px;
      font-size: 30px;
      border-radius: 8px;
      margin: 0 auto !important;
      background: #03dba7;
    }
    .lottery {
      width: 100%;
      padding: 20px 26px;
    }
    .lottery ul {
      text-align: left;
    }
    .lottery li {
      width: 120px;
      padding: 4px 12px;
      text-align: center;
      margin: 0 6px 6px 0 !important;
      display: inline-block;
      background: #cdf7ed;
      border-radius: 8px;
      border: 2px solid #03dba7;
    }
    

    jQuery

    var kazu = 50;
    // ボタンを押すと出る数字を格納する「lottery」を作る
    var lottery = [];
    var i;
    $(".btn2").on("click", function() {
      i = 0;
      // 「kazu(50)」まで行う
      if($(".lottery li").length &lt; kazu) {
        // 1~50までのランダムな数字を「num2」に入れる
        var num2 = Math.ceil(Math.random()*kazu);
        // 「i(0)」が「kazu(50)」になるまで繰り返す
        while(i &lt;= kazu) {
          // 「i(0)」に+1する
          i++
          // 「lottery(出た数字全て)」に「num2(1~50までのランダムな数字)」がなかったら
          if($.inArray(num2, lottery) === -1) {
            // 「lottery」に格納
            lottery.push(num2);
            // 抽選番号は〇番です!に数字を表示
            $(".demo2 &gt; p span").text(num2);
            // 下の結果のリストに表示(appendを使う場合、特殊文字の前に「\」が必要)
            $(".lottery ul").append("\&lt;li\&gt;"+num2+"\&lt;\/li\&gt;");
            // whileループを抜ける
            break;
            // 「lottery(出た数字全て)」に「num2(1~50までのランダムな数字)」があったら
          } else {
            // 「num2(1~50までのランダムな数字)」に新しい1~50までのランダムな数字を代入して再度whileで処理を繰り替えす
            num2 = Math.ceil(Math.random()*kazu);
          }
        }
        // 「kazu(50)」以上になったら
      } else {
        // ボタンの色とテキストを変えて終了
        $(".btn2").text("番号が全て出ました!").css({background: "#e6e6e6", border: "2px solid #515151"});
      }
    });
    

    簡単にできるものだと思っていた抽選も、結構な行数になってしましました。
    これもっと簡単にできるはずだったのにな。。。
    クリックしたら数を表示する機能をリロードボタンを押しても保持しておく方法を紹介して終わろうと思います。
    左上についてる「ブラウザのリロードボタン」と右クリックの「再読み込み」と「F5」と「ctr + R」のリロードには対応しておりません。
    この辺の対応ができたらいいけど、よくわからず。
    分かる方いましたらコメントいただけると嬉しいです。

    クリックした数字をリロードしても保持する

    DEMO

    現在のクリック数

    ここを押してね!
    リロード

    HTML

    <div class="demo3">
      <p>現在のクリック数<span></span></p>
      <div class="btn3">ここを押してね!</div>
      <div class="reload">リロード</div>
    </div>
    

    CSS

    .demo3 {
      display: block;
      height: 300px;
      text-align: center;
    }
    .demo3 > p {
      font-size: 32px;
      margin-bottom: 32px !important;
    }
    .demo3 > p span {
      display: inline-block;
      border: 1px solid #515151;
      padding: 0px 12px;
      margin-left: 15px !important;
      border-radius: 8px;
      font-weight: bold;
      color: #03dba7;
    }
    .btn3 {
      padding: 9px 0;
      display: block;
      cursor: pointer;
      width: 336px;
      font-size: 30px;
      border-radius: 8px;
      margin: 0 auto !important;
      background: #03dba7;
    }
    .reload {
      padding: 9px 0;
      display: block;
      cursor: pointer;
      width: 336px;
      font-size: 30px;
      border-radius: 8px;
      margin: 60px auto 0 !important;
      background: #ff75b3;
    }
    

    jQuery

    // URLの「#」以降を取得して「#」を削除し数字だけにする
    var hush = location.hash.slice(1);
    var num3 = 0;
    // 「#」があったら
    if(hush) {
      // 現在のクリック数[]に数字を入れる
      $(".demo3 &gt; p span").text(hush);
      // num3に数字を入れる
      num3 = hush;
      // 「#」が無かったら
    } else {
      // 現在のクリック数[]に0を入れる
      $(".demo3 &gt; p span").text(0);
    }
    $(".btn3").on("click", function() {
      // num3に+1する
      num3++
      // 現在のクリック数[]に「num3」を入れる
      $(".demo3 &gt; p span").text(num3);
    });
    $(".reload").on("click", function() {
      // 現在の「#」を含めたURL
      var url = location.href;
      // 現在の「#」を含めたURLから今ついてる「#」を削除
      var nohush = url.replace(/#.*$/,"");
      // 「#」を削除したURLに新たに今の「#」を追加
      location.href = nohush + "#" + num3;
      // リロード
      location.reload();
    });
    
    javascriptjQuery

    フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

    仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

    制作のご依頼やお問い合わせはこちらから連絡お願いします。

    エンデ・バタローをフォローする
    シェアする
    初めてのブログ

    コメント

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