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

「もう一度遊ぶ」ボタンクリックによる画面遷移

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「もう一度遊ぶ」ボタンにクリックイベントを登録して、ボタンクリック後にスタート画面に遷移させる方法について解説致します。
講師:
03:06

字幕

このレッスンでは「もう一度遊ぶ」ボタンに クリックイベントを登録して ボタンクリック後にスタート画面に 遷移させる方法について解説致します まずはダウンロードしてきた retry_button という フォルダの中に入っている js フォルダの中のこの script.js ファイルを エディタで開いて下さい これがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それでは早速レッスンを始めていきましょう 今回 注目していただきたいのは こちらの script.js ファイルの中の こちらの部分となります それでは順番に見ていきます まずはこちらの部分ですね こちらの部分ではこの on の前に 書かれているこちらの要素― 要するに retryButton という ID が付いた HTML タグの中にある a タグに対して こちらの click ― 要するにクリックイベントを付ける といった意味になります そしてこちらで指定した要素がクリックされたら この function の { } の間に書かれている こちらの処理が実行されるといった形になります では こちらの部分の処理について 見ていきたいと思います まず $(this).blur(); でこの a タグに フォーカスが当たるのを防止して 最後のこちらの return false; で この a タグが元々持っている クリックされたときに発動する リンクの機能を無効化しています そしてこの blur と return false; の間に ページを切り替える処理を書いています まず pageEnd という ID を持った HTML タグのコンテンツを hide ― 非表示にして そして pageStart という 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宛までご連絡ください。