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

一定時間後のゲーム終了画面への遷移

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ゲームプレイ中に一定時間が経過した後に、ゲーム終了画面へ遷移させる方法について解説致します。
講師:
03:53

字幕

このレッスンではゲームプレイ中に 一定時間が経過した後に ゲーム終了画面へ遷移させる 方法について解説致します まずはダウンロードしてきた こちらの timer_ for game_end というフォルダの中に入っている js フォルダの中の この script.js ファイルを エディタで開いて下さい これがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それでは早速レッスンを始めていきましょう 今回注目していただきたいのは こちらのファイルの中のこの部分となります 前回のレッスンでこちらの部分を実装してきました こちらの部分は 20 秒かけて残り時間を 表すバーが徐々に縮んでいくといった アニメーションを実装する内容でしたね 今回はそのアニメーションが 終わった後に実行される こちらの function 部分― この function の { } の間にこのように書いていきます 要するにこちらの部分の処理は 残り時間がなくなった際に 実行される処理となるわけです ではこちらの処理を順番に見ていきます まずこちらの部分 $('.end').show と書いていますね こちらの部分はゲームプレイ画面に ゲーム終了といった画像を 表示させるための内容となっています それと同時にこちらの部分を実行します こちらの部分では以前のレッスンでも出てきた setTimeout を利用していますね そしてその時間は 3000 要するに3秒としています つまりはこの setTimeout の後に書いてある function の { } の間に書かれている こちらの内容を3秒経ったら 自動的に実行するといった意味になりますね ではそちらの内容ですが まず #gamePlaying― 要するに gamePlaying という ID を持った HTML タグのコンテンツを隠して そしてその次 #pageEnd 要するに pageEnd という ID を持った HTML タグのコンテンツを表示する といった形になります 要するにゲームプレイ画面を隠して ゲーム終了画面を表示する といった形になります それではこの状態で index.html ファイルを ブラウザで開いて実際の動作を 確認してみたいと思います index.html ファイルは先程ダウンロードした ファイルの中に含まれています これが index.html ファイルを開いた状態です この画面の前には スプラッシュウィンドウが表示されていました それではこのゲームスタートボタンを クリックしてみましょう するとこの様に前回実装した残り時間のバーの アニメーションが動いていますね これは 20 秒かけて横幅 200 ピクセルから 0 ピクセルまでアニメーションをしろ といった命令でしたね そしてこのバーが終了となりますと 「ゲーム終了」という画像が出てきて その3秒後にこのゲーム終了画面が表示されてきます このように表示されてくれば きちんとプログラムの実装が完了できている といった形になります 以上でレッスンは終了です 今回はゲームのプレイ中に 一定時間が経過した後に ゲーム終了画面へ遷移させる 方法について解説致しました 以降のレッスンでは「もう一度遊ぶ」ボタンに クリックイベントを登録して ボタンクリック後にスタート画面に遷移させる 方法について解説していきますので そちらも併せてご覧ください

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

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

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

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

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

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