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

「もぐら」の非表示に併せた画像の非表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
打撃(ヒット)画像、および加点または減点画像を、「もぐら」が穴に隠れたのと同時に、非表示にする方法について解説致します。
講師:
03:43

字幕

このレッスンでは 打撃画像 要するにヒット画像 そして 加点または減点画像を もぐらが穴に隠れたのと同時に 非表示にする方法について解説いたします まずは ダウンロードしてきたこちらの hide_images という フォルダの中に入っている こちらの js フォルダをこの script.js ファイルを エディタで開いてください そして これがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回 注目していただきたい部分は こちらの部分となります この部分は これまでのレッスンで 実装してきたもぐらの― 表示アニメーションの記述を行なっている箇所です まず こちらの部分で モグラが穴から顔を出して そして さらにこちらの部分で 顔を出したもぐらが穴に隠れていく アニメーションを実装している箇所ですね そして こちらの穴に 隠れた後に実行されるのが こちらの function の波括弧の間の 処理という形になります この部分において 表示されているヒット画像― および 加点または減点画像の表示を 非表示にしています 行なっていることは とてもシンプルですね ただ それぞれの要素の対して hide 要するに非表示にするという命令を 付け加えているだけです それでは この部分の HTML 操作を 確認してみたいと思います index.html ファイルを エディタで開いてみます そして 今回もぐらが穴に隠れるのと同時に 非表示にしている画像の部分が こちらの部分とそして こちらの部分になるわけですね それぞれ score というクラスを持った

タグ そして hit というクラスを持った
タグです このクラス score の
タグの中には 加点画像と減点画像の両方が入っています そして こちらの hit というクラスを持った
タグの中にはヒット画像 要するに打撃画像が 格納されているといった状態です これらの要素に対して もぐらが穴に隠れたら これらの要素も一緒に非表示にする といった形を取っています それでは この状態で この 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宛までご連絡ください。