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

タイマーによる、「もぐら」の繰り返し表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptのタイマーを使って、「もぐら」がゲーム中に繰り返し顔を出すようにする仕組みを実装する方法について、解説致します。
講師:
03:50

字幕

このレッスンでは JavaScript のタイマーを使って もぐらがゲーム中に繰り返し 顔を出すようにする仕組みを 実装する方法について解説いたします まずはダウンロードしてきたこちらの timer for mogura フォルダの 中に入っている この jsフォルダの中の この script.js ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回 注目していただきたい部分は こちらの部分となります こちらの部分では実際に JavaScript のタイマー機能を使って 前回までのレッスンで作成した こちらのもぐらの表示を行うための関数 showMogura を呼び出すことによって ゲームプレイ中に繰り返しもぐらが 穴から顔を出すといった処理を行っています それでは順番に見ていきましょう まず変数を作っています そしてその変数の名前は moguraTimer1としています そして = setInterval (function (){}, 3000); としています この setInterval ですが  前回までのレッスンで利用してきた setTimeout とよく似たものになります setTimeout がその指定した時間後に 一度だけ function の中身を実行する といった内容だったのに対して このsetIntervalというのは 指定した時間の間隔で 繰り返し function の中の処理を 実行するといった意味になります そして今回はその function の中に この様に showMogura と書いています そしてその showMogura の 引数の中には #mole1 ということで どのもぐらに対して表示処理を行うかを 指定しています 今回は id mole1がついた もぐらとなりますので 画面上でいうと一番左のもぐら といった形になります また この setInterval というのは 戻り値として timerId というものを 戻しています この moguraTimer1という変数に 今回はその timerId を格納しています このようにしておくことで 後々このアニメーションを途中で ストップさせるといったことも 可能になりますので  忘れずに timerId を変数に 格納しておくようにしてください それではこの状態で index.html ファイルを ブラウザで開いて確認してみたいと思います index.htmlファイルは 先ほどダウンロードしてきた ファイルの中に含まれています それではブラウザで開いてみましょう これがそのindex.html ファイルを開いた状態です このスタート画面が表示される前に スプラッシュスクリーンが表示されていました それではこちらのゲームスタートボタンを クリックしてみましょう するとこのようにゲームプレイ画面に 切り替わって そして一番左端のもぐらが このように繰り返し 穴から顔を出しているのがわかります またこれまでのレッスンで実装してきたように 良いもぐらと悪いもぐらがランダムに 切り替わって表示されています このように動作すれば きちんとプログラムの実装が 完了できているといった形になります 以上でレッスンは終了です 今回はJavaScriptのタイマーを使って もぐらがゲーム中に繰り返し 顔を出すようにする仕組みを 実装する方法について解説いたしました 以降のレッスンでは このタイマーを利用した 時間差を使って3体のもぐらを 別々に表示させる方法について 解説していきますので そちらあわせてご覧ください

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

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

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

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

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

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