ゲームつくったよ〜楽しいプログラミング〜

久しぶりの記事投稿になります。

息子の受験も無事・・（ではなく、波乱に富んだものとなりましたが^^; ）、一段落がつきましたので、勉強をしつつまたこちらに記録を残していきたいと思います。

〜・〜・〜・〜・〜・

９月の発表では、アナログ時計をつくることにしました。

授業ではデジタル時計をやったので、それを針と目盛りでどのように画像にするのかがポイントです。

メモリを３６０度に配置するというのは意外に難しくて、canvasという機能を使おうとしたのですが、enchant.jsでそれをやろうとしてもそのままではできないことがわかり、・・というような経緯がありました。その辺りのことも含めて、今回は簡単に紙にメモをしておいて発表しました（前回の発表があらら・・状態だったので）のでそのメモも。

・発表のメモ

 

画面タッチでスロットスタート。
２秒で止まって判定します。

「スロット」の授業をお休みしたので、そのときのプリントを先生がくださいました。・・ら、動画で見た書き方と全然違うじゃないですか(^○^)

こちらは「時計を作る」のときにも使ったsetIntervalを使ってスロットを回転させて、何秒後かに一回だけ実行されるというsetTimeoutの中でsetIntarvalを止めるclearIntervalを使って、3秒後にスロットを止めて当たりかどうかを判定する、というやり方でした。回転中にクリックするとおかしくなるので、回転中はタッチできないようにしました。ハズレのときの音もつけていましたが、繰り返すとどうしてもエラーになってしまうので外しました。

この時の授業はお休みしたので動画を見ながらなぞって作ったものです。

息子がかわいらしい音をつけるところまで作ったので、そこから少し改良してボタンでスタート・ストップ、揃ったらクリア画面が出て、またボタンを押すと回せるようにしました。ゲームは何度も繰り返して遊びたいのです！これも当たったら終わりでも良かったのですが、また回せるように改良しようとしたら意外に難しくて苦労しました。この「何度も遊べるようにする」ところでいつも苦労しますね。

コメント以外で//消してあるところは、試行錯誤の時にうまくいかなかったものです。消してしまうとまた同じ間違いを書いてしまうので、これは出来なかったよということがわかるように残してあります。すぐ忘れてしまうので・・。こうして作ったものも、どうやったのか１ヶ月もすると忘れてしまっているので、こうして記録しています。

・改良したところ

ボタンを設置

場合分けをするためにcounterを作って、ハズレが出ても当たりが出ても再度スロットを回せるようにしました。当たりが出ると背景が変わり文字がでるので、再度回し始めるときに文字を消して背景を戻すために工夫が必要でした。

0：最初かハズレの判定が出た時（ボタンを押してスロットルをスタートすることができる）　
1：スロットが回っている間（ボタンを押してもスロットはスタートできない）
2：当たりの判定が出たとき（再度ボタンを押すと背景が戻り、スロットが回る）

として動作を制御しました。

一つのボタンでやろうとするとこのように面倒なことになります。

今回の授業は、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]になる

一般的なルールのビンゴカードを作る

つぎに、これを応用して、日本でのビンゴの一般的なルールにしたがったものを作ってみたいと思ってやってみました。

wikipediaのビンゴより

ルールには無数にバリエーションがあるが、ここでは日本で一般的に行われている代表的なものを示す。一般的にビンゴカードはタテ・ヨコ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を使うと本当に短く書くことが出来て、達成感がありました。あと今見て思ったんですが「配列の配列」ってあるんかな、当然あるでしょうね。（私は汚いコードでも動けばいいという^^;だめよねそれじゃ)

文字の基準が中心で揃っていなっていないのが気になります・・そのうちこれを使って、何かゲームが作れたら作ってみたいと思います・・（授業で話しが出た独りビンゴなんかいいと思うけどなー）

完成したもの

１．時計の表示

今回の授業は、デジタル時計を作るというものでした。

