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

クリックされた「もぐら」の取得

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「もぐら」に対してクリックイベントを登録し、クリックされた「もぐら」を取得して、変数に代入する方法について解説致します。
講師:
03:55

字幕

このレッスンではもぐらに対して クリックイベントを登録し クリックされたもぐらを取得して 変数に代入する方法について解説いたします まずはダウンロードしてきた find_clicked _mogura というフォルダの中に入っている こちらの js フォルダをこの script.js ファイルを エディタで開いてください そしてこちらがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それでは早速レッスンを始めていきましょう 今回注目していただきたい部分は こちらのファイルの中のこの部分となります それでは順番にみてきましょう まずこちらの部分から $(.'normal').on そして('click', そして function() と書いていますね まず on 'click' このように書くことでこの on の前の要素に対して クリックイベントを登録することができます そしてその on の前の要素は何かというと このように .normal 要するに normal というクラスを持った HTML タグという意味になります 今回の場合ですと この normal という クラスを持った HTML タグは 普通の表情をしたもぐら画像の img タグという意味になります その普通の表情の画像を タップした時に実行するのが こちらの function { } の間の処理という形になります ではこの function の中身を見ていきたいと思います まず $(this).blur() としていますね このようにすることでその要素を クリックした際に フォーカスがあたることを防いでいます そしてその次の部分ですね こちらが今回の本題です こちらの部分ではクリックされたもぐらの 全体を囲っている HTML タグを取得して そして変数に代入するといった形を取っています こうすることによって後に続く処理を スムーズに行なうことができます では詳しく見ていきましょう まずは変数を定義します 今回の変数の名前は thisMogura としています そして=と書いてまずは $(this) と書いていますね $(this) というのはクリックされた HTML タグ そのものという意味になります 要するに今回はクリックされた normal という クラスを持った img タグになります その parents と書いていますね そして(); そしてその parents の中には .mogura と書いています この parents というのはこの $(this) 要するに クリックされた normal というクラスをついた img タグの先祖要素 要するに上位階層にある HTML タグを 取得してくる命令になります そしてこちらの parents の引数の中に 入っているのが .mogura ですね 要するに mogura というクラスのついた 先祖要素を取得して来いという意味になります このようにすることで変数 thisMogura には クリックされたもぐら全体を 格納することができます この function の中における以降の処理においては この thisMogura という変数を使うことによって その都度クリックされた画像タグを 処理の基点とする必要がなくなるため とてもスムーズに開発を行なっていくことができます 以上でレッスンは終了です 今回はもぐらに対してクリックイベントを登録し クリックされたもぐらを取得して 変数に代入する方法について解説いたしました 以降のレッスンではクリックされた もぐらの画像を変更して 表情を切り替える方法について 解説していきますので そちらも併せてご覧ください

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

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

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

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

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

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