友人の結婚式の２次会のためにHTMLとJavascriptでアルバムビンゴ作った話

こんばんは! しんがです。

3Dモデリングがいきづまっているため、別な話題を。。

ビンゴもゲーム開発だよね！ということで、
ちょっと前の話になるのですが、友人の結婚式の２次会で幹事としてちょっとがんばったお話。

２次会の幹事として、大好きな友達のために何か喜んでもらえたらなぁと、色々新しいことにチャレンジしてみました。
当日までの準備がちょっとバタバタしてしまいましたが、何とか成功！

やったのは↓

アルバムビンゴゲーム

要は、ゲストの写真をつかったビンゴゲーム。

２次会のゲストの写真をあらかじめ取っておいてWebアルバムにアップしてもらい、それを加工してビンゴにしました。

f:id:shinga0221:20130910014759j:plain
こんな感じ。(おしゃれグリーン、勝手に使ってごめんね・・・)

①ボードにメッセージを書いて写真を撮る
②写真共有・保存サービス 30days Albumにアップしてもらう
③集まったらDLしてパワーポイントに画像貼り付ける(1枚/ページ)
④ボードにテキストで数字を合成(ひとりひとりフォントを変えたり色々工夫する)
⑤全部終わったら[保存]->ファイル保存形式：PNGで保存

画像サイズがバラバラでも、画像で出力するとスライドのサイズに統一されるので便利。

ソースは以下のサイトを参考にさせて頂き、画像が切り替わるように修正。
ルーレットみたいに数字が変わるビンゴゲームをJavaScriptで作ってみたよ。 - 大人になったら肺呼吸

bingo.html

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
    <link href="bingo.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="bingo.js"></script>
    <title>XX・YY 初夏の大ビンゴ祭!!</title>
  </head>
  <body>
    <header style="text-align:center;">
      <h1>初夏の大ビンゴ祭!!!!</h1>
    </header>
    <section style="text-align:center;">
      <input type="button" id="start" name="start" value="スタート" onclick="startBingo()">
      <input type="button" id="stop" name="stop" value="ストップ" onclick="stopBingo()" style="display:none;">
      <br>

      <div id="view" style="text-align:center;">
         <img src = "img/top.jpg" width='920' height='720'>
      </div>
      <hr />
      <div id="out"></div>
      <hr />
      </section>
      <footer>
        <p style="text-align:center;">Copyright &copy; 
	   <script type="text/javascript">  
              document.write(new Date().getFullYear());
           </script>
           XX・YY結婚式2次会実行委員会 All Rights Reserved.</p>
      </footer>
  </body>
</html>

bingo.js

$ = function(x) {
  return document.getElementById(x);
}

// ビンゴ用数字配列　↓ 
var numList = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,34,35,36,37,38,40,41,42,43,45,48,49,50,51,52,54,55,56,57,58,59,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75];

var isStop = true;

function startBingo() {
  // ボタンの表示切り替え
  $("start").style.display = "none";
  $("stop").style.display = "inline";
  isStop = false;
  roulette();
}

function stopBingo() {
  // ボタンの表示切り替え
  $("start").style.display = "inline";
  $("stop").style.display = "none";
  isStop = true;
}

function roulette() {
  var id = "";
  var rnd = Math.floor(Math.random() * numList.length);
  
  //画像タグ
  var imgTag = "<img src = 'img/スライド" + numList[rnd] + ".jpg' width='920' height='720'>";
  var imgTagS = "<img src = 'img/スライド" + numList[rnd] + ".jpg' width='230' height='180'>";
  
  // ストップボタンが押された
  if (isStop) {
    // 遅延呼び出しを解除
    clearTimeout(id);
    
  	$("view").innerHTML = imgTag;
    if (!$("out").innerHTML) {
      $("out").innerHTML = $("out").innerHTML + imgTagS;
    }
    else {
      $("out").innerHTML = $("out").innerHTML + "　" + imgTagS;
    }
    
    //決定した数字をリストから削除する
    numList.splice(rnd, 1);
    // リストが空になったら終了
    if (numList.length == 0) {
      alert("最後です。");
      $("start").disabled = true;
    }
    return false;
  }
  
  // 乱数を画面に表示
  $("view").innerHTML = imgTag;
  //$("view").innerText = numList[rnd];
  // 100ms後に再帰的に実行するよう登録する
  id = setTimeout("roulette()", 100);
}