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

時間差を利用した3体の「もぐら」の表示処理

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptのタイマーを利用した時間差を使って、3体の「もぐら」を別々に表示させる方法について、解説致します。
講師:
03:15

字幕

このレッスンでは JavaScriptの タイマーを利用した 時間差を使って3体のもぐらを 別々に表示させる方法について解説いたします まずはダウンロードしてきた こちらのthree mogura show というフォルダの中に入っている こちらの jsフォルダの中の この script.js ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それでは早速レッスンを始めていきましょう まずは前回のレッスンのおさらいです 前回はこちらの部分で setIntervalを使って 3秒ごとに画面上の一番左のもぐら 要するに id mole1がついた もぐらに対して繰り返し穴から顔を出す アニメーションを実行させるように いたしました 今回は残り2体のもぐらに対しても 同様の処理を行います ただ それぞれのもぐらが それぞれ違うタイミングで 顔を出すようにするために時間差をつけて タイマー設定を行いたいと思います それでは見ていきましょう 今回追加した部分はこちらの部分となります 実装内容自体は前回のレッスンで行った こちらの部分と同じです 異なる部分はというと まず 変数の名前を変えています 前回が moguraTimer1 だったのに対して moguraTimer2 そして moguraTimer3 としています そしてこちらの showMogura の中の 引数に指定するもぐらの id ですが こちらも変更しています 2つ目が #mole2です そして3つ目が #mole3としています これで全てのもぐらに対する繰り返しの 表示処理の実装は完了となります 最後にこのそれぞれのもぐらに対して それぞれの異なるタイミングで 顔出させるようにしてみたいと思います それがこちらの部分となります まず2つ目が 3700 と指定しています そして3つ目が 4300 と指定しています こうすることによって3体のもぐら それぞれが別々のタイミングで 穴から顔を出してくるといった実装を 行うことができます それではこの状態で index.htmlファイルを ブラウザで開いて その動作を確認してみたいと思います index.htmlファイルは先ほど ダウンロードしてきたファイルの 中に含まれています そしてこれが そのindex.html ファイルを 開いた状態です それではゲームスタートボタンを クリックしてみましょう すると このようにもぐら3体が それぞれ別々のタイミングで 穴から顔を出しているのがわかるかと思います このように動作すればきちんとプログラムの 実装が完了出来ているといった形になります 以上でレッスンは終了です 今回はタイマーを利用した時間差を使って 3体のもぐらを別々に表示させる 方法について解説いたしました 以降のレッスンではゲーム終了時に もぐらの表示動作を停止する処理の方法について 解説していきますので そちらあわせてご覧ください

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

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

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

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

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

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