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);
というように画面サイズに変更する
これで、画面をリロードするたびにランダムな位置に
クマが表示されるようになる