コース: JavaScriptとPhoneGap Buildでゲームアプリを作ろう
今すぐ登録して、25,300件以上登録されている、業界エキスパート指導のコースを受講しましょう。
「もう一度遊ぶ」ボタンクリックによる画面遷移
このレッスンでは「もう一度遊ぶ」ボタンに クリックイベントを登録して ボタンクリック後にスタート画面に 遷移させる方法について解説致します まずはダウンロードしてきた 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 ファイルは先程ダウンロードした ファイルの中に含まれています…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。