月別アーカイブ: 2019年9月

ビンゴゲーム管理ソフトA

Aバージョン

ビンゴゲーム管理ソフトで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と小さくしていきます。

それをインデックスにして先ほど並び替えたテーブルを参照してマシンが発番する番号にします。これを繰り返せば空くじはなくなるでしょう。

それにしても空くじはしらけます。早めの対応が課されているようです。

管理機能付きビンゴゲームの動作例

ゲーム画面の左上にあるビンゴ籠をクリックし回転させて開始です。リーチが叫ばれるまで辛抱強く待ってみましょう。一度、リーチやビンゴが起きれば声が重なるほどにぎやかになります。

HTML実行環境の情報取得

動作環境を知るには

HTMLでブログ等を記述しているとき、JavaScriptのコードを入れて動的な表現をして魅力的な表現を試みます。そのとき、公開サーバーに上げる前にローカル環境で動作を確認するのが一般的です。

その場合、両者間で動作が異なることがあります。残念ながらこれは発展途上の分野では避けられないことです。がんじがらめに標準化、統一を目指すのはかえって進歩を阻害します。

そのとき、実行環境がどこにあるか知りたいことがあります。今回、location.hrefを用いた例を紹介します。

location.hrefについて

location.hrefとは、location.href=”URL”;のように設定して、指定したURLへジャンプするときに用いますが、console.log(location.href);のように参照すれば動作しているURLを取得することができます。

ローカル環境の場合は参照したHTMLの格納先、サーバー環境ではURLアドレスが得られるので、単にローカル/サーバーの違いを見分けるには以下のような簡便コードで実現できます。

動作環境を見分ける簡便法

以下にRunStantでHTML実行環境を構築して変数wに最適な値を設定する例を示します。

HTMLコードを入力し右上のPlayボタンをクリックすると左下にコンソール結果が表示されます。

左下部分を拡大します。「http://lite.runstant.com/?v=0.0.3」が表示されています。一方、ローカル環境で動作すると「file:///C:/xxx/yyy/examples/Info.html」のように表示されます。先頭の8文字を解析して動作環境がローカルかそれ以外かを判別しています。

このページの実行結果

開始

サンプルコード

<!DOCTYPE html>
<html>
<div>
<a href="javascript:void(0)" onclick="starting()"><span style="font-size:48px; color:orange;">開始</span></a>
<script type="text/javascript" charset="utf-8">
function starting(){
  document.write(location.href+"<BR>");           // file:///C:/xxx/yyy/examples/Info.html
  var x = location.href.substr(0, 8);             // http://lite.runstant.com/?v=0.0.3
  var w = 780;                                    // server
  if(x=="file:///")   w=440;                      // local
  document.write("X="+x+" W="+w);
}
</script>
</html>

 

音声ファイルの作り方

音声の作り方

ビンゴゲームを作るに当たり、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="https://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とすべきですが、-(ハイフン)はマイナス演算子と誤解されエラーになります。そのため、ハイフンを省き次の文字を大文字にするのが習わしです。これをマスターする時は悩みましたがかなりの月日が経ちました。

背景色動的設定機能を拡張して右の図のようにサインカーブを描いてみました。サイン値は0~2π間で-1~1の値を採りますが、角度を1~12、サイン値を12組に引き当てています。

背景色を動的に設定する機能を応用した描画

BINGO 12345 \/

サンプルコード

<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;">&#x5c;</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>

 

サバイバル生活になじむ

自然に根付いた生活

台風15号による千葉県の災害復旧が思うように進んでいないと報道されています。最近、温暖化の影響か台風でなくともちょっとした暴風雨で大きな災害が起きます。

現代住民は文化的な生活に慣れ過ぎて普段と異なる生活には耐えがたくなっています。

電気、水道、ガスなどのインフラが一つでも欠落すると生きていけないと嘆きます。衣食住が自給自足で回っているわけではないので致し方ありません。

サバイバルの知識が備わっていないのです。トイレが水洗になり清潔になって蚊やハエなどが発生しなくなり伝染病が蔓延することもなくなりましたが、急激な文化的生活の定着は脆さを内包しています。

2011.3.11の東日本大震災の経験が大して活かされていないようです。電気がなくてもしばらくは生活できるようにとは現実、難しいです。

コンロや七輪の扱い方をできる人は少ないです。キャンプ生活などのリクレーションは遠くなり、カセットガスボンベを使った料理をできる人は多くありません。

国土強靱化担当大臣が存在するのにサバイバル人材が育たないのは残念です。一億総右習えのもと、自給自足を目指す人を変わった人間などと評する風潮では難しいでしょう。

多彩な価値観の尊重を!

ビンゴカードの作り方3

再利用などについて

