スポンサーサイト

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

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

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

14-2.Monaca+enchant.js開発(スワイプでかぶを動かす)

enchantの基本的な使い方というのは色んなサイトで紹介されています。
enchant.js 怒涛の 100 tipsとか。独学にもってこいですね。
enchant.jsのダウンロードするところから知りたいんだけど!というかたはこちらのサイトなど、いろんなところで紹介されているので、参考にしてみてください。


そんなサイトでちょこちょこ勉強しつつ作っています。
今回の「無限かぶぬき」では、2歳の息子が最近できるようになったスワイプ(スライド?)の操作を使っています。
「上向きのスワイプでかぶを動かす」という部分を解説します。


Sprite(スプライト)という画像表示クラスがあるのですが
kabuという名前でスプライトを定義して、最初の位置に配置したのち、こんな感じのコードを書きました。
---------------------------------------
var kabuStartPoint = 0;

scene.addEventListener('touchstart',function(e){
//タッチし始めの位置を記録
kabuStartPoint = e.y;
});

scene.addEventListener('touchend',function(e){
//上に動いたか
if( (kabuStartPoint - e.y ) > 0 ) {
//かぶをずらす
kabu.y -= 15;
}
});

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

touchstartというイベントでタッチし始めたときのイベントが拾えます。
touchendでタッチし終わりです。

touchstartで位置を記録しておいて、touchendで上に動いたかを判定しています。
なのでタッチし始めたときの位置よりタッチし終わったときの位置が上なら「上にスワイプ」ですね。
上にスワイプでkabuスプライトを上にちょっとずらす。

001.png 002.png

初心者でもできそうでしょ?
できましたよー。ふふふ。
息子もかぶが吹っ飛ぶのが面白いみたいで、ゲラゲラ笑いながら「うんとこしょ!どっこいしょ!」と、楽しんでいます。
スポンサーサイト

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

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
















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


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