月別: 2013年8月

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 でスコア管理
#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 でゲーム設定
#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 でゲーム作成
#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(){
}
以外のソースは削除しておく