友人の結婚式の2次会のためにHTMLとJavascriptでアルバムビンゴ作った話
こんばんは! しんがです。
3Dモデリングがいきづまっているため、別な話題を。。
ビンゴもゲーム開発だよね!ということで、
ちょっと前の話になるのですが、友人の結婚式の2次会で幹事としてちょっとがんばったお話。
2次会の幹事として、大好きな友達のために何か喜んでもらえたらなぁと、色々新しいことにチャレンジしてみました。
当日までの準備がちょっとバタバタしてしまいましたが、何とか成功!
やったのは↓
アルバムビンゴゲーム
要は、ゲストの写真をつかったビンゴゲーム。
2次会のゲストの写真をあらかじめ取っておいてWebアルバムにアップしてもらい、それを加工してビンゴにしました。
こんな感じ。(おしゃれグリーン、勝手に使ってごめんね・・・)
①ボードにメッセージを書いて写真を撮る
②写真共有・保存サービス 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 © <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); }
2次会の時はプロジェクターに映してやったんだけど、数十名分の写真が次々切り替わって結構すごい迫力。
結婚式お呼ばれマスターの後輩も、「初めて見た!すごくいいね!」と絶賛してくれました(笑)
もうひとつやったのは↓
リアルタイムスライドショー
写真共有・保存サービス 30days Albumに結婚式や2次会の当日の写真をアップしてもらって、2次会の最中、ずっとスライドショーにして流してました。
スライドショーも写真共有・保存サービス 30days Albumに機能としてあって、アップするとリアルタイムではんえいされます。
こちらも好評で、しかも式が終わったらそのまま写真を共有できて超便利。
準備の時は、なかなか写真が集まらなくて、焦ったけど何とか喜んでもらえて大成功でした!
結婚式の2次会のネタがないときは使ってみてください(笑)
それでは、おやすみなさい。