enchant.js で制限時間設定とゲームオーバー処理

enchant.js で制限時間設定とゲームオーバー処理

#04 制限時間を設けてみよう
http://dotinstall.com/lessons/kuma_catch_enchant_js_v2/21604
を参考に
制限時間の設置と
ゲームオーバー処理を実装

ドットインストールの解説によれば
core.fps は
1秒間あたりのフレーム数になる
fpsは
frame per second の略

これをつかって5秒間表現するには
5 * core.fps
とする
とのこと

まずは、ゲームらしく制限時間を設置
var timeLeft = 5 * core.fps;
これで、5秒になる


今度は、ラベルに残り時間を表示して
java script で制御する
var timeLabel = new Label('Time : ?');
これで、ラベル作成

次に表示する座標を指定
timeLabel.x = 5;
timeLabel.y = 5;

ゲームの時間が進むたびに処理するので
core.on('enterframe', function(){
});

の中に記述する

ｅｎｔｅｒframe イベントは
フレームが更新される度という意味

これについては
http://dotinstall.com/lessons/kuma_catch_enchant_js_v2/21604
を参考に

追記する処理は
timeLeft--;
で減らしていき

timeLabel.text = "Time : " + timeLeft;
これで減っていく残り時間を表現できる

また、
if(timeLeft <= 0){

}
で残り時間が０になったとき、つまり時間切れの
処理を書く

今回は、アラートでスコアを表示するので
alert('Your score :' + score);
として
ゲームを終了したいので
this.stop();
とする

.stop() でゲームが終了する

作成した残り時間を表示するラベルは
addChild()
で画面に追加しないと表示されないので
core.rootScene.addChild(timeLabel);
とすることで画面に表示されるようになる

これで、実行すると
残り時間がどんどん減っていき
残り時間がゼロでアラートが表示される
この仕組みをつかうことで
制限時間をつけた
パズルゲームなども実装ができるようになる

enchant.js でスコア管理

enchant.js でスコア管理

#03 スコア管理をしてみよう
http://dotinstall.com/lessons/kuma_catch_enchant_js_v2/21603
を参考に
クマをタッチしたときのイベントの設定と
スコア管理の実装

クマの表示ができたので
クマをタッチすると、スコアが１加算され
別のところにクマが表示される
というようにする

スコアの管理をするため
var score =0;
としておく

クマにタッチしたときの処理は

bear.on('touchstart',function(){
タッチしたときの処理
});

となる
．ｏｎ() は jQuery の関数で
複数イベントの設定などに使われる
http://tacamy.hatenablog.com/entry/2013/03/03/213113
の説明がわかりやすい

touchstart は
スマホに指が触れたときに起こるイベント
これの例と解説は
http://www.webcreativepark.net/javascript/event/touchstart/
を参考に

タッチされたときに score を１増やすには
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);
というように画面を指定したため
最大値が３２０だから

応用すれば、もぐらたたきのようなゲームを
作成できる

enchant.js でゲーム設定

enchant.js でゲーム設定

#02 クマを表示させてみよう
http://dotinstall.com/lessons/kuma_catch_enchant_js_v2/21602
を参考に
ミニゲームの設定

編集するのは main.js

var core = new Core(320,320);
で画面の大きさを設定

core.preload('chara1.png');
として、preload() を使うことで画像を先読みする

言語の早さである fps
これはフレームパーセカンドという意味でこれも設定
core.fps =15;

そして、ゲームの中身を
core.onload = function(){
ゲームのロジック
}
で読み込んで

core.start();
でゲーム開始

今回は、クマを表示するので
var bear = new Sprite(32, 32);

Sprite() は画像を表示するのに使う
http://enchantjs.com/ja/tutorial/lets-start-enchant-js/#ref_4
を参照

bear.x = 10;
bear.y = 10;
で表示する座標を指定

bear.frame = 0;
で今のフレーム数を取得
frame については
http://javascript0.e1blue.net/js/status/51
と
http://www.ideaxidea.com/archives/2011/04/rpg_3.html
を参考に

元の画像をみるとわかるけど
いくつかの絵が並んでいる
一番左上から０から数えるので
違う絵にしたいのなら
bear.frame = 1;
というように変えてみるとわかりやすい

画像を扱えるように
bear.image = core.assets['chara1.png'];
というように
assets で画像を指定
assets[] に関しては
http://enchantjs.com/ja/tutorial/lets-start-enchant-js/#ref_4
を参照

これで。画像の設定ができたので
core.rootScene.addChild(bear);
で画像を追加する
.addChild() で画像を表示している

画像を消すなら.removeChild()
を使う

これで、一度実行すると
画面の左上にクマがでる

ここまで動作確認できたら、今度は配置をランダムにしたいので
乱数を使う

でも、計算は面倒なので
ユーザ関数で rand() という関数を作成する

function rand(n){
return Math.floor(Math.random() * (n+1));
}
とする

Math.floor() は、小数点以下繰り下げにする
つまり -3.6 なら -4
3.6 なら 3 となる

Math.floor() は
http://www.tohoho-web.com/js/math.htm#floor
を参照

Math.random() は
０以上１未満の乱数を生成する
ゼロになることもあるため (n+1) としている
random() に関しては
http://www.tohoho-web.com/js/math.htm#random
を参照

これで、ランダム要素はできたので
表示する座標の変更してランダムにする

bear.x= 10;
bear.y= 10;
これを
bear.x = rand(320);
bear.y = rand(320);
というように画面サイズに変更する

これで、画面をリロードするたびにランダムな位置に
クマが表示されるようになる

enchant.js でゲーム作成

enchant.js でゲーム作成

#01 クマを捕まえるゲームを作ろう
http://dotinstall.com/lessons/kuma_catch_enchant_js_v2/21601
を参考に
ゲームを作るのに便利そうな
enchant.js の学習

以前
facebook の位置情報ゲームの勉強したとき
載っていたので、今回はその復習もかねて実験

enchant.js は
http://enchantjs.com/
からダウンロードできる

ダウンロードしたら
unzip enchant.js-builds-0.7.0.zip
で解凍

この中で必要なものをコピーする
mkdir kuma
cd enchant.js-builds-0.7.0/
cp build/enchant.js ~/kuma/
で enchant.js 本体をコピー

cp images/chara1.png ~/kuma/
でクマの絵をコピー

index.html
main.js
が必要なので今回はサンプルを流用

cp examples/beginner/hellobear/index.html ~/kuma/

cp examples/beginner/hellobear/main.js ~/kuma/
でそれぞれコピー

必要なファイルがコピーできたら
index.html の編集
修正箇所は
ライブラリの読み込みパス
<script type="text/javascript" src="../../../build/enchant.js"></script>
となっているけど
同じディレクトリにライブラリをおいたので
<script type="text/javascript" src="enchant.js"></script>
となる

また、main.js もわかりやすくするため
enchant();

window.onload = function(){
}
以外のソースは削除しておく