グループの中の最上位置の判定とスクロール

cf307 / / CodeFriends, レポート, 記録

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

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

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

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

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

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

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

    // タッチするとブロックが落ちる（と同時に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が一番高いブロックのｙ座標の値に書き換えられているという訳です。プログラミングではこうやってやるんだーと感心、納得。

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

コメントを残す

メールアドレスが公開されることはありません。