「一秒ごとに何かが起きるというjavascriptの機能を使う」と先生は説明されました。（子供向けにこのような説明の仕方をされるところが面白いですね）

まず、一定時間ごとに処理をするというsetIntervalを使った関数を作ります。

// １秒毎に処理をする
setInterval(function(){
    console.log("Hello!!");
},1000);

時間はミリ秒で指定します。ここでは１秒ごとに処理をしたいので、１秒＝１０００ミリ秒で指定します。

console.logで確かめると、一秒ごとにHello,Hello,と表示されるので、処理されていることが確かめられました。

時計の処理の関数を作って、この中に入れます。（console.logをshowClock();に書き換える）

function showClock(){
    console.log("時計の処理!!")
    // 日付オブジェクト
    var dObj = new Date();
    // 時間を取得する
    var hours = dObj.getHours();//日付から時間をgetする
    console.log(hours);
    var minutes = dObj.getMinutes();//日付から分をgetする
    console.log(minutes);
    var seconds = dObj.getSeconds();//日付から秒をgetする
    console.log(seconds);
}

new Date();で、今現在の日付のデータを取得し、その中に含まれている時間、分、秒を取り出しています。それぞれconsole.logで

10
11
05

のように表示されます。これではわかりにくいので、横並びに表示されるようにします。

    // デジタル時計
    var str = hours + minutes + seconds;//数値として加算されてしまうので間違い
    console.log(str);
    var str = hours + ":" + minutes + ":" + seconds;
    console.log(str);
    var str = hours + "時" + minutes + "分" + seconds + "秒";
    console.log(str);

単に＋でつなぐと、数値として扱われるために、加算されて一つの数値となってしまいます。

そこで、間に文字列を挟むことで、

10:11:05

あるいは

10時11分05秒

と表示させることができました。

２．日付の表示

次は日付です。

    // 年月日を取得する
    var year = dObj.getYear() + 1900;
    console.log(year);
    var month = dObj.getMonth() + 1;
    console.log(month);
    var date = dObj.getDate();
    console.log(date);

これもさっきと同じように、dObjから年、月、日のデータをそれぞれ取り出します。

ここで注意が必要なのは、getYearでは1900マイナスの年が取り出されるので（１９００年台に始まったコンピュータの世界で、下２桁で処理をしていた為と考えられるそうです）、1900をプラスしたのが現在の年になること（代わりにgetFullYearとすると2018で出すことができるようになっている）、月は１月から配列として扱うのが都合がよいので（月は国によって呼び方が異なるから。日本では１月、２月だが、January、 February・・だったり）、１月は０というデータとして与えられるから１を加えること、日付はそのまま（多分これはどこの国でも１日、２日だから）となることです。

これを横並びで表示させるには、時計のときと同じように

    // デジタル日付
    var str2 = year + "年" + month + "月" + date + "日";
    console.log(str2)

となります。

2018年8月25日

と表示されました。

３．曜日の表示

最後に曜日です。

    // 曜日
    var arr = ["日", "月", "火", "水", "木", "金", "土"];
    var day = dObj.getDay();//日付から曜日をゲットする
    console.log(day);
    console.log(arr[day] + "曜日")

まず、曜日の配列を作ります。次に日付のデータから曜日をゲットします。曜日は、日曜日を０として土曜日まで、0,1,2,3,4,5,6という数字で与えられます。今日は土曜日なので6と出ました。

そこで、曜日の配列から、その数値を添字としたものを取り出せば、

土曜日

と今日の曜日が表示させることができました。

４．【感想】

この日の授業は盛りだくさんの、ぼーっとしている暇のないとても濃い授業でした。どうして年は１９００を引かれた値になっているのだろうかとか、コンピュータの起源と歴史にまつわる話が出てきたり、なぜ月のデータは０から始まっているのか、考えてみたら日本では１月２月・・だけど英語圏や他の国では違うよね、日本でも睦月、如月・・と呼んでいたとか、いろいろ興味深い話題もいろいろ出てきました。

