FC2ブログ

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
を参考に

元の画像をみるとわかるけど
いくつかの絵が並んでいる
一番左上から0から数えるので
違う絵にしたいのなら
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() は
0以上1未満の乱数を生成する
ゼロになることもあるため (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);
というように画面サイズに変更する

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



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

コメント

非公開コメント

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