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

ベストスコア更新と表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ゲームプレイ終了後にスタート画面に戻った際、今回の得点とベストスコアを比較して、ベストスコアを更新する方法と画面内に表示させる方法について、解説致します。
講師:
05:08

字幕

このレッスンでは ゲームプレイ終了後に スタート画面に戻った際 今回の得点とベストスコアを比較して ベストスコアを更新する方法と 画面内に表示させる方法について解説致します まずは ダウンロードしてきたこちらの show_bestscore という フォルダの中に入っている こちらの js フォルダの中の この script.js ファイルを エディタで開いて下さい そして これがそのファイルを開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回注目していただきたい部分が こちらの部分となります この部分は ゲームの終了画面に 表示されている「もう一度遊ぶボタン」を クリックした際に発動される 処理の部分でしたね この中のこちらの部分では ゲームの終了画面を非表示にして そして ゲームのスタート画面を 表示するという処理を 行っている箇所でした 今回はこの下のこちらの部分に そのベストスコアの更新と ベストスコアの画面への表示の 実装を行っていきたいと思います それでは 順番に見ていきましょう まずはこちらのベストスコアの更新の方から こちらの部分では if 文を使って 2つの変数を比較しています 1つ目は bestScore という変数 もう1つは currentScore という変数ですね この bestScore という変数は その名の通りゲームのベストスコアを 保持するための変数となっています 今回制作していくゲームアプリでは アプリを立ち上げた際には 必ずこのベストスコアはゼロ点に リセットされるような仕様としています そして もう1つの変数は currentScore ですね これは一回一回のゲームの得点を 格納するための変数です これを比較してあります そしてもしこの bestScore の方が currentScore よりも低かった場合 もちろんその currentScore の方が bestScore という形になるので この変数 bestScore に対して この currentScore の値を代入してあげます これで bestScore の更新は完了です そして次は その bestScore を実際に スタート画面の中で表示させたいと思います それがこちらの部分ですね まず $('.bestScore') と書きます 要するに bestScore というクラスを持った HTML タグのテキスト 要するに その中にこの bestScore を 文字列で挿入しろという形になります この text という命令は この前に書いてある HTML タグの 中に書かれてある内容を こちらの括弧の中に書いてある内容に 差し替えるという命令でしたね その際 もしこの HTML タグの中にすでに 記入されているものがあった場合は それが削除されて 新たにこちらのテキストの引数の内容が 入ってくる形となります これで ベストスコアの表示の 処理が完了しました それでは 実際に index.html ファイルを ブラウザで開いて その動作を確認してみたいと思います index.html ファイルはダウンロード してきたファイルの中に含まれています それでは ブラウザで開いてみましょう そして これがそのファイルを開いた状態ですね それでは こちらの 「ゲームスタート」ボタンを 押して ゲームを始めていきましょう そして 頭を出してくる黒いモグラの方を クリックしていって そして 得点を稼いでいきます この茶色いもぐらは 良いもぐらなので たたいてしまうと減点対象となってしまいます ですので黒いもぐらを集中して たたくようにして下さい そして このようにゲームが終了すると このような形でゲーム終了画面が 表示されてきますね ここのスコアの部分では 前回のレッスンで行った 今回のゲームのスコアが表示されています では こちらの「もう一度遊ぶ」ボタンを クリックしてみましょう するとこのようにタイトル画面が 表示されてきましたね そして こちらの最高得点が 10 点という風になっています 要するに 先程プレイした内容が 最高得点になったので このようにその得点が 表示されてきたといった形ですね このように表示されていれば きちんとプログラムの実装が 完了できているということになります 以上でレッスンは終了です 今回はゲームプレイ終了後に スタート画面に戻った際 今回の得点とベストスコアを比較して ベストスコアを更新する方法と 画面内に表示させる方法について解説致しました このレッスンをもちまして ゲームのユーザーインターフェースおよび プログラム部分の実装は完了となります 以後のレッスンからは これまで作成してきたゲームを PhoneGapBuild にアップロードして アプリにビルドする方法について 解説していきますので そちらもあわせてご覧下さい

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

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

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

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

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

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