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

残り時間バーのアニメーション

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ゲームプレイ中の残り時間を表すバーを、時間の経過に伴ってアニメーションをさせる方法について解説致します。
講師:
05:11

字幕

このレッスンではゲームプレイ中の 残り時間を表すバーを時間の経過に伴って アニメーションをさせる方法 について解説していきます まずはダウンロードしてきた こちらの time_animation という フォルダの中に入っているこの js フォルダの中の この script.js ファイルをエディタで開いて下さい これがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それでは 早速レッスンを始めましょう それでは まず現状の index.html ファイルを ブラウザで開いて 今回 実装していく内容を 確認してみたいと思います その index.html ファイルは 先程ダウンロードした ファイルの中に含まれています そして これが その index.html ファイルを開いた状態です このスタート画面が表示される前は スプラッシュスクリーンが表示されています それではこちらのゲームスタートボタンを クリックしてみましょう すると このように画面上部にある 残り時間を表すバーが 時間の経過に伴って このように徐々に 短くなっていっているのがわかりますね 今回のレッスンではこちらの実装方法について 解説していきたいと思います それではエディタの方に戻ります そして今回注目していただきたい部分は こちらのファイルの中のこの部分となります それでは順番に見ていきます まず $ の ( ) その中に '.timer' と書いています そして .width(200) と書いてまた .(ドット) そして animate と書いて括弧 そしてここまで飛んで ) (括弧閉じる) の ; と書いています そしてこの animate の中の ( ) ですが まず { } を一組作ってあげて その中に width:0 と書いています そしてその後に, (カンマ) その後に 20000 と書いています その後にまた , (カンマ)を置いて その次に 'linear' と書いています そして更に , (カンマ)を置いて function と書いて ( ) そして { } としています 少し長い1文となっていますね それではこの1文がどういった 意味なのか見ていきます まず こちらの部分から見ていきます まず こちらの部分ですが timer というクラスを持った HTML タグの width 横幅を 200 ピクセルにしろ といった命令をしています そして次にこちらの部分を見ていきます 同じく timer というクラスを持った HTML タグに対して animate 要するにアニメーションをしろ という命令を書いています ではどのようなアニメーションなのかを 指定しているのが この ( ) の中となります まずこちらの { } の中に書かれているのが CSS のプロパティとなります 今回は width 0 ピクセルという意味になります そしてこの { } の間に書かれている CSSプロパティはアニメーション後の 要素の状態を表しています 要するに こちらの timer という クラスを持った HTML タグ こちらの横幅が元々 200 ピクセルですね この 200 ピクセルから 0 ピクセルまでアニメーションしろ といった意味になります そして そのアニメーションにかける時間が こちらの部分となります 20000 と書いていますね 単位がミリ秒となるので 20 秒という意味になります そして その後の linear ですが これはアニメーション中の 速度の変化を指定する箇所になります 今回は linear と指定しているのですが これはアニメーションの始まりから終わりまで 全て一定速度でアニメーションしろ といった意味になります 要するにこちらの部分をまとめますと timer というクラスを持った HTML タグ その横幅を 200 ピクセルから 0 ピクセルまで 20 秒かけて一定速度でアニメーションしろ といった命令になります そして最後のこちらの function { } ですが このアニメーションが終わった後に この function の後の { } の中に書かれた処理を 実行しろといった意味になります 現在は何も指定していない状態となっていますね このように記述することで 先程ブラウザで確認したような 残り時間のバーのアニメーションを 実装することができます 以上でレッスンは終了です 今回はゲームプレイ中の残り時間を表すバーを 時間の経過に伴って アニメーションをさせる方法 について解説致しました 以降のレッスンではゲームプレイ中に 一定時間が経過した後に ゲーム終了画面へ遷移させる方法について 解説致しますので そちらも併せてご覧ください

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

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

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

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

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

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