「アルバムビンゴゲーム」という記事をみて面白いなぁと思ったのですが、jQueryで書き直したいなぁと思ったので、改定してみたのでご紹介します。
- 番号を書いた写真を用意し、ランダムに表示します
- 一度選ばれた番号は削除されます
- BINGOらしく、それまで選ばれた数字を下に表示していきます。
<!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>
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" />');
デモはこちらになります。
本当は開店ルーレット式にしたかったのですが、作り方が検討もつかなかったので、これになりましたｗ
[asin:B0002YNBT6:detail]