今回の授業は、for文を使って、ビンゴカードを自動作成しようというものでした。
二重のfor文
ポイントは、二重のfor文です。「5回の繰り返し」を５回繰り返すことで、５×５の２５個の数字を並べます。
// 二重のfor文(c0,c1,c2,c3,c4を５回繰り返す)
for(var r=0; r<5; r++){
console.log("r" + r);//r0~r4
for(var c=0; c<5; c++){
console.log(" c" + c);
// 座標に応用
var x = 32 * r;// 授業とはrとcが逆（列と行を逆にしたいから）
var y = 32 * c;
console.log(x + ", " + y);
// ラベル
var label = new Label();
label.x = x;
label.y = y;
label.text = "[" + r +","+ c +"]";// こちらも逆にする(これで[列、行]の並びになる)
scene.addChild(label);
label.text = getRandom(1, 75);
}
}
c0からc4をr0からr4まで５回繰り返すということです。(授業でやったものとはrとcを逆にしました。列でまとめたかったからです）
c0~c4が5列に並ぶという形になります。
ラベルのところでテキストを「“[” + r +”,”+ c +”]”」とすることで、
[00][10][20][30][40]
[01][11][21][31][41]
[02][12][22][32][42]
[03][13][23][33][43]
[04][14][24][34][44]
となりました。（ｒが列、ｃが行となっています）
あとは label.text = getRandom(1, 75); で、それぞれの表示を１〜７５の数字をランダムに出るようにすれば、ビンゴカードの出来上がりです。
・・しかし、これだとそれぞれの数のランダムなので、数が重複する場合があります。（それはそれで二つ空けられるラッキーナンバーということにすればいいのかもしれませんが、一般的なビンゴゲームにも一応ルールがあって、その中には数は重複しないというのがあります）
数が重複しないようにシャッフルを使う
そこで、数が重複しないように作るにはどうしたらいいかということで、その方法も教えてくださいました。
ここでダステンフェルドのシャッフルを使います。
// 配列を使ってダブらないビンゴカードにする
// 配列を作る
var nums = [];
for (var i=0; i<25; i++){
nums.push(i);//numsの中にiがプッシュされていく。今iは0~24の25個の数字
}
console.log(nums);
// ダステンフェルドの手法でシャッフルする
for(var i=nums.length-1; 0<i; i--){// iが24から1まで24回繰り返す
var rdm = getRandom(0, i);// rdm：自分の数以下からランダムに選んだ数字一つ
var tmp = nums[i];// 新しくtmpを用意してnum[i]を入れておく
nums[i] = nums[rdm];// nums[i]に選ばれたランダムな数を入れる
nums[rdm] = tmp;// nums[rdm]にtmp（muns[i])を入れる。これで交換完了
}
console.log("nums", nums);
0から２４までの数をシャッフルしています。
どうなっているのかわかりにくいのでそれぞれconsole.logで見てみました。
// ダステンフェルドの手法でシャッフルする
for(var i=nums.length-1; 0<i; i--){// iが24から1まで24回繰り返す
console.log("i:", i, "," , "muns[i]:", nums[i]);
var rdm = getRandom(0, i);// rdm：自分の数以下からランダムに選んだ数字一つ
console.log("rdm:" , rdm , "," , "nums[rdm]:" , nums[rdm]);
var tmp = nums[i];// 新しくtmpを用意してnum[i]を入れておく
console.log("tmp(=nums[i]):" , tmp);
nums[i] = nums[rdm];// nums[i]に選ばれたランダムな数を入れる
console.log("muns[i](=nums[rdm]):" , nums[i]);
nums[rdm] = tmp;// nums[rdm]にtmp（muns[i])を入れる。これで交換完了
console.log("nums[rdm](=tmp):" , nums[rdm]);
console.log(nums);
//全部consoleで見てみる
}
console.log("nums", nums);
すると、このような動きになっていました。
for文の繰り返しの中でその都度配列の順番が変わって上書きされるので、最初はnums[22]は22だったのが、入れ替わったことで途中でnums[22]は24に変わっています。
一度交換の相手になったランダムで選ばれた「数字」は、後ろから順番に入っていって固定され（iは減少していくから）二度と交換されることはありません。そうでないと精度的に正しいシャッフルとなりません。
ラベルで表示する
あとは、ランダムに並べ替えられた数字にindexを用意して、num[0]~num[24]までがラベルのテキストに入るように書き換えて、ランダムに並んだ数字を表示できました。
// インデックス
var index = 0;
//label.text = "[" + r +","+ c +"]";// こちらも逆にする(これで[列、行]の並びになる)
label.text = nums[index];// 初期値は０
index++;// ラベルのテキストがnums[0]からnums[24]になる
一般的なルールのビンゴカードを作る
つぎに、これを応用して、日本でのビンゴの一般的なルールにしたがったものを作ってみたいと思ってやってみました。
ルールには無数にバリエーションがあるが、ここでは日本で一般的に行われている代表的なものを示す。一般的にビンゴカードはタテ・ヨコ5マスずつ、計25個のマス目が書かれている。その内、中央を除く24マスには1から75までの番号のうち24個の番号が書かれており、中央はフリースポットとして最初から有効な番号として扱われる。1枚のカードの中で同じ番号が重複することはない。
カードに書かれる番号は、通常はまったくのランダムで配置されているわけではなく、一番左の列は1-15の中から5個選ばれている。同様に、左から2列目は16-30、中央列は31-45、右から2列目は46-60、一番右の列は61-75から5個ずつ（中央列のみフリースポットがあるので4個）選ばれている
全くのランダムではなく、15づつの数の固まりから５個ずつ選ぶようになっているようですね。
ちょっとややこしそうですが、for文をたくさん使ってやってみました。
１〜１５まで、１６から３０まで、３１から４５まで、４６から６０まで、６１から７５までの数からそれぞれ５つずつランダムに選ぶ必要があるので、それぞれシャッフルした１５個の中から５つを選んでそれを左の列から並べるというやり方で作りました。
まず、nを始めの数とする変数として１５個の数のシャッフルを作る関数 Nums15(n) を作ります。ここでやっていることは、要素１５個の配列をシャッフルして、その最初から５つの目までの数を取り出してnumsselという配列に入れていくという処理です。既にシャッフルされた数なので、そこから５つの数を取り出せば、ランダムで重複しない数となります。
// 目的の配列を用意
var numssel = [];
//nをはじめの数とする15個の数字のシャッフルを作る関数
function Nums15(n){
var nums15 = [];// 15個の配列の入れ物を用意
for (var i=n; i<n+15; i++){
nums15.push(i);// n~n+15までの数を[]に入れる
}
// シャッフル
for (var i=nums15.length-1; 0<i; i--){
var rdm = getRandom(0, i);
var tmp = nums15[i];
nums15[i] = nums15[rdm];
nums15[rdm] = tmp;
}
// 出来たランダムな配列nums15から5つの数字を取り出してnumsselという配列に入れていく。
for(var i=0; i<5; i++){
numssel.push(nums15[i]);// 最初から５つをnumsselに入れていく
}
}
あとは、そのかたまりの始めの数は１，１６，３１，４６，６１なので、その関数をつぎのようなfor文で実行します。
// 実行する。ここでnumsselが最終的に5*5で25個となる
for(var i=1; i<76; i+=15){
Nums15(i);
}
すると、ランダムに選ばれた５つの数を５回入れていくので、numsselには、1~15から5つ、16~30から5つ、31~45から5つ、46~60から5つ、61~75から5つ、合計25個の数が選ばれて入ります。
ただし、真ん中はFreeにしたいので、真ん中はmussel[12]なので
numssel[12] = "free";
とします。
あとは、授業でやったときとおなじように、この配列musselにindexを使ってラベルに対応させて表示させれば、左の列からルールのようにならんだビンゴカードができました。
forをたくさん使ったので、すごくforの練習になりました。functionも使ったので、途中、頭がこんがらがって死にそうになりました。関数は作ってもその実行は別の場所でやる感じなので、コードでは後ろに書いてあっても処理としては戻るような感じになって、あっちこっちで訳がわからなくなりそうでしたが、これも慣れなのでしょうか・・頭の中でforループの処理を同時にシミュレーションできないと書けないと思うので、これがサラッとできちゃうプログラマさんてすごいね。でもfunctionmとforを使うと本当に短く書くことが出来て、達成感がありました。あと今見て思ったんですが「配列の配列」ってあるんかな、当然あるでしょうね。（私は汚いコードでも動けばいいという^^;だめよねそれじゃ)
文字の基準が中心で揃っていなっていないのが気になります・・そのうちこれを使って、何かゲームが作れたら作ってみたいと思います・・（授業で話しが出た独りビンゴなんかいいと思うけどなー）
完成したもの