それにしても、この日の授業はゲームのように画像が動いたりするのでもなく、ただコンソール画面に表示される数字や文字を見ながら、「おぉー！」とか「わー！」とか盛り上がっているという、なんとまあプログラマーさん（の卵たち）でしょうかと思いました。（知らない人が見たら一体何が面白いの何を喜んでいるのという感じでしょう。）みんな打ち込むのもすごく速くなっているし。

先生方、よくここまで子どもたちを育てられましたね・・と少し感動を覚えた私でした。

Coding泪橋(仮)_No001
平均値を理解する

// 処理１
// 目的：変数と計算を理解する
// 問題：Consoleには何が書き出されるか
var a = 10;
var b = 20;
var c = 30;
var total = a + b + c;
console.log(total);
var avg = total / 3;
console.log(avg);

答え　total:60,  avg:20

// 処理２
// 目的：配列と添字を理解する
// Consoleには何が書き出されるか
var arr= [80, 60, 10];
var total = arr[0] + arr[1] + arr[2];
console.log(total);
var avg = total/ 3;
console.log(avg);

答え　total:150,  avg:50

// 処理３
// 目的：配列と繰り返し処理を理解する
// 問題：Consoleには何が書き出されるか
var arr = [20, 70, 50];
var total = 0;
for (var i=0; i<arr.length; i++){
    total += arr[i];
}
console.log(total);
var avg = total / arr.length;
console.log(avg);

答え　total:140,  avg:46.666666666666664

