読者です 読者をやめる 読者になる 読者になる

【enchant.js】ゲームのスコアを表示する(Labelオブジェクト)

JavaScript パソコン

夏バテな予感。
疲れてタウリン3000配合の栄養ドリンク×2本を摂取しているがちゃまにあですどーもこんばんは。
でもさすがに3000を2本はやりすぎな気がしないでもない。


それはさておき、今日もenchant.jsをいじくっております。
でも今日はほぼ進歩なし(=ω=; )
脳みその限界を感じますねえほんとに。

今日わかったのは「点数の加算方法」と「点数の表示(即時反映)」です。
スプライトの生成とかに関してもまたちゃんと記事にしようそうしよう。
書かないと覚えないもんなー

「Label」オブジェクトを使うべし!

とりあえず現状のコードを。

enchant();
window.onload = function() {
    game = new Game(320, 320);
    game.preload('chara1.png');
    game.onload = function() {
        for(i=1;i<11;i++){
            bear=new Bear();
        }
        game.score=0;
        scorelabel=new Label(); 
        scorelabel.x=10;scorelabel.y=10;
        game.rootScene.addChild(scorelabel);
        scorelabel.text ="";
}

    
// ここで自作クラスBearをつくる
Bear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(x, y) { //初期化する
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['chara1.png'];
        this.scale(1.5,1.5);
        this.x=Math.floor( Math.random() * 270 );
        this.y=Math.floor( Math.random() * 270 );
        this.frame = 0;

        
        game.rootScene.addChild(this);
    },
    //enterframeイベントのリスナーを定義する
    onenterframe: function() {
            scorelabel.text = "SCORE : "+game.score;
    },
    //touchendイベントのリスナーを定義する
    ontouchend: function() {
        this.frame = 3; //泣く
        this.waitFor = game.frame+10;
        game.score+=50;
        this.x=Math.floor( Math.random() * 270 );
        this.y=Math.floor( Math.random() * 270 );
    }
});

    game.start();
}

スコア表記に関する記述は注釈をつけてあります。
scorelabel・game.scoreあたりが関係していますかね。


クマをランダムな位置に10体出現させて、クリックしたら50点加算される仕組み。
スコアは左上に表示されるように設定しました。

スプライトを消してるのではなく、クリックされた瞬間にクマの位置を変えて消えたように見せてるだけ。
最初は

this.parentNode.removeChild(this);

を使ってちゃんと消してたんですけど、最後の1体だけ50点加算されない謎発生。
解決できないし、消したのをいい感じに復活させる手段もわからんのでやめました。
まあ常時10体を維持できるし丁度いいのかなーと。


本当はクリックした瞬間にどこかに移動するんじゃなくて、クマがアクションしてから移動するようにしたい(移動を数フレーム遅らせたい)。
色々試したんですけど、やっぱり上手くいかないんですよねー。
tl.delay()とか使うんじゃないのか?


実際どう動くのか、現物を貼りたいんだけどやり方が良くわからん。
はてなブログには貼れないのかな?
また調べときます( ;´-`)


--追記--
ここでどう動くのか見られます。
今はクリックしたらクマ動くだけだからね!(=ω=; )

サンプル:20140718