「ゼロからはじめるenchant.js入門」勉強1日目−2

3.1ラベルの利用のサンプルを書いた。

ほんの最初らへんのサンプルのくせして、やたら無駄にフクザツに見えるサンプル。

やっていることは、

①ルートシーンでフレーム更新ごとにラベルをはっつける処理を呼ぶ
②ラベルをはりつける処理では、ただはりつけるだけじゃなくて、移動させて一定距離移動したら消す、っていう定期処理を入れる

というもの。

色をランダムで生成したり、ただラベルを表示させるだけじゃなくて、移動させる＋一定条件下で自動的に消えるようにしているから、無駄に複雑に見える。

↓くらいの手順を踏んだほうが個人的にはわかりやすい。自分で書いてみるつもり。

①ラベルをひとつ表示させる
②①＋一定時間で自動的に消す
③①＋タッチしたら消す
④ラベルを移動させるようにする
⑤ラベルを移動させたあとで自動的に消す
⑥ラベルの色を変える
⑦ラベルを複数出す
⑧本にあるものを作る

あと、ポイントは、ｘ軸とｙ軸に考え方について、左上が（0,0）だというところ。
つまり、右に移動するとｘは増加し、下に移動するとｙが増加する。
デクリメントしてるのに、なんで実行結果の表示は上昇してるの？　と疑問に思ってしまった。

enchant();
window.onload = function() {
    //ゲームオブジェクトの生成
    var game = new Game(320,320);
    
    //FPSの指定
    game.fps = 16;
    
    //ラベルの追加関数
    game.addLabel = function(text, color, x, y){
        //ラベルの生成
        var label = new Label(text);
        label.font = "16px monospace";
        label.color = color;
        label.x=x;
        label.y=y;
        game.rootScene.addChild(label);
        
        //ラベルの定期処理
        label.tick=0;
        label.addEventListener("enterframe", function(){
            label.y --;
            label.tick ++;
            
            //ラベルの削除
            if(label.tick > 10) game.rootScene.removeChild(label);
        });
    };
            
    //シーンの定期処理
    game.tick=0;
    game.rootScene.addEventListener("enterframe", function(){
        if((game.tick %3)===0){
            var score = rand(100);
            var r = rand(256);
            var g = rand(256);
            var b = rand(256);
            var x = rand(300);
            var y = rand(300);
            game.addLabel(score + "点","rgb("+r+","+g+","+b+")",x,y);
        }
        game.tick++;
    });
    
    //ゲームの開始
    game.start();
};

//乱数の生成
function rand(num){
    return Math.floor(Math.random() *num);
}