JavaScriptとPhoneGap Buildで作るスマートフォンゲームアプリ

「もぐら」の非表示アニメーション

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「もぐら」が穴に隠れるアニメーションを実装する方法について、解説致します。
講師:
04:32

字幕

このレッスンでは もぐらが穴に隠れるアニメーションを 実装する方法について解説いたします まずはダウンロードしてきた こちらの hide_mogura という フォルダの中に入っている こちらの js フォルダの中の script.js ファイルをエディタで開いて下さい そして これがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速 レッスンを始めていきましょう 今回注目していただきたい部分は こちらのファイルの中の この部分となります 前回のレッスンでは もぐらが 穴から顔を出すアニメーションを こちらの部分で実装してきましたね 今回は こちらの function の中の 波括弧の中にー もぐらが穴に隠れるアニメーションを 実装していきたいと思います この function の後の波括弧の間の処理ですが こちらの もぐらが穴から 顔を出すアニメーションが完了した後に 実行される内容でしたね この部分に今回はもぐらが穴に隠れる アニメーションを実装したいと思います では順番に見ていきましょう まず こちらの setTimeout function{... }の1000 そして ); と書いていますね この setTimeout は こちらの setTimeout の後に書いてある function の後の波括弧の中の実行内容を こちらに指定している時間の後に 自動的に一度だけ実行する といった内容でしたね 今回はここに 1000 と指定しているので 1秒後といった形になります そしてその1秒後に実行されるのが こちらの内容ですね こちらの部分では実際にもぐらが 穴に隠れていくアニメーションを 実装している箇所となります では その部分を見ていきます まず $moguraId としていますね この moguraId ですが 3体いるもぐらの中の どのもぐらなのかを指定するために そのもぐらの html タグに付いている Id を指定するための変数となっています この moguraId はこちらのshowMogura の 引数に該当するものでしたね そして その該当するもぐらの html タグの 中に含まれているー クラス mole が付いた html タグに対して animate アニメーションしろとしています そしてそのアニメーションの内容は こちらの部分となります この animate の第一引数 この波括弧で囲まれた部分は アニメーション終了時の CSS のプロパティでしたね 今回は top 30px としています そしてその後に:(カンマ) そして fast としていますね この fast は そのアニメーションを 実行するスピードです こうすることで もぐらが 穴から顔を出した時に 最終的に到達する地点が こちらの top -100px だった所から 今度は top 30px まで移動しろ といった形になります そして そのスピードは「早く」 といった形になりますね こうすることで もぐらの頭が -100px の地点にあった所から 今度は 30px の地点に降りてくる といった形になります ちなみに マイナスの方が画面上の上にあって プラスの方が画面上の下になります この考え方は このもぐらを囲っている 一番外側の html タグの上辺をー 基準にした考え方となっています 要するに この -100px というのは そのもぐらを囲っている html タグの 上辺から -100px 要するに 上に 100px 移動した所となって そして逆に 30px というのは そのもぐらを囲っている html タグの 上辺から下に 30px の位置にある といった考え方になります これで上から下に移動するアニメーション 要するにもぐらが穴から顔を出した状態から 穴の中に隠れるといったー アニメーションを実装することが可能です 以上でレッスンは終了です 今回はもぐらが穴に隠れるアニメーションを 実装する方法について解説いたしました 以降のレッスンではゲーム開始時に もぐらが穴から顔を出していないように するための初期化の方法について 解説いたしますので そちらも併せてご覧ください

JavaScriptとPhoneGap Buildで作るスマートフォンゲームアプリ

このコースでは、JavaScriptとPhoneGap Buildを使ってスマートフォン向けのもぐらたたきゲームのアプリを作成する方法について解説します。Phonegap BuildやjQueryについて紹介したのち、HTMLやCSSでのコーディングの方法、ゲーム内でのアニメーションの実装や条件分岐の方法などについて学んでいきます。

2時間27分 (43 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年05月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。