動作や行動について何度も繰り返して利用されるのが一般的です。そのため大きな組織では分厚いマニュアルが用意されています。ソフトウェアやプログラミングにおいても繰り返し利用されることがほとんどです。

そのためには、切れ目にはきちんとした管理がなされなければなりません。お店のレジスターでは購入者ごとに買い物額が累計されるので、開始時には合計値を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)するために、ヒットした回数をリセットしたり、画面を初期状態に戻さなければなりません。

この処理を再利用処理と呼ぶことがあります。再利用処理を含むシステムは通りいっぺんのことを成し遂げ終了するシステムよりも複雑・難解になります。

多人数で起きる事象の研究

ビンゴは2~3人で行うものではありません。ある程度の人数がそろわないと著しく面白みを欠きます。パソコンやスマホ画面は小さく参加者全員のカードを表示することは難しいですが、特定者を選択して時分割に表示することは容易です。

複数人数で起きる事象を独りビンゴを重ねて行うことでおおむね実態に近い体験が可能です。

また、このシステムはビンゴカードを紙で配布しないで参加者のスマホに送付する方式を目指しています。

並びステータス監視を改良

並びは縦5組、横5組、斜め2組の合計12組を制御します。25ポジションがどの組に属するかを制御するには下図に示しテーブルを使うように改訂しました。

テーブルの数値3は縦横、7は縦横左斜め、11は縦横右斜め、15は縦横左斜め右斜めに属します。縦はB~O列、横は一~五行、左斜めは\斜、右斜めは/斜でできごと欄に表示されます。

例えばG列二行に位置する数字にヒットした場合、左のテーブルを参照すると11を得ます。11は縦横右斜めの3組に関与し、横はc4(G列)、縦はc6(二行)を、右斜めはc11(/斜)をカウントアップします。

左の制御テーブルを使用すればカウントすべき組の扱いが簡潔になります。

改良されたビンゴゲーム

ビンゴマシンのボールを入れた籠をクリックしてスタートです。

🎑動作の説明

  1. ビンゴマシンのボールを入れた籠をクリックすると籠が回転し始めビンゴ番号が2秒間隔で確定します。
  2. 選ばれたビンゴ番号がビンゴカードの中にあればヒットになり該当する組の通算回数をカウントアップしピッという確定音が鳴ります。
  3. ヒットしたボールの色がシアンから薄い赤に変化しビンゴカードに穴をあけた状態に変化します。
  4. カウントアップされた値は縦横斜めの所定位置に累計値が表示されます。4でリーチ、5でビンゴ状態です。該当表示欄にできごととして表示されアナウンスが流れます。
  5. ビンゴカードの中に無ければブッという音が鳴ります。
  6. ビンゴが完成し「おめでとう」がアナウンスされビンゴ籠が停止したら、再びビンゴ籠をクリックすると次のビンゴカードを発行することができます。

次回の予定

次回は音声の作り方や設定について語る予定です。

追加説明

サンプルコードの全貌は故あって非公開です。ANDビット演算(たとえばa = b & c;)の文法エラーを解決できずやむを得ず、a = ((a | b) ^ a) ^ b;と代替していることが一因です。

 

ビンゴカードの作り方2

当ブログのスタンス

当ブログでは電子福引き器への応用万華鏡と万葉を彩る恋歌などユニークなゲームを発表してきましたが、完成されたゲームそのものよりもゲームの作り方に重きをおいてきました。

ビンゴゲームについてもグループの懇親会で即、使えそうなゲームではありません。

本格的なビンゴゲームを設計、開発するための指針を語っています。

今回は一人ビンゴゲームのような雰囲気に近く、コンピューターが作り出したビンゴカードを、ビンゴマシンに見立てた乱数生成器によって確定されたビンゴ番号がリーチ、ビンゴ状態になるのを見届けるゲームです。

前回に述べましたが、如何にビンゴカードを作るか、そして、リーチ・ビンゴ状態を如何に把握するかに腐心しています。

ビンゴカードの作り方のおさらい

ビンゴマシンに直接、触ったことはありませんが想像で話を進めます。

ビンゴマシンも様々な形態があるようですが、ここでは左上の図のような籠に右図に示したような1~75の番号が付いているボールを入れて回転させ、ビンゴ番号を決定する仕組みを電子的に実現させます。

一度、出目として出たボールは二度と使われることがないため、ゲームが収束方向に向かいやすくなります。

並びのステータスの監視

ビンゴカードの作り方に加えて重要なのが、並びのリーチ、ビンゴ状態の把握です。並びは縦5組、横5組、斜め2組の合計12組を制御します。

一つのボールは縦と横の最低2組に関与し、左たすき掛けと右たすき掛けのどちらかを加えた3組、両たすき掛けを加えた4組まで存在します。

