tmlibの練習ブログ

自分流にtmlibを触っていきます。分かったことを解説。入門用になれば…?

デフォルトから一本のゲームを完成させる5.ラベルのテキスト描画も関数に

前回までで、スピードやタイムのスコアを作った。
それぞれやりたいように…例えばボタンを押したらスピードの数値が上がるようとか、毎回タイムを減らすとか、処理を書こう。


例えばキーでスピード上昇なら…

var key = app.keyboard;
if (key.getKey("z"))  { 
	// ...省略
}
if (key.getKey("c"))  { 
	userData.speed += 1;
	this.speedLabel.text = "speed : " + userData.speed;
}

こんな感じになる。


ここで(またまた)気になるのは、

this.speedLabel.text = "speed : " + userData.speed;

この文だ。
ほぼ同じ文が、ラベルの設定にもあるではないか。

// スピードのラベル
l_obj.y = 80;
l_obj.text = "speed : " + userData.speed; // # ここ
this.speedLabel = this.makeLabel(l_obj);

どちらも同じ、"現在のスピードをラベルに設定する"という処理をしている。


今回は2箇所のみだから、気にならないかも知れない。
だがもし、ふと単位を"speed"から"○キロ"に変えよう、と思い立った時に、
もしこんな物が3,4箇所…とあちこちに点在していたら、かなり面倒である。


そういう時に限り、つい忘れたり書き損じたり…思わぬバグに繋がるものだ。




同じような処理は一つにまとめたい。
そこで今回もオブジェクト指定子を応用してみる。


つまり、ラベルの設定用オブジェクトを作る時

l_obj = {
	// ...省略
	textReDraw : function(){ this.text = "speed : " + userData.speed; }
}

こんな感じで、文字表示用の関数を作っちゃえばいいのではないだろうか。


設定用のオブジェクトをいじったという事で、それを元にする関数 makeLabel も変更。

makeLabel : function(l_obj){
	// ...省略
	label.textReDraw = l_obj.textReDraw; // #追加
	label.textReDraw(); // # 初めの1回分を実行(これないと次の更新あるまで非表示のまま)
	// ...省略
},

(*( )を付けるとその関数を実行、付けなければその関数をそのまま渡す 参考:
デフォルトのmain.jsをいじる11,関数(function)って? - tmlibの練習ブログ)


これで、初めのスピードアップする処理も

if (key.getKey("c"))  { 
	userData.speed += 1;
	this.speedLabel.textReDraw(); // # すっきり
}

これで済む。


これから先は何か処理の変更をしても、textReDraw関数の変更をするだけで、一発で済むのだ。
また一つスマートなコードになったぞ、とうっとりしておこう。


しかしコード整理ばかりしていてもしょうがないので、次回はゲームぽい部分をぐっと進めてみる。


ここまでのコード(main.js)
http://spchinese.s601.xrea.com/tmlib_text/main_2013_11_29.txt
*バージョンは、tmlib.js 0.2.0で作成。