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

「もぐら」の表情切り替え

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クリックされた「もぐら」の画像を変更して、表情を切り替える方法について解説致します。
講師:
03:44

字幕

このレッスンではクリックされた もぐらの画像を変更して 表情を切り替えるを方法について解説いたします まずはダウンロードしてきたこちらの change_ mogura_face というフォルダの中に入っている こちらの js フォルダをこの script.js ファイルを エディタで開いてください そしてこちらがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それでは早速レッスンを始めていきましょう 今回注目していただきたい部分は こちらの部分となります 今回はゲームプレイ中にもぐらを叩いた時に 通常の表情から叩かれた時の泣いている表情に 画像を切り替える方法について見ていきます これは良いもぐらに対しても悪いもぐらに 対しても両方に適応する処理となります まずはこちらの部分からです こちらの部分ではまず $(this) としていますね この $(this) というのはクリックされた normal というクラスを持った HTML タグのことを差します 今回は通常の表情のもぐらの画像ですね それをhide 要するに隠すという命令になります そしてその次にこちらの部分です まず $(this) と書いて next と書きます そして ( ) としていますね そしてその中に .cry と書いています これはこの $(this) 要するにクリックされた normal というクラスを持った HTML タグの次に来る cry というクラスを持った HTML タグという意味になります そしてそのタグに対して show 要するに表示しろという命令になります それではこちらの HTML ソースが どのようになっているのか 一度確認してみたいと思います こちらが index.html のファイルの該当箇所の HTML ソースとなっています ちょうどこちらの部分ですね こちらの部分とこちらの部分です 上の方が良いもぐらの方 そして下の方が悪いもぐらの方となっています そしてまずクリックイベントが登録されているのが こちら normal というクラスを 持った img タグですね これをクリックした時に まずこちらを表示にして そしてその次にあるこちらのタグですね cry というクラスをもった img タグです こちらを表示するという処理となります この HTML のソースは良いもぐらそして悪いもぐら 両方とも同じ構造をしているため 先ほどの JavaScript の実装で 両方のもぐらに対して 同じ内容を適応することができるわけです それでは JavaScript のファイルに戻ります それではこの状態で index.html というファイルを ブラウザで開いて確認してみましょう index.html は先ほどダウンロードしてきた ファイルの中に含まれています そしてこれがその index.html ファイルを ブラウザで開いた状態です それではこちらのゲームスタート画面を クリックしてみましょう そして表示されてくるもぐらをクリックしてみます するとこのように表情が変わりますね このように動作すればきちんとプログラムの実装が 完了できているという形になります 以上でレッスンは終了です 今回はクリックされたもぐらの画像を変更して 表情を切り替えるを方法について解説いたしました 以降のレッスンではクリックした際に打撃の画像を もぐらの上に表示させる方法について 解説いたしますので そちらも併せてご覧ください

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

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

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

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

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

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