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

打撃(ヒット)画像の表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「もぐら」をクリックした際に、打撃(ヒット)画像を、「もぐら」の上に表示させる方法について解説致します。
講師:
03:44

字幕

このレッスンではもぐらを クリックした際に打撃画像― ここではヒット画像と呼びますが その画像をもぐらの上に表示させる 方法について解説いたします まずはダウンロードしてきたこちらの show_ hit _image というフォルダの中に入っている こちらの js フォルダの中の script.js ファイルを エディタで開いてください そしてこちらがそのファイルを開いた状態です このファイルを使って今回の解説を 進めていきたいと思います それでは早速レッスンを始めていきましょう 今回注目していただきたい部分は こちらの部分となります 前回のレッスンではこちらの部分で叩かれた時の もぐらの表情の切り替えを行いましたね 今回はそのもぐらの画像の上にヒット画像を 表示させていきたいと思います それでは順番に見ていきます まず変数を作って そして変数の名前を hit としています そして=と書いて変数 thisMogura と書いて find(); そしてその find の括弧の中に .hit としています この thisMogura という変数は上で定義した こちらの部分ですね クリックされたもぐらの全体を 格納している変数となります そして find そのもぐらの中にある hit というクラスのついた HTML タグという意味になります その HTML タグを こちらの hit という変数に代入してみます そしてその後にこちらの部分ですね その hit という変数を書いて そして show と書いてますね このようにすることでこのヒット画像を もぐらの上に表示することが可能になります それではこの部分の HTML ソースがどのようになっているか index.html のファイルの方を エディタで見てみたいと思います これがそのヒット画像 要するに打撃の画像となっています そして先ほどの thisMogura という変数は こちらの

タグ以下 要するにクリックされたもぐら全体の要素を 格納しているとなっています その中にある find ですね  findと書くとこの
タグの中にある という意味になります その中にある hit というクラスを持ったタグですね 要するにこの部分となります この部分を表示しろという意味になるわけですね それでは JavaScript のほうに戻ります それではこの状態で 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宛までご連絡ください。