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

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

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

ぜひご覧ください。

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

字幕

このレッスンでは もぐらが穴から顔を出すアニメーションを 実装する方法について解説していきます まずはダウンロードしてきた こちらの show_mogura という フォルダの中に入っている こちらの js フォルダの中の script.js ファイルをエディタで開いて下さい そして これがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速 レッスンを始めていきましょう 今回注目していただきたい部分は こちらのファイルの中の こちらの部分となります こちらの部分で 実際に もぐらが穴から顔を出す アニメーションを実装しています 前回までのレッスンで 良いもぐら そして悪いもぐらを ランダムに表示するための 実装を行ってきました 今回は その良いもぐらと悪いもぐら どちらを表示するかが決まったら 実際に そのもぐらい対して 穴から顔を出させるー アニメーションをつけていきます それでは どのように実装しているか 確認してみましょう まず こちらの部分からです まず $moguraId この moguraId は showMogura の引数となる値です ここに その3体の中の どのもぐらかを特定するための HTML タグに付けられた Id 属性の値を こちらの moguraId にセットします そして その Id をもった HTML タグの中にある .mole 要するに mole という class のついた HTML タグを指定しています それが こちらの部分ですね そして その要素に対して animate アニメーションしろという命令を 出しています そして どのようにアニメーションを させるのかという指定を行っているのが こちらの animate の後の ( ) の中ですね まず こちらの第一引数の この波括弧の部分ですが この部分ではアニメーションした後の 要素の状態を指定しています 今回はこちらの要素の CSS プロパティの top の値が -100px の状態がー アニメーションが終了した状態 ということになりますね そして その後 :(カンマ)と書いて こちらの fast と書いています この fast はアニメーションを 実行するスピードを表しています 今回は文字列で fast としています これは「早く」という意味ですね この fast ですが秒数に換算すると 0.2 秒相当となります そして最後にこちらの function の部分ですが このアニメーションが完了したら こちらの function の後の { } の中に書かれた処理を 実行するといった形となります このように記述することで もぐらが穴から顔を出すといったー アニメーションを実装することができます 要するに こちらの top -100px というのが もぐらが穴から顔を出して 最終的に到達する地点となるわけですね 以上でレッスンは終了です 今回はもぐらが穴から顔を出すー アニメーションを実装する方法について 解説いたしました 以降のレッスンでは このもぐらが 穴に隠れるアニメーションを 実装する方法について 解説していきますので そちらも併せてご覧ください

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

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

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

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

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

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