スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
--/--/--(--)
スポンサー広告

14-3.Monaca+enchant.js開発(かぶを吹っ飛ばす)

さて、「無限かぶぬき」はenchant.jsを使ってつくりましたが、どんなソースを書いたか少しずつご紹介しています。

前回の記事で上向きにスワイプすると、少しずつかぶが上に動くような仕組みを作りました。
どんどん上に動き、土から離れたかぶは、「ぬいた勢いで上に吹っ飛ぶ」という風にしてみました。

「吹っ飛ぶ」と言っても、「上のほうにシューっと移動する」「徐々にうすくなる」「画面からはみ出て消える」「シュッと音を鳴らす」みたいなことです。

---------------------------------------
var rnd = Math.floor( Math.random() * 2 );
kabu.tl
.fadeOut(10)
.and()
.moveBy((rnd==0)?200:-200,-200,10)
.then(kabuReset);
----------------------------------------

fadeOut(10)が10フレームかけてフェードアウトする(薄くなって消える)。
moveBy(200,-200,10)が(200,-200)の位置まで10フレームかけて移動する。
kabuResetはかぶが消えたあと新しくかぶをセットする処理を書いたファンクションです。
var rnd = Math.floor( Math.random() * 2 );というところで乱数を発生させて、
(rnd==0)?200:-200というところで右上に飛んでいくか、左上に飛んでいくかをランダムで振り分けています。

kabu0000.jpg kabu0001.jpg kabu0002.jpg


あとは別のアプリで使った技術のと同じです。
音を鳴らすところはこちらの記事、乱数を発生させるところはこちらの記事で詳しく書いています。

効果音もつけて、「ぬいた勢いで上に吹っ飛ぶ」というのが表現できました。
実際に動かしてみたいかたはアプリをダウンロードしてみてくださいね!→「無限かぶぬき
スポンサーサイト

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村

ブログで有意義な情報をありがとうございます。
いつも参考にさせて頂いております。

突然にすみません、
私も、しろうとママさんがリリースした、無限かぶぬきと同じく、
Monaca+enchant.js+nendで、スマホアプリの開発に挑戦中なのですが、
画面の大きなスマホですと、ゲーム画面が左ななめ上に寄った形になり、
広告もスマホの画面サイズに対し、小さい形での表示となってしまいます。

しろうとママさんの無限かぶぬきの様に、
ゲーム画面と広告を、スマホの画面サイズに沿って拡大表示させたいのですが、
index.htmlをどのように記述すれば、実装できるのでしょうか?

あつかましいお願いで恐縮ですが、
もしよろしければ、お時間がある時にでも、ご教授頂けると幸いです。
どうぞ、よろしくお願いいたします。
by: あき * 2013/10/27 17:02 * URL [ 編集] | TOP↑

-----------

あきさんへ
ブログを応援していただいてありがとうございます。
ご質問の件、こんな感じでどうでしょうか?
----------------------------------
index.html
----------------------------------
<head>
///・・・途中略
<script>
// Set virtual screen width size to 640 pixels (横幅640pxに設定)
monaca.viewport({width: 320});
///・・・途中略
</script>
</head>
<div id="enchant-stage" style="margin-left:auto; margin-right:auto;"></div>
<script type="text/javascript">
var nend_params = {"media":9999,"site":99999,"spot":99999,"type":X,"oriented":X};
</script>
<script type="text/javascript" src="http://js1.nend.net/js/nendAdLoader.js"></script>

</body>
----------------------------------



----------------------------------
main.js
----------------------------------
var SCREEN_SIZE_X = 320;
var SCREEN_SIZE_Y = 420;
///・・・途中略

window.onload = function()
{
///・・・途中略
game = new Game(SCREEN_SIZE_X, SCREEN_SIZE_Y);

///・・・途中略
game.onload = function() {
///・・・途中略
};
game.start();
};
----------------------------------
by: しろうとママ * 2013/10/28 12:45 * URL [ 編集] | TOP↑

-----------
ありがとうございます!
さっそくご返答頂き、本当にありがとうございます。
たいへん参考になりました。
ブログの更新も楽しみにしております。
どうぞよろしくお願いいたします。
by: あき * 2013/10/28 17:10 * URL [ 編集] | TOP↑

-----------
















管理者にだけ表示を許可する


| ホーム |
Page Top↑
▲ Page Top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。