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

スタートボタンクリックによる画面遷移

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スタートボタンにクリックイベントを登録して、クリックした後に、ゲームプレイ画面へ遷移させる方法について解説致します。
講師:
03:40

字幕

このレッスンではスタートボタンに クリックイベントを登録して クリックした後にゲームプレイ画面へ 遷移させる方法について解説致します まずはダウンロードしてきた― こちらの start_button という フォルダの中に入っている こちらの js フォルダの中の script.js ファイルをエディタで開いて下さい そして これがそのファイルを 開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速 レッスンを始めていきましょう 今回 注目していただきたい部分は こちらの部分となります それでは 順番に見ていきましょう まずは こちらの部分から $('#startButton a').on ('click', function(){...}); と書いていますね この様に書くことで この on の前に 指定した要素に対して クリックイベントを登録することができます 要するに startButton という id を持った HTML タグの中にある a タグに対して― クリックイベントを登録しているわけですね そして クリックイベントを登録すると どうなるかと言うと こちらに指定した要素がクリックされると この function の後の 波括弧の中に記載されたこちらの処理が 実行されるといった形になります それでは こちらの内容について 見ていきたいと思います まず $(this).blur と書いていますね この様にすることで クリックした際に こちらの a タグに対して フォーカスが移るのを防いでいます そして 少し飛ばして こちらの部分 こちらには return false と書いています この様にすることで クリックされた時に 発動する本来の a タグの効果を 打ち消す意味があります 要するに リンクの効果を打ち消して― 他の外部のサイトに 移動してしまわない様にしています そして この blur と return false の間に囲まれた― こちらの部分の処理ですが まずこちらの部分で スタート画面を hide 要するに非表示としています そしてその代わりに こちらの部分ですね #pagePlaying 要するに pagePlaying といった id をもった― HTML タグのコンテンツを show 表示しろという形になっています この様に書くことでゲームスタートボタンを クリックすると スタート画面からゲームプレイ画面に 遷移させることが可能です それではこの状態で 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宛までご連絡ください。