カテゴリー: 解説

前に書いた「フィッシャ–イェーツのシャッフルを視覚化してみる」のところで、ウィキペディアの説明が間違っているような気がするということを書きましたが、やっぱり合っていたので、その理由も加えて訂正しました。

クリックすると、猿がりんご、バナナ、さくらんぼのどれかをランダムに落とします。

落とした分だけ得点にカウントされますが、地面に落ちた分はマイナスされるので、かごに積んだ分が得点になります。

時間は５０秒で、スコアと、りんご、バナナ、さくらんぼの数の分の絵が表示されます。

作り込みの授業のときに困ったところをいくつか先生に助言をいただいたおかげでそのときにすごく進めることができたみたいで喜んでいました。やっぱり一人で作るより助けを借りて作ったほうがいいですね。

最後に、結果画面のところに、「積んだ果物をそれぞれの個数分で画像で並べて出したい」と言い出して、(ﾉ∀`)ｱﾁｬｰまた難しそうなことを（ﾔﾒﾃｰ）・・と思いましたが、偶然にも私の助言のおかげで（ｴｯﾍﾝ）実現することができました。

その結果画面について、難しかったので覚えで書いておきます。息子に説明してもらいました。

何が難しいかというと、

①りんご、バナナ、さくらんぼの数はそれぞれその都度異なる。

②それぞれその都度異なる数のものを、等間隔に並べて表示する。（ｘ座標の問題）

③端まできたら、次の行に移して並べていく。（ｘ，ｙ座標の問題）

どういうアルゴリズムでやればいいのでしょうか？

①りんご、バナナ、さくらんぼの数を配列にしてセーブします

var howmanyF = [0,0,0];//フルーツの数を入れておく配列をつくる(howmanyF[0]がりんごの数、
howmanyF[1]がバナナの数、howmany[2]がさくらんぼの数)

function dropBlock(){
    var fruits1 = new PhyBoxSprite(32,32, enchant.box2d.DYNAMIC_SPRITE,1,0.5,0);
    var rdm = getRandom(0,2);
    //ifと同じだが２つ以上だとこっちが楽
    switch(rdm){
        case 0: fruits1.image= core.assets["images/cf307/monkeyapple.png"];
            howmanyF[0] +=1;//りんごを落としたらりんごの数が＋１される
            break;
        case 1: fruits1.image= core.assets["images/cf307/banana.png"];
            howmanyF[1] +=1;//バナナを落としたらバナナの数が＋１される
            break;
        case 2: fruits1.image = core.assets["images/cf307/sakuranbo.png"];
            howmanyF[2] +=1;//さくらんぼを落としたらさくらんぼの数が＋１される
            break;
    }

（略）

// (2)当たり判定(ground x group)//フルーツが地面に当たったら
ground.addCollision(group);
ground.on(Event.COLLISION, function(e){
    //console.log(e);
    var target = e.collision.target;
    target.remove();
    switch(target.image){
        case core.assets["images/cf307/monkeyapple.png"]:
            console.log("aplle");
            howmanyF[0] -=1;//りんごだったらりんごの数を-1する
            break;
        case core.assets["images/cf307/banana.png"]:
            console.log("banana");
            howmanyF[1] -=1;//（以下同様）
            break;
        case core.assets["images/cf307/sakuranbo.png"]:
            console.log("さくらんぼ");
            howmanyF[2] -=1;//（以下同様）
            break;
    }
    if(score != 0){
        score--;
    }
});

rope.tl.delay(16);
rope.tl.then(function(){
    timer--;
    console.log("あと"+ timer + "秒");
    timelabel.text = "TIME: " + timer;
    if(timer <= 10){
        timelabel.color = "red";
    }
    if(timer == 0){//0秒になったら
        BGM.stop();//音を止める
        console.log("おしまい");
        console.log(howmanyF);
        localStorage.setItem("howmanyF", howmanyF);//howmanyFをセーブする
        localStorage.setItem("monkey_score", score);
        endStart();
    }
});
rope.tl.loop();

②りんご、バナナ、さくらんぼをセーブした個数分画像で並べる

例えば、りんごを１５個並べたいとき、１０個目までは３２ピクセルずつずらしてならべ、１１個目からはまたｘ座標は０に戻さないといけないのです。

x座標で言うと、０のときは０、１のときは３２×１、２のときは３２×２、・・・９のときは３２×９、そして１０のときはまた０に戻る、これはどう書けばいいのか・・

息子は悩みはじめました。こんな数学の問題は学校ではでてきません。どんな数式でしょうか。

要は０〜９まではそれぞれ対応して０〜９で、１０〜１９までまた戻って０〜９、２０から２９までまた戻って０〜９（この繰り返し）になればいいのです。だから、「１０で割ってその余りの数の・・」というところまで息子は考えたのですがわかりませんでした。

そこで私が思い出したのは、ブロック崩しもどきのゲームを作ったときに、先生のサンプルから真似して見よう見まねで書いたものの中に、ブロックをきっちりすきまなく順番に並べて置いていくというものを作ったことをうっすら思い出しました。意味もわからず見よう見まねで書いたものがあったよね、それがもしかしたら参考になるのでは？と息子に言って見せると

block.x = 0 + ((i % 40) * 8);//（iを４０で割った数の余り）×８
block.y = 0 + (Math.floor(i / 40) * 8);//（iを４０で割った商の小数点を切り捨てた数）×８

↑これだ！これがやりたかったの！これのことだったんだ！と感激していました。

これって・・言われればそのとおりだけど、思いついた人はすごいと思う。

％というのは、「割った余りの数値」です。Math.floorとは「小数点を切り捨て」です。

上の例だと、８ピクセルのブロックを４０個ずつ並べたいので、iを４０で割った余りの８倍をx座標にすれば４０までは i （×８）ずつ増えて４０で０に戻り、iを４０で割った商の小数点を切り捨てた数の８倍をｙ座標にすれば、iが４０増えるごとに １（×８）ずつ増えるので４０個ずつで行が下に行くことになります。

ということで、母のかすかな記憶のおかげで偶然にも解決できました。見よう見まねで作ってみたものがこんなところで役に立つとは。おかげで私も、初めてこれの意味を理解することができました。

さらに、ブロックは一種類でしたが今回はりんご、バナナ、さくらんぼを三種類を画像を変えて並べないといけないので、iの数を前の果物の数だけ加えてずらすという工夫が必要でした。

以下コメント部分はゆうじの解説です。

function endStart(){// 結果画面
    scene = new Scene();
    core.replaceScene(scene); core.resume();

    //==========
    // ここから
    //==========

    var sound = core.assets["sounds/cf307/trumpet1.mp3"].clone();
    sound.play();

    Fruits = Class.create(Sprite, {　// フルーツというクラスを、Spriteを継承させてつくる
        initialize: function(image){　// クラスのものをつくるときに行う　imageが引数
            Sprite.call(this,32,32);　// 継承したものを呼び出す（これ、32,32）
            this.image = core.assets[image];　//そのクラスのプロパティを設定
        }
    });

    var howmany = localStorage.getItem("howmanyF");　// howmanyFで名付けた配列を取り出して
                                                     howmanyと名付ける
    var howmanyA = howmany.split(",");　// howmanyを区切って取りしたものをhowmanyAとする
    var howmanyN =[];// 空っぽの配列を作る
    for (var n in howmanyA) {　// howmanyAの中身を順番に数字にする（長さ分だけ繰り返す例えば、
                               2,3,5とかなら３）
    var N = Number(howmanyA[n]);　// howmanyAのn番目を文字列から数値にする（文字列として保存
                                 されているから）
    howmanyN.push(N); // 数値にしたものを作っておいた空っぽの配列howmanyNに入れる 
    console.log(howmanyN);　// howmanyNというのは（りんごの数、バナナの数、さくらんぼの数）
                            という配列なので、howmanyN[0]はりんごの数、
                            howmany[1]はバナナの数、howmany[2]はさくらんぼの数になる
    }

　　 //林檎をさっき皿の上にのったかずだけ出す
    for(var Fx = 0; Fx < howmanyN[0]; Fx++){　// りんごの数分だけ繰り返す（howmanyN[0]という
　　　　　　　　　　　　　　　　　　　　　　　　　　　のが今りんごの個数になっているのでその分繰り返す）
        var apple = new Fruits("images/cf307/monkeyapple.png");
        apple.x = 0 + ((Fx % 10) * 32); // １０個まで３２ずつずらして並べ、かつ１０個ずつで折り返し
　　　　　　　　　　　　　　　　　　　　　　　　たいので、「りんごの個数を１０で割った余り×３２」をｘ座標と
　　　　　　　　　　　　　　　　　　　　　　　　する
        console.log(apple.x);
        apple.y = (Math.floor(Fx / 10) * 32); // １０個ならべたら次の行にするには「りんごの数を
　　　　　　　　　　　　　　　　　　　　　　　　　　　１０で割った数の小数点を切り捨てた数×３２」をりんご
　　　　　　　　　　　　　　　　　　　　　　　　　　　のｙ座標とする
        scene.addChild(apple);
    }

　　//バナナをその続きからだす
    for(var Fx2 = 0; Fx2 < howmanyN[1]; Fx2++){
        var banana = new Fruits("images/cf307/banana.png");
        banana.x = 0 + (((Fx2 + Fx) % 10) * 32);// バナナもりんごと同様だが、りんごの後に並べるので
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　りんごの分をずらさないといけないので個数はりんごの
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　分も加えた（Fx2 + Fx）とする
        console.log(Fx);
        banana.y = (Math.floor((Fx2 + Fx) / 10) * 32);
        scene.addChild(banana);
    }

    //さくらんぼをバナナの続きからだす
    for(var Fx3 = 0; Fx3 < howmanyN[2]; Fx3++){
        var cherry = new Fruits("images/cf307/sakuranbo.png");
        cherry.x = 0 + (((Fx3 + Fx2 + Fx) % 10) * 32);// りんごとバナナの分ずらさないといけないの
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　でその分の個数を加えた（Fx3 + Fx2 + Fx）と
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　する
        console.log(Fx3);
        cherry.y = (Math.floor((Fx3 + Fx2 + Fx) / 10) * 32);
        scene.addChild(cherry);
    }

    scene.backgroundColor = "green";
    var score = localStorage.getItem("monkey_score");

    var scorelabel = new Label("結果: " + score);
    scorelabel.x = 320 / 2 -100;
    scorelabel.y = 340;
    scorelabel.color = 'yellow';
    scorelabel.font = "48px 'PixelMplus10'";
    scene.addChild(scorelabel);
    //console.log(scorelabel);

//==========
// ここまで
//==========

}

【感想】

今回の発表は、発表用の原稿の紙がなかったこともあって、アドリブの効かない息子は、デモプレイを一回やったっきり、だんまりで間が持たず、（デモプレイを繰り返ししていればよかったのにそれもなぜかせず ^♢^; ）、苦労したんだからそのあたりもうちょっと説明したらいいのになと可笑しかったのですが、それも一つの個性なので、まあいいかと思います。（みんな違ってみんないい）

奇をてらわずシンプルで、息子の真面目さが出たようなゲームだと思いました。ゲームとして突き抜けたようなアイデアはないけれど、こういうふうに動かしたい、こういうものを出したいという構想を思い描いたとおりに実現させました（プログラミングの醍醐味だね）。そういうところを見ると、もしかすると息子はゲームよりも、実用的なアプリとかシステムをつくるプログラミングのほうが向いているかも知れないなと思いました。

ゲーム投稿サイト9leapに投稿してみました。こちらは得点の登録ができるプラグインがあるので、得点ランキングがでるところがいいです！

http://9leap.net/games/5633

・swap視覚化

・80本の棒のシャッフル

１．フィッシャ–イェーツのシャッフルとは

先日の授業では、シャッフルを教えてもらいました。

その中で、「フィッシャ–イェーツのシャッフル」を簡単にしたものを扱いました。そこで、フィッシャ–イェーツのシャッフルとは実際どういう動きでシャッフルしているのか知りたくて、視覚化した物を作ってみようと思って、その為に調べてみました。

ウィキペディアのフィッシャ–イェーツのシャッフルによると、

1. 1 から N までの数字を書く。
2. まだ消されてない数字の数を数え、1 からその数以下までのランダムな数字 k を選ぶ。
3. 残っている数字から k 番目の数字を消し、別の場所にその数字を書き出す。
4. すべての数字が消されるまで手順 2, 3 を繰り返す。
5. 手順3で書かれた数列が元の数値からのランダム順列となるとなる

というものです。

何かを訳したものだと思いますが「消されていない」「消されるまで」となっていてわかりにくいですが、これは「選ばれていない」「選ばれる」と読み換えるとわかりやすいと思います。

例えば1〜5までの数字、12345をシャッフルする場合、

これがこのシャッフルの仕方です。

２．ダステンフェルドの手法

さらに、現代ではこれをコンピュータでの使用を想定して改良した、ダステンフェルドの手法が採用されているとのことです。これは

要素数が n の配列 a をシャッフルする(添字は0からn-1):
  i を n - 1 から 1 まで減少させながら、以下を実行する
       j に 0 以上 i 以下のランダムな整数を代入する
       a[j] と a[i]を交換する

というもので、先のフィッシャ–イェーツとの違いは・・これもnを5としてやってみたらわかるでしょう。

a[0]~a[4]までの5つの配列がある。a[0]a[1]a[2]a[3]a[4]

iを4から1まで減少させながら（つまりは4回。5回ではない）、jに0以上i以下（こちらは一巡目は0から5までの5つの数字となる）のランダムな数字を入れて、a[ j ]とa[ i ]を交換する。

・・先のフィッシャ–イェーツはランダムに選んでそれを結果として最後に加えていく方法でしたが、交換という方法を使うことによって後ろから付け加えていくという形で無駄を省いてやっているようなイメージですね。

ダステンフェルドの手法で同じように12345でやってみると・・

となります。

なぜ5つの数字に対して5巡ではなくて4巡なのかというと、仮に5巡目をやったとしても、a[0]とa[0]の交換になると決まっているので、やる意味がないからです。

これを別の言い方で説明すると、

1巡目・・5つの全部の数字のうちどれかをランダムに選んで5と交換する。
（「5」と「1~5のどれか」を交換する）

2巡目・・1巡目で交換した5以外の4つの数字からランダムに一つ選んでそれと4を交換する。
（「4」と「1~4のどれか」を交換する）

3巡目・・1、2巡目で交換した5、4以外の3つ数字からランダムに一つ選んでそれと3を交換する。
（「3」と「1~3のどれか」を交換する）

4巡目・・1、2、3巡目で交換した5、4、3以外の数字2つのうちランダムに一つ選んでそれと2を交換する。（「2」と「1~2のどれか」を交換する）

つまりもっと簡単に書くと、

(1)「5」と「1~5のどれか」を交換する

(2)「4」と「1~4のどれか」を交換する

(3)「3」と「1~3のどれか」を交換する

(4)「2」と「1~2のどれか」を交換する

あるいは、以下の処理でも同じです。

(1)「5番目」と「1~5番目」のどれかを交換する

(2)「4番目」と「1~4番目」のどれかを交換する

(3)「3番目」と「1~3番目」のどれかを交換する

(4)「2番目」と「1~2番目」のどれかを交換する　　　　　　　　　　　　　　

やっていることはこれだけです。

青い方のやり方と赤い方のやりかたの違いがわかるでしょうか？例えば青い方の４は、数字の４のことですが（配列のどこにあっても）、赤い方は「そのとき４番目にある数字」であって、数字の４とは限りません。青い方なら青い方でやって、赤い方のやり方と混ぜてはいけません。（ごっちゃにした間違いの例）

ダステンフェルドの手法のプログラミングでは、赤い方の処理をやっています。どうしてかというと、forループの繰り返し処理の中でその都度配列の並びが上書きされるからです。紙とペンでやってすべての場合がでるかどうか確かめてみました（メモ）が面白いことにどちらもすべての場合が出ます。ダステン先生はすごいですね。

これをコードで書くと授業でやったものを使って、

//シャッフル
function shuffle() {
    // カードグループの一番最後の添え字
    var last = cardGroup.childNodes.length - 1;

    // 繰り返し処理
    // for(初期化; 繰り返し条件; 後処理){処理}
    for(var i=last; i>0; i--){
    // for(var i=0; i<=last; i++){ 授業ではこのように書きました
        console.log(i);

        // 添え字を使ってカードを呼び出す
        var card1 = cardGroup.childNodes[i];

        // ランダムで添え字を作る
        var r = getRandom(0, i);　// ここをlastではなく、iにするのが精度的には正しいそうです
        //var r = getRandom(0, last);　授業ではこのように書きました

        // 添え字を使ってカードを呼び出す
        var card2 = cardGroup.childNodes[r];

        // 交換処理
        swap(card1, card2);
    }
}

となります。

授業で書いたものは、簡単にしたものということで、正確なものとは異なっているようです。

ランダムで添字を作るの部分は、配列の全部、（上のコードの場合（0、last)）から取り出すと、厳密にいうとシャッフルの精度が下がる（確率が均等でなくなる）のだそうです。ランダムの範囲は、ずっと配列のどこでも好きなところからとるのではなく、まだ取り変えていない範囲（0、i）に減らしていくというのが、正しいやり方だそうです。うーん難しい。サイトにも間違えて書かれてあるところが多いそうです。

こちらのサイトが参考になりました。

クジラ机ブログ / 配列シャッフルFisher-Yatesを覚え間違えていた件

これはこれで、一つの間違いがわかりました。

 

これとはまた別の疑問がでてきてしまいました。上のソースコードの書き方はWikipediaの説明部分の

改良されたアルゴリズム(ダステンフェルドの手法）

要素数が n の配列 a をシャッフルする(添字は0からn-1):
  i を n - 1 から 1 まで減少させながら、以下を実行する
       j に 0 以上 i 以下のランダムな整数を代入する
       a[j] と a[i]を交換する

のやり方に従ったものです。

でも、Wikipediaには続きがあって、「紙とペンを使用した場合」として実際にやってみる説明が書かれているのですが、これとは違う（間違ってる？）ということに気づいてしまいました。Wikipediaですから、間違いがあるのはあることなのかも知れませんね、どちらが正しいのだろう・・多分、下の「紙とペンを使用した場合」の説明のほうが間違っていると私は思います。どこが違うかというと、下の説明の部分で、赤字にした部分です。これが、下のやり方では8番目の数字、7番目の数字、6番目の数字・・2番目の数字となっているのですが、先の説明のやり方に従うなら、「8番目の数字」ではなくて、「数字の8」（どこの順番にあろうが）、「7番目の数字」ではなくて、「数字の7」と交換しなければならないはずです。

たぶん、そのほうが正しいです。（わかる方いたら教えていただきたいです）正しくないです、下のWikipediaの説明で合ってました。（後述）

間違っている気がするWikipediaの説明部分↓

紙とペンを使用した場合

ここでは同じ例をダステンフェルドの手法で行う。上記の例では数字の消去と書き出しを行ったが、今回は選ばれていない数字の中で最後の数字との入れ替えを行う。前と同様に1から8までの数字をメモしておく。

範囲	乱数	メモ	結果
		1 2 3 4 5 6 7 8

1から8までの数字の中でランダムな数字を取得する。今回は6だったとする。この場合、6番目と8番目の数字を交換する。

範囲	乱数	メモ	結果
1–8	6	1 2 3 4 5 8 7	6

次は1から7までの数字の中でランダムな数字を取得する。2だった場合、2番目と7番目の数字を交換する。

範囲	乱数	メモ	結果
1–7	2	1 7 3 4 5 8	2 6

続けて1から6までの数字の中でランダムな数字を取得する。ここで取得した数字が6だった場合、6番目の数字をそのまま結果とする。今回の例で言えば8を結果とする。結果の数列が完成するまで、ここまでの処理を繰り返す。

範囲	乱数	メモ	結果
1–6	6	1 7 3 4 5	8 2 6
1–5	1	5 7 3 4	1 8 2 6
1–4	3	5 7 4	3 1 8 2 6
1–3	3	5 7	4 3 1 8 2 6
1–2	1	7	5 4 3 1 8 2 6

この時点で処理が終了し、「7 5 4 3 1 8 2 6」という順列が得られる。

また調べてみてわかったら書きます。👩🏻‍💻　（→紙とペンでやってみて確かめてみました。やはり間違ってました）やっぱり合ってました^^; すみません〜💦この前の授業（9/8)の後、プログラミングでは上記の赤い方の処理でやっているのだということに気づきました。この説明を、私は青い方のやり方が書いてあると思って間違いと思ってしまったのですが、赤い方のやり方で書いてあったということがわかりました。すごい勉強になりました。

結果、ダステンフェルドの手法を視覚化してつくって以下のようにつくってみました。

３．完成作品

・12345のシャッフル

もっとたくさんで見てみたくて、80本のバーでも作ってみました。

上の段も下の段も同じシャッフルをしています。上は色が混ざっていくことでシャッフルされている様子がわかります。下の段は、移動済みのものが青から赤に色が変わっていきます。

・80本の棒のシャッフル

AIに挑戦せよという授業の中で作ったものです。

前の、45.ブッタ様大噴火、47.おならして帰る を応用してシューティングゲームにして、ダメージによって敵の画像・攻撃・動きが変わるようにしました。

マンドラゴラのつもりで描いた敵が、にんじんに見えてしまうのは、頭の葉っぱが短すぎたからでしょう。

（授業での発表のとき、デモ用に当たり判定を外してゲームオーバーにならないようにしておきました。発表が終わったので元に戻したら、先生が「ああ、これマンドラゴラか〜」と言われて再度プレイされて、一瞬でやられてゲームオーバーになってしまい可笑しかったです）

工夫やこだわり

・ボスのビームは関数 function bossbeam(w, h, b)を作って、変化させた

・クリアのときの大爆発