(繰り返し処理を使って平均値を出す方法。処理２のやり方では数字が多くなると大変だがこれだと簡単）

Coding泪橋(仮)_No002
ランダムを理解する

// 処理１
// 目的：配列を添字を理解する
// 問題：Consoleには何が書き出されるか
var arr = ["プリン", "ヨーグルト", "シュークリーム"];
var str = "おやつに" + arr[0] + "を食べたいぜよ!!";
console.log(str);

答え　おやつにプリンを食べたいぜよ！！

// 処理２
// 目的：ランダムを理解し、整数に変換する事ができる
// 問題：Consoleには何が書き出されるか
var rdm = Math.random() * 3;//Math.randam()とは、0以上１未満のランダムな数
console.log(rdm);
var num = Math.floor(rdm);//Math.floorとは小数点以下切り捨て
console.log(num);
var str = "おやつに" + arr[num] + "を食べたいぜよ!!";
console.log(str);

答え　rdm:(0以上3未満のランダムな小数）,  num:（０，１，２のいずれか）, str:おやつに◯◯◯が食べたいぜよ！！（◯◯◯はランダムに変化）

// 処理３
// 目的：複数のランダム値、配列を用意して自動作文を作る
// 問題：Consoleには何が書き出されるか
var arr1 = ["神様", "俺様", "貴様", "何様"];
var num1 = Math.floor(Math.random() * 4);
var arr2 = ["学校", "ファミレス", "火星", "ハワイ"];
var num2 = Math.floor(Math.random() * 4);
var arr3 = ["勉強", "注文", "探検", "旅行"];
var num3 = Math.floor(Math.random() * 4);
var str = arr1[num1] + "が" + arr2[num2] + "で" + arr3[num3] + "した";
console.log(str);

答え　（ランダムな作文）

下書きしたまま放置の記事が結構ありますが、あんまりきちんとと堅苦しくなると続けられなくなるので、思いつくまま軽い感じでいきたいと思います。

今日の授業は最近の中でも面白く感じたので、記録として書いておきます。

今チャレンジしているゲームですが、実は息子は、今回のテーマの初回の授業を受けた後から、偶然にも、先生がモデルにされたサリータワーと全く同じようなものを作りたいと作り始めていました。左右に移動するもの（授業ではヘリ）から物（授業ではブロック）を落として、積み上げるというものです。

前回の授業では、ブロックが積み上げられたら、ヘリにぶつかってしまうので、そうならないようにヘリを上昇させるにはどうしたらいいでしょうね、というところで終わりました。

息子は続きを作るべく、そこに挑んでみましたが、これは難しいのです。なぜなら、「ブロックが上のほうまで積まれてきたら」というのが問題なのですが、これを判定しようにも、ブロックは一番上の位置から落としているのです。落とす時点で既に一番上にあるのですから、「ブロックの位置から・・」とやろうとすると、落とす時点でもう積んでいる。だから「積まれたブロックの一番上のものから・・」とやろうとするなら、いつ判定するのか、どうやって判定するのかということになります。この時点で、私はもう面倒くさそうと思ってしまい、授業では擬似的な方法で簡単にそれっぽく見せる方法を採られるのではないかと思っていました。

そこで、今日の授業です。授業で示された方法は、「ブロックを落としてから２秒後（連続して落としていても最後に落としたものから２秒後）に、落としたブロックをすべて調べて一番上にあるものの高さを取り、それとヘリの高さを比較して一定以上近ければ離す」というものでした。

先生は「如何に誤魔化すか」と言われましたが、私は結構な正攻法じゃないかと思ってさすが先生と思いました。

    // タッチするとブロックが落ちる（と同時にreadyAlt()が発動）
    scene.on(Event.TOUCH_START, function(e){
        dropBlock();
        // (1) タッチしたタイミングで処理を開始しよう
        readyAlt();    
    });

    function dropBlock(){
        var block1 = new PhyBoxSprite(31, 31, enchant.box2d.DYNAMIC_SPRITE);
        block1.image = core.assets["images/do_daruma.png"];
        block1.x = heli.centerX;
        block1.y = heli.centerY;
        group.addChild(block1);
    }

    // (2) 処理を遅れさせよう（readyAlt()の中身）
    function readyAlt(){
       scene.tl.clear();// これを入れることで、落とす度にリセットされ、最後に落としたものからのカウントになる
       scene.tl.delay(32);// ３２フレーム経ってからceckAlt();が発動
       scene.tl.then(function(){
          checkAlt(); 
       });
    }

    // (3) ブロックを調べる処理（checkAlt()の中身）
    function checkAlt(){
        console.log("高さを調べる");
        // (4-1) グループで最も高い位置にあるブロックを調べる
        //for(初期化；　条件；　後処理；){処理}
        var borderY = 480;// 画面の一番下。これよりブロックは下へ行くことがないので、これをブロックの最上位の位置の初期値とする。
（これとブロックの位置と比較して、それより上の位置なら最上位として更新するという仕組み）
        for(var i=0; i<group.childNodes.length; i++){　// ブロックの数だけ繰り返す（ブロック全部調べる）
            console.log(i);
            var y = group.childNodes[i].y;// ブロックのi番目のｙ座標が取得される。
            console.log(y);
            //高い位置にあれば更新
            if(y < borderY){
                borderY = y;// 繰り返すことで最終的には一番高いyがborderYとなる。
            }
        }
        console.log("最も高い位置にあるのは：" + borderY);
        // (4-2) 高い位置から一定の距離を保つ
        var padding = 130;//　ヘリと一番上のブロックの距離
        if(borderY < heli.y + padding){
              heli.y = borderY - padding;
        }
    }
    
    // (5) スクロールさせる
    scene.setScrollRange(heli,80,0);// ヘリが上に上がっていくと見えなくなるのでスクロールさせる

どうやって一番上のブロックのｙ座標を取り出すのかというと、まずブロックはｙ座標４８０より下に行くことはないので、borderYの初期値を４８０としておきます。そして、１個めのブロックのy座標と比較して、これより上ならそのy座標の値をborderYに書き換え、さらに２個めのブロックも同様・・とブロックの個数分つまり全部で繰り返せば、最終的にborderYが一番高いブロックのｙ座標の値に書き換えられているという訳です。プログラミングではこうやってやるんだーと感心、納得。

こうして順序立てて教えていただくと、想像したより難しくなかったですし、考え方ややり方はほかにも色々応用できそうです。