デフォルトから一本のゲームを完成させる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で作成。