ビンゴ抽選をjQueryで作る！

ビンゴ抽選をjQueryで作る！
2020年04月02日
この記事は約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をタップしてるから
クリックで数字が変化するといつまでもクリックし続けちゃう癖がありました。
次に、クリックしたら数を表示する機能を使いランダム数を表示して抽選を作ったりしてみます。

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

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

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) {
    // １～50までのランダムな数字を「num2」に入れる
    var num2 = Math.ceil(Math.random()*kazu);
    // 「i(0)」が「kazu(50)」になるまで繰り返す
    while(i &lt;= kazu) {
      // 「i(0)」に＋１する
      i++
      // 「lottery(出た数字全て)」に「num2(１～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(１～50までのランダムな数字)」があったら
      } else {
        // 「num2(１～50までのランダムな数字)」に新しい１～50までのランダムな数字を代入して再度whileで処理を繰り替えす
        num2 = Math.ceil(Math.random()*kazu);
      }
    }
    // 「kazu（50）」以上になったら
  } else {
    // ボタンの色とテキストを変えて終了
    $(".btn2").text("番号が全て出ました！").css({background: "#e6e6e6", border: "2px solid #515151"});
  }
});

    簡単にできるものだと思っていた抽選も、結構な行数になってしましました。
    これもっと簡単にできるはずだったのにな。。。
    クリックしたら数を表示する機能をリロードボタンを押しても保持しておく方法を紹介して終わろうと思います。
    左上についてる「ブラウザのリロードボタン」と右クリックの「再読み込み」と「F５」と「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 {
  // 現在のクリック数[]に０を入れる
  $(".demo3 &gt; p span").text(0);
}
$(".btn3").on("click", function() {
  // num3に＋１する
  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();
});

    コメント

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