凸 ブロックのつみかさね

デザイン、技術メモ、レビュー中心の雑記ブログ

アルバムビンゴゲームを改定してみた

アルバムビンゴゲーム」という記事をみて面白いなぁと思ったのですが、jQueryで書き直したいなぁと思ったので、改定してみたのでご紹介します。

どういうプログラムか

  • 番号を書いた写真を用意し、ランダムに表示します
  • 一度選ばれた番号は削除されます
  • BINGOらしく、それまで選ばれた数字を下に表示していきます。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>BINGO!!</title>
</head>
<body>
    <p class="btns">
        <input type="button" id="start" value="スタート">
        <input type="button" id="stop" value="ストップ" style="display:none;">
    </p>
    <section>
        <div id="view"><img src =""></div>
        <div id="out"></div>
    </section>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script type="text/javascript" src="bingo.js"></script>
</body>
</html>

javascript

var bingoNum = 5;  //ビンゴ数
var numList = [];   //ビンゴリスト配列
var isStop = true;  //ルーレットが動いているかどうか
bingoInit();    //ビンゴ初期化

$(function(){
    //スタートボタンをクリック
    $('#start').on({
        'click': function(){
            $(this).hide();
            $('#stop').show();
            isStop = false;
            roulette();
        }
    });
    //ストップボタンをクリック
    $('#stop').on({
        'click': function(){
            $(this).hide();
            $('#start').show();
            isStop = true;
        }
    });
});//end jQuery

//ビンゴ初期化
function bingoInit(){
    for (var i = 0 ; i < bingoNum ; i++){
        numList[i] = i+1;
    }
    $('#view img').attr('src', '');
    $('#out').empty();
}

//ルーレット
function roulette(){
    var id = '';
    var rnd = Math.floor( Math.random() * numList.length );
    $('#view img').attr('src', 'img/'+ numList[rnd] + '.jpg');
    id = setTimeout('roulette()', 100);

    if (isStop == true) {
        // 遅延呼び出しを解除
        clearTimeout(id);
        //メイン画像を表示
        $('#view img').attr('src', 'img/'+ numList[rnd] + '.jpg');
        $('#out').append('<img src="img/'+ numList[rnd] + '.jpg" />');
        //決定した数字をリストから削除する
        numList.splice(rnd, 1);
    }

    // すべてのリストが終わったかチェック
    if ( numList.length == 0 ) {
      alert("すべての数字が出し終わりました");
      bingoInit();
    }
    return false;
}//end roulette

元プログラムと変えた所

配列の生成を簡単に

その時々によって用意する画像の枚数は違うと思うので、最初に変数を用意して、その数だけ配列を自動で作るようにしました。これなら1箇所修正するだけですみます。

for (var i = 0 ; i < bingoNum ; i++){
    numList[i] = i+1;
}

画像の生成をなるべくシンプルに

元プログラムは、すべてimgタグの生成から行っていましたが、メイン画像はソース部分だけ変わればいいので、そのように修正しました。

過去選ばれた数字については、その都度imgタグを追加していかなければいけないので、タグから記載しています。

//メイン画像を表示
$('#view img').attr('src', 'img/'+ numList[rnd] + '.jpg');
$('#out').append('<img src="img/'+ numList[rnd] + '.jpg" />');

デモ

デモはこちらになります。

BINGO!!

今回のつみかさね

本当は開店ルーレット式にしたかったのですが、作り方が検討もつかなかったので、これになりましたw

ビンゴカード200

ビンゴカード200

©blockworks.