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

条件に応じた加点or減点画像表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クリックされた「もぐら」が、”良いもぐら”か”悪いもぐら”のどちらの種類かに応じて、加点または減点画像を表示させる方法について、解説致します。
講師:
04:25

字幕

このレッスンでは クリックされたもぐらが いいもぐらなのか 悪いもぐらなのか どちらの種類かに応じて 加点または減点画像を表示させる 方法について解説いたします まずはダウンロードしてきた こちらの plus_or_ minusという フォルダの中に入っている こちらの js フォルダの中の この script.js ファイルを エディタで開いてください そして これがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう それでは 前回のレッスンのおさらいです 前回のレッスンではこちらの if 文 そして こちらの elseif 文を使って クリックされたもぐらが いいもぐらなのか 悪いもぐらなのかを判別して 条件分岐を行なうところまで実装してきました 今回は その条件分岐の中に 具体的な処理を書いていく方法について 見ていきたいと思います その中でも得点の加点及び減点の画像の 表示の出し分けを行なってみたいと思います それでは具体的に見ていきましょう 今回 注目していただきたい部分は こちらの部分とそしてこちらの部分です まず こちらの部分から見ていきましょう こちらの部分はクリックされたもぐらが いいもぐらだった場合ですね クリックされたもぐら 要するに 叩かれたもぐらがいいもぐらだった場合 それは減点対象となります ここではその減点の画像を表示していきます まず こちらの部分から まず 変数 thisMogura と書いて find そして '.score' と書きます そして その後に show と書いていますね では まずこちらの部分から この変数 thisMogura というのは これまでのレッスンで行なってきた クリックされたもぐらが格納された変数ですね そして find その中にある score というクラスを もった HTML タグという意味です その HTML タグを show 表示しろといった命令になります そして 次にこちら部分を見ていきます 同じく変数 thisMogura そして find.score ここまでは同じですね そして さらに find'.minus' と書いてますね これで さらにその中にある minus というクラスを持ったHTML タグ それも表示しろという意味になります 要するに この2つを合わせて 減点画像を表示しろという意味になります 続いてはこちらの部分です こちらの部分はクリック 要するに 叩かれたもぐらが悪いもぐらだった場合 その場合は加点対象となります そして こちらの部分では上で書いた 減点画像を表示するのとは逆に 今度は 加点画像を表示しろという 命令になります 上と異なる場所はこちらの部分ですね plus というクラスを持った HTML タグを 表示しろという命令になっています それでは この部分の HTML ソースが どのような形になっているか index.html ファイルを エディタで開いて確認してみます そして こちらの部分が その該当する箇所となります score というクラスを持った

タグの中にあるこの2つのイメージタグ そして このイメージタグには それぞれクラス plus と クラス minus がついていますね この html コーディングに沿った形で 先ほどの Javascript は 加点画像と減点画像を 出し分けている形となります 以上でレッスンは終了です 今回はクリックされたもぐらが いいもぐらか 悪いもぐらかの どちらの種類かに応じて 加点または減点画像を表示させる 方法について解説いたしました 以降のレッスンでは もぐらをクリックした際に表示される ヒット画像および加点または減点画像を もぐらが穴に隠れたのと同時に非表示にする 方法について解説いたしますので そちらも合わせてご覧ください

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

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

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

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

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

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