結婚式や創業祭などは人生の中でそう何度も体験しないものです。記念のイベントを催すに当たり、特注のビンゴゲームで盛り上げてみませんか。それを制御する中核はスマホに収納されています。
会場の映像設備がユーザーに開放されるかどうかにもよりますが、スマホの画像をオンラインで表示できる時代です。
スマホ、パソコン用に開発したオンラインゲームで人生の節目にインパクトを付けて見ましょう。
今回、オリジナル画像は開始時、終了時には主催者を称える動画が表示されます。ビンゴ番号が更新されるタイミングで参加者をクローズアップして描写する演出が可能です。
主催者のアイデアに寄り添い世界に二つとない企画でイベントを盛り上げよう。
ビンゴ籠をクリックして開始です。ビンゴ籠の回転はChromeブラウザが脈動なしでスムースです。
ビンゴゲーム管理ソフトでAバージョンをリリースします。まだ改良点はたくさんあるようですがを一応の区切りです。アメリカの半導体ビジネスでは製品化済みの商品の改訂版にはA,B,Cと枝番を振る慣わしがありました。
画期的なマイコン8ビットCPU Intel8080が世に出ましたが、使いにくい点を改訂したのがIntel8085でした。更に改良して8085Aが出荷されたと記憶しています。それに因んでAを使ってみました。改良点は実際のビンゴマシンの動きに近づけて一度使ったビンゴボールを使わないようにして空（から）くじをなくしたことです。ビンゴボールの番号は1～75の75種ですが、一度出現した番号は二度と現れないような処理を追加しています。抽選回数が増えるごとに動きが軽くなります。
これら動作は電子的システムの得意とする分野です。また、参加者ごと、抽選回数ごとの処理の切れ目が分かるように間を置いたり背景色を変えています。背景色変更の効果が記事全体に及ぶのはやり過ぎでしょうか。「あちら立てればこちらが立たず」一筋縄ではいかぬものです。
結婚式場などのイベント会場には巨大モニタ画面が備わっているようです。また、パブリックビューイングでスポーツなどが観覧できるようになりましたので、紙による抽選ゲームからエレクトリックゲームへの転換が一段と進むことでしょう。
①参加人数の入力
②カード番号と参加者の対応付け
③抽選タイミングの指定
④ゲームの記録を残す
ゲーム画面の左上にあるビンゴ籠をクリックし回転させて開始です。リーチが叫ばれるまで時間がかかりますが一度、リーチやビンゴが起きればにぎやかになります。
今回、抽選のタイミングで背景色を変更しましたがウィジェット欄を含むすべての背景色に及び期待した動作ではありません。
ローカル環境では問題が起きてないので、調査を進めると当記事のJavaScriptオブジェクトidに”main”という名付けをしていることが原因でした。
この名前はウィジェット欄を表示させるコードで既に使用されているようです。id名をユニークな名前に変更したところ、期待した動作が得られました。
ウィジェット欄のコードはWordPressなどのサポートシステムが管理しているので個別に確認することはできません。ウ~ムなかなか難しい問題と言えるでしょう。
ビンゴゲームを作って楽しく遊ぶための研究用記事です。今回、20人のビンゴゲーム参加者のゲーム完成状況を時々刻々、表示する機能を追加しました。
ひとりのビンゴカードにおいて縦、横、斜めの12組がビンゴマシンが発する番号と如何に合致しリーチやビンゴ状態に達したかを一目で把握します。
ビンゴマシンが1～75の数を決定すると参加者はビンゴカードにその番号があるかどうかチェックし、あればその部分に穴をあけます。
12組のどれかに4個の穴がそろったらリーチと、5個の穴がそろったらビンゴと叫びます。確率的には少なくなりますが2組、3組、4組が同時に成立することもあります。
その時は一段と気張ってダブルリーチ、トリプルビンゴなどと声を出してもいいかもしれません。
これら一連の動作をビンゴゲーム管理ソフトが処理します。カードマシンの籠から出たボールは再び籠に戻ることはなく、そのため空（から）くじが起きることはないでしょう。
このチェックはまだ施されてないのでたびたび空くじが起きています。空くじなしにする方法で可能ですが実施は次回以降になります。
空くじなしというか必ずどれかにヒットする完全な方法は、20人全員の発番に用いたボールのみをビンゴマシンの籠に用意します。加えて使い切ったボールを削除する処理を追加すればいいようです。
処理的には1～75のうち、利用したボールの値を、例えば999などと改変し、ソーティングして小さい順に並び替えその上、発生する乱数を1～74と小さくしていきます。
それをインデックスにして先ほど並び替えたテーブルを参照してマシンが発番する番号にします。これを繰り返せば空くじはなくなるでしょう。
それにしても空くじはしらけます。早めの対応が課されているようです。
ゲーム画面の左上にあるビンゴ籠をクリックし回転させて開始です。リーチが叫ばれるまで辛抱強く待ってみましょう。一度、リーチやビンゴが起きれば声が重なるほどにぎやかになります。
ビンゴゲームを作るに当たり、MP3やWAV形式の音声を作るには、テキストを音声に変換してくれるサイトが便利です。今回、Sound of Textを利用させていただきました。
サイトを参照すると上図の①の画面が現れます。Text欄に変換する文言、Voice欄で言語を選択してSubmitをクリックすれば、②の画面が現れます。変換するテキストを確認してDOWNLOADをクリックすると、所定のフォルダにmp3ファイルがダウンロードされます。
「リーチ」、「ビンゴ」などの掛け声や感嘆詞音声はサイト上に多く存在し、ダウンロードフリーのものを用意できますが、ユーザーフレンドリーなメッセージは独自に準備します。『カード番号一番さん、ビンゴ完成です。あめでとうございます。』のようなメッセージ音声ファイルを作りました。
<!DOCTYPE html> <html> <body> <DIV id="top" style="width:480px; height:400px; font-size:24px; color:deeppink; border:1px solid green; display:block;"> <audio id="apology" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/09/pardonme.mp3" controls controlslist="nodownload"></audio><BR> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTeIePErZuNGrIvnBBjYQoeTFz-DsGHMUV0ady7SMI3UltzSWsChQ" width="320" height="307" align="left" border="1">《音声で意思疎通！》<BR><BR>けさ、ちょっと言い過ぎました。ごめんなさい！ </DIV> </body> </html>
ビンゴゲームをJavaScriptで作成するに当たり、様々な機能を分担するパーツから成り立ちます。今回、参加者全員のヒット状態を一覧表に表示するパーツを作成しました。
thやtd要素へのアクセスは独特の方法がありますが、ここではそれぞれにidを付加したオーソドックスな方法を採用しています。
背景色を動的に設定するにはdocument.getElemeniById(‘idxx’).style.backgroundColorに背景色を代入します。
例えば、下の図に示すようにカード番号3番の12組のヒット数を表示しています。G列がビンゴ、5行目がリーチであり、背景色をそれぞれマゼンタ、ディープスカイブルーでそれ以外はヒット回数を表しています。
余談ですがスタイルシートにはbackground-colorプロパティがあり、背景色を指定するにはstyle.background-colorとすべきですが、-（ハイフン）はマイナス演算子と誤解されエラーになります。そのため、ハイフンを省き次の文字を大文字にするのが習わしです。これをマスターする時は悩みましたがかなりの月日が経ちました。
背景色動的設定機能を拡張して右の図のようにサインカーブを描いてみました。サイン値は０～２π間で-1～1の値を採りますが、角度を1～12、サイン値を12組に引き当てています。
| B | I | N | G | O | 1 | 2 | 3 | 4 | 5 | \ | / |
|---|
<Div id="wrapper" style="width:180px; font-size:20px; background:aliceblue;">
<table id="status" style="text-align:center; border-collapse:collapse; width:20px; font-size:14px;" border=1>
<tr><th> </th><th bgcolor="pink">B</th><th bgcolor="pink">I</th><th bgcolor="pink">N</th><th bgcolor="pink">G</th><th bgcolor="pink">O</th>
<th bgcolor="lime">1</th><th bgcolor="lime">2</th><th bgcolor="lime">3</th><th bgcolor="lime">4</th><th bgcolor="lime">5</th>
<th bgcolor="yellow"><span style="font-family:Arial;">\</span></th><th bgcolor="peachpuff">/</th></tr>
</table>
</Div>
<script type="text/javascript" charset="utf-8">
var v, w, x;
var table = document.getElementById('status'); // table要素を生成
for (var i = 1; i <= 12; i++) { // tr部分のループ
var tr = document.createElement('tr'); // tr要素を生成
for (var j = 0; j < 13; j++) { // th・td部分のループ
x='n'+letter2(i)+letter2(j); // id作成
if(j==0) {v='th';w=i;} // th table-header
else {v='td';w=0;} // td table-data
var td = document.createElement(v); // th・td要素を生成
td.id = x; // th・td要素にidを付ける
td.textContent = w; // th・td要素内にテキストを追加
tr.appendChild(td); // th・td要素をtr要素の子要素に追加
}
table.appendChild(tr); // tr要素をtable要素の子要素に追加
}
document.getElementById('wrapper').appendChild(table); // 生成したtable要素を追加する
document.getElementById('n0301').innerHTML = 2;
document.getElementById('n0302').innerHTML = 0;
document.getElementById('n0303').innerHTML = 1;
document.getElementById('n0304').innerHTML = 5;
document.getElementById('n0304').style.backgroundColor = "magenta";
document.getElementById('n0305').innerHTML = 3;
document.getElementById('n0306').innerHTML = 2;
document.getElementById('n0307').innerHTML = 0;
document.getElementById('n0308').innerHTML = 0;
document.getElementById('n0309').innerHTML = 1;
document.getElementById('n0310').innerHTML = 4;
document.getElementById('n0310').style.backgroundColor = "deepskyblue";
document.getElementById('n0311').innerHTML = 3;
document.getElementById('n0312').innerHTML = 2;
function letter2(num) {return ('0' + num ).slice(-2);} <!-- send '01' -->
</script>
動作や行動について何度も繰り返して利用されるのが一般的です。そのため大きな組織では分厚いマニュアルが用意されています。ソフトウェアやプログラミングにおいても繰り返し利用されることがほとんどです。
そのためには、切れ目にはきちんとした管理がなされなければなりません。お店のレジスターでは購入者ごとに買い物額が累計されるので、開始時には合計値を0にしますが、その前に一日の売り上げや支店ごとの売り上げ管理のために累計加算がなされます。
下記のサンプルはsumというグローバル変数を利用する前にリセットすべきであることを示しています。これに対しsumationという関数のローカル変数totalは毎回、利用される直前にクリアされます。
<script>
var sum=0; //グローバル変数
for(var i=0; i<=10; ++i) sum+=i;
alert("SUM10="+sum); //55
for(var i=0; i<=20; ++i) sum+=i;
alert("SUM20="+sum); //265
sumation(10); //55
sumation(20); //210
function sumation(n){ //総計算出
var total=0; //ローカル変数
for(var i=0; i<=n; ++i) total+=i;
alert("N="+n+" TATOL=" + total); //10 55, 20 210
}
</script>
このビンゴ運用研究システムでは、複数のビンゴカードを作成するに当たり、1回目、2回目とプログラムコードを再利用（リユース, reuse）するために、ヒットした回数をリセットしたり、画面を初期状態に戻さなければなりません。
この処理を再利用処理と呼ぶことがあります。再利用処理を含むシステムは通りいっぺんのことを成し遂げ終了するシステムよりも複雑・難解になります。
ビンゴは２～３人で行うものではありません。ある程度の人数がそろわないと著しく面白みを欠きます。パソコンやスマホ画面は小さく参加者全員のカードを表示することは難しいですが、特定者を選択して時分割に表示することは容易です。
複数人数で起きる事象を独りビンゴを重ねて行うことでおおむね実態に近い体験が可能です。
また、このシステムはビンゴカードを紙で配布しないで参加者のスマホに送付する方式を目指しています。
並びは縦5組、横5組、斜め2組の合計12組を制御します。25ポジションがどの組に属するかを制御するには下図に示しテーブルを使うように改訂しました。
テーブルの数値3は縦横、7は縦横左斜め、11は縦横右斜め、15は縦横左斜め右斜めに属します。縦はB～O列、横は一～五行、左斜めは＼斜、右斜めは／斜でできごと欄に表示されます。
例えばG列二行に位置する数字にヒットした場合、左のテーブルを参照すると11を得ます。11は縦横右斜めの3組に関与し、横はc4（G列）、縦はc6（二行）を、右斜めはc11（／斜）をカウントアップします。
左の制御テーブルを使用すればカウントすべき組の扱いが簡潔になります。
ビンゴマシンのボールを入れた籠をクリックしてスタートです。
次回は音声の作り方や設定について語る予定です。
サンプルコードの全貌は故あって非公開です。ANDビット演算（たとえばa = b & c;）の文法エラーを解決できずやむを得ず、a = ((a | b) ^ a) ^ b;と代替していることが一因です。
当ブログでは電子福引き器への応用や万華鏡と万葉を彩る恋歌などユニークなゲームを発表してきましたが、完成されたゲームそのものよりもゲームの作り方に重きをおいてきました。
ビンゴゲームについてもグループの懇親会で即、使えそうなゲームではありません。
本格的なビンゴゲームを設計、開発するための指針を語っています。
今回は一人ビンゴゲームのような雰囲気に近く、コンピューターが作り出したビンゴカードを、ビンゴマシンに見立てた乱数生成器によって確定されたビンゴ番号がリーチ、ビンゴ状態になるのを見届けるゲームです。
前回に述べましたが、如何にビンゴカードを作るか、そして、リーチ・ビンゴ状態を如何に把握するかに腐心しています。
ビンゴマシンに直接、触ったことはありませんが想像で話を進めます。
ビンゴマシンも様々な形態があるようですが、ここでは左上の図のような籠に右図に示したような1～75の番号が付いているボールを入れて回転させ、ビンゴ番号を決定する仕組みを電子的に実現させます。
一度、出目として出たボールは二度と使われることがないため、ゲームが収束方向に向かいやすくなります。
ビンゴカードの作り方に加えて重要なのが、並びのリーチ、ビンゴ状態の把握です。並びは縦5組、横5組、斜め2組の合計12組を制御します。
一つのボールは縦と横の最低2組に関与し、左たすき掛けと右たすき掛けのどちらかを加えた3組、両たすき掛けを加えた4組まで存在します。
もっとも高い景品が期待されるのは、N列、三行、左たすき掛け、右たすき掛けが同時にリーチ状態で最後のど真ん中のN列三行にヒットすれば、シングル、ダブル、トリプルを超えてクアドラプルのビンゴ完成です。こうなれば2倍、4倍、8倍返しの褒賞になることでしょう。
今回は、複雑さを解消するためにシングルビンゴの完成でゲーム終了としています。これまでの原理を理解すれば、最終仕様を実現することは難しくないでしょう。
本格的なビンゴゲームを作成するために、自動的にシミュレーション動作を行うゲームを取り上げます。ビンゴボールの集まりをクリックしてスタートです。ビンゴの完成でゲームは終了します。リーチとビンゴのできごとを音声でアナウンスします。
次回は内部動作を把握できるような機能を付けてみます。
ビンゴゲームとは正方形、多くは5ｘ5＝25個の桝目に数字を書き込んだカードを、ゲーム参加者に配布しておき、ゲーム進行者が回すビンゴマシンの出目（でめ）に一致した箇所に穴をあけ、縦横斜めの5桝を打ち抜いたらビンゴと言って勝者になり、用意した景品を取得するゲームです。
ビンゴゲームは懇親会などのアトラクションに採用され、ゲーム機材は通販で購入することができます。4つ並んだ状態をリーチと称し5つ目を待望するワクワク感を惹起します。
ここではビンゴゲームを何回かに分けてプログラミングを解説します。調査を進めていくとビンゴゲームを作るには参加者に配るビンゴカードを如何に作るかに帰着するとの結論を得ました。
ここでは5ｘ5のビンゴカードについて語ります。当方は豊富なビンゴゲーム体験者ではありませんが、平穏で退屈な生活に刺激をもたらす射幸心などについては一通りの心得を持っているので、ウィナーが同時に複数出るようなことがないように配慮してあります。
右図の横並びは上から一行、二行、三行、四行、五行と、縦列を左からB列、I列、N列、G列、O列と呼ぶことにし、現れる5個の数字を
| B列 | I列 | N列 | G列 | O列 |
| 1～15 | 16～30 | 31～45 | 46～60 | 61～75 |
に設定します。どの列も同じ数字は現れません。ゲーム参加者は8~15名ほどが望ましく、25桝すべての値が同じでなければ他者のカードの一部が同値であっても問題は起きません。
今回は複雑さを削除するため、たった一枚のビンゴカードを作成します。
当記事を参照すれば一枚のビンゴカードが出来上がります。番号は乱数を用いて決定されるので毎回、異なります。よって、2枚目、3枚目のカードを作るにはブラウザの再読み込み（🔄）ボタンをクリックします。
次回はビンゴマシンを使って発表された番号が、配布されたビンゴカードに一致するかどうかをチェックするコードを拡張する予定です。
トリミングとはコンピューターで画像を加工するとき、画像の周囲や映像の前後を切り取って、必要な部分だけを抜き出し画面を整えることを言います。ここでは10種の動物を集めた1枚の画像から指定された動物をクローズアップします。合わせてタイマー管理を紐解きます。
トリミングするには多くはclip:rectを用いますが、今回、position:relativeにoverflow:hiddenを指定し、合わせてposition absoluteを併用して必要な画像を切り抜いています。
一つのことを実現するに当たり様々な方法が存在します。いろいろな手法を身に着けることによって深みのある文書や作品を作成することができます。
<html>
<body>
<img id="uenozoo" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/06/animals10.png" width="385px" height="160px">
<DIV style="font-size:24px;">
<button onclick="if(v==0)setClip();">開始</button><span id="num1" style="color:red">❼whale</span>
<span id="num2" style="color:blue">クジラ</span>
</DIV>
<DIV style="position:relative; width:300px; height:300px; overflow:hidden; border:0px solid green;">
<div id="sample" style="position:absolute; left:-300px; top:-150px; width:750px; height:300px; zoom:2.0;">
<img id="animal" src="http://aidesign.lolipop.jp/wp-content/uploads/2015/08/animal10.png">
</div>
</DIV>
<div style="font-size:12px;">©TacM,2019 Ver0.01</div>
<script type="text/javascript" charset="utf-8">
const animal_10=['squirrel', 'bear', 'racoon-dog', 'lion', 'fox', 'giraffe', 'elephant', 'whale', 'koala', 'hippopotamus'];
const animalName = ["リス", "クマ", "タヌキ", "ライオン", "キツネ", "キリン", "ゾウ", "クジラ", "コアラ", "カバ"];
var v=0;
function setClip(){ //animal10.png original-size : 750*300
document.getElementById( "sample" ).style.left = (- v % 5 * 150) + 'px';
document.getElementById( "sample" ).style.top = (-Math.floor(v / 5) * 150) + 'px';
document.getElementById("num1").innerHTML ="\u24ff\u2776\u2777\u2778\u2779\u277a\u277b\u277c\u277d\u277e".substr(v, 1) + animal_10[v];
document.getElementById("num2").innerHTML = animalName[v];
if(++v < 10) setTimeout(setClip, 2000);
else v = 0;
}
</script>
</body>
</html>
開始ボタンを押してスタートです。
<div style="font-size:26px; color:violet;">音楽を鳴らす<span style="font-size:12px; color:blue;"> ©TacM,2019 Ver0.01</span></div> <audio id='bgm' src="http://aidesign.lolipop.jp/wp-content/uploads/2019/04/oninopantsu.mp3" controls controlslist="nodownload"></audio> <div id="kyoku" style="height:24px; font-size:14px; line-height:2.0em; border:0px solid navy;">おんがく:オニのパンツ</div>
音楽を鳴らすにはaudioタグを用います。タグという言葉が出ましたが初めて出会う方は画像を表示したり音楽を鳴らすための仕組みと理解してください。タグは100を超える種類があり少しずつ理解していきます。タグや要素の意味を図にしてみました。
上記のように開始タグと終了タグがあります。divはdivision、hはheader、pはparagraphのように英単語の1字以上の短縮形から成り立っています。
タグの説明は図にする場合が多いです。説明のために小なり(Less Than)や大なり(Greater Than)の記号を本文記事の中に置くとタグとして機能し、説明文が乱れることがあるためです。
今回はタグの説明でした。