もっとも高い景品が期待されるのは、N列、三行、左たすき掛け、右たすき掛けが同時にリーチ状態で最後のど真ん中のN列三行にヒットすれば、シングル、ダブル、トリプルを超えてクアドラプルのビンゴ完成です。こうなれば2倍、4倍、8倍返しの褒賞になることでしょう。

今回は、複雑さを解消するためにシングルビンゴの完成でゲーム終了としています。これまでの原理を理解すれば、最終仕様を実現することは難しくないでしょう。

ビンゴゲーム理解のために

本格的なビンゴゲームを作成するために、自動的にシミュレーション動作を行うゲームを取り上げます。ビンゴボールの集まりをクリックしてスタートです。ビンゴの完成でゲームは終了します。リーチとビンゴのできごとを音声でアナウンスします。

🍀動作の説明

  1. ビンゴボール集団画像をクリックするとビンゴ番号が2秒間隔で確定していきます。この画像は次のクリックまで回転し続け、回転後のクリックで停止し動作は中断し再度のクリックでゲームは継続します。
  2. ビンゴ番号がビンゴカードの中にあればヒットになり該当する組の通算回数をカウントアップしピッという確定音が鳴ります。ヒットしたボールの色がシアンから薄い赤に変化しビンゴカードに穴をあけた状態に変化します。
  3. ビンゴカードの中に無ければポッという音が鳴るだけです。この状態が何度も繰り返されることがありますが、実際は複数のカードを対象にするので本番ではもっと少ない回数になるので問題はないでしょう。
  4. ヒットして、縦横斜めの該当する組が通算回数4回のとき、該当組み名とリーチが表示・アナウンスされます。
  5. 次にビンゴ番号が更新されたら同様にヒットの確認が行われてビンゴ完成ではおめでとうと祝福のアナウンスが流れます。
  6. リーチが起きた順にビンゴが完成するとは限りません。
  7. ひとつの番号が複数の組に関与している場合、リーチやビンゴが重複することがありますが、前述のとおり、ひとつに省略しています。

次回の予定

次回は内部動作を把握できるような機能を付けてみます。

 

「500 Internal Server Error」で悩んだら

・htaccessの編集ミス

久しぶりに「500 Internal Server Error」が発生しました。.htaccessファイルを編集した直後に起きたので編集ミスを疑いました。かつては生命に関わるほどの大事故を起こしたようにアタフタしたことがありました。

以前に復旧を急ぐあまり確信を持てぬままに行動に移して大やけどしたことがありました。ブログの内部を更新する場合、サーバーにログインしなければなりませんが、WEBの通信環境を変更するにあたり、いつもと違うパソコンからログインしようとしたりした時には、ロック状態になることがあります。

これは繰り返しの攻撃から保護するものであり、やむを得ぬ仕儀です。上記の図でCGIに関する記事は、許可を得ずにブログの内部を更新しているという状況です。

落ちついた行動

ブログの内部更新のみならず、ブログの閲覧もできない現象にはびっくりするものですが、今回はレンタルサーバーのFTPにより.htaccsessを確認したところ、ファイルの内容が明らかに異なっていたので正しい形式に直し、ブログが正常に復旧しました。

内部ファイルを更新する場合、元のファイルをバックアップするという基本を端折ったのが躓きの始まりでした。初心忘れるべからずを守るべきでした。反省!

ビンゴカードの作り方

ビンゴゲームとは

ビンゴゲームとは正方形、多くは5x5=25個の桝目に数字を書き込んだカードを、ゲーム参加者に配布しておき、ゲーム進行者が回すビンゴマシンの出目(でめ)に一致した箇所に穴をあけ、縦横斜めの5桝を打ち抜いたらビンゴと言って勝者になり、用意した景品を取得するゲームです。

ビンゴゲームは懇親会などのアトラクションに採用され、ゲーム機材は通販で購入することができます。4つ並んだ状態をリーチと称し5つ目を待望するワクワク感を惹起します。

ここではビンゴゲームを何回かに分けてプログラミングを解説します。調査を進めていくとビンゴゲームを作るには参加者に配るビンゴカードを如何に作るかに帰着するとの結論を得ました。

ビンゴカードの特徴

ここでは5x5のビンゴカードについて語ります。当方は豊富なビンゴゲーム体験者ではありませんが、平穏で退屈な生活に刺激をもたらす射幸心などについては一通りの心得を持っているので、ウィナーが同時に複数出るようなことがないように配慮してあります。

右図の横並びは上から一行、二行、三行、四行、五行と、縦列を左から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枚目のカードを作るにはブラウザの再読み込み(🔄)ボタンをクリックします。

BINGO ©TacM,2019 Ver0.01

 

次回の予定

次回はビンゴマシンを使って発表された番号が、配布されたビンゴカードに一致するかどうかをチェックするコードを拡張する予定です。