enchant.js でスコア管理

enchant.js でスコア管理
#03 スコア管理をしてみよう
http://dotinstall.com/lessons/kuma_catch_enchant_js_v2/21603
を参考に
クマをタッチしたときのイベントの設定と
スコア管理の実装
クマの表示ができたので
クマをタッチすると、スコアが1加算され
別のところにクマが表示される
というようにする
スコアの管理をするため
var score =0;
としておく
クマにタッチしたときの処理は
bear.on(‘touchstart’,function(){
タッチしたときの処理
});
となる
.on() は jQuery の関数で
複数イベントの設定などに使われる
http://tacamy.hatenablog.com/entry/2013/03/03/213113
の説明がわかりやすい
touchstart は
スマホに指が触れたときに起こるイベント
これの例と解説は
http://www.webcreativepark.net/javascript/event/touchstart/
を参考に
タッチされたときに score を1増やすには
score++;
スコアを表示するラベルを用意するので
var scoreLabel = new Label(‘Score 0’);
これで、スコアの初期に表示
されるのが
Score 0
となる
http://kurochan-note.hatenablog.jp/entry/2013/01/28/000734
のように、ラベルの中身のフォント、テキストを
後で変更することも可能
次に、作成したラベルを表示する座標を設定
scoreLabel.x = 200;
scoreLabel.y = 5;
これで、設定はできたけど
このままではラベルは画面に表示されない
画面に表示するには
.addChild() を使う
core.rootScene.addChild(scoreLabel);
これで画面にスコアが表示される
タッチされたときに
このスコアの値を変化させたいので
この制御は java script で行う
scoreLabel.text =’Score “+score;
これで、増加した値に内容が書き換えられる
.text はテキスト内容を意味する
また、クマをクリックして
スコアが変化したときに、クマの位置をランダム変更して表示するようにしたいので
this.x = rand(320);
this.y = rand(320);
とすれば
画面のどこかという設定になる
rand() はユーザ関数
320 という値になっているのは
var core = new Core(320, 320);
というように画面を指定したため
最大値が320だから
応用すれば、もぐらたたきのようなゲームを
作成できる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です