FC2ブログ

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だから

応用すれば、もぐらたたきのようなゲームを
作成できる
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック