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

「もぐら」HTMLの複製と配置

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「もぐら」のHTMLを複製して、ゲーム画面内に配置する方法について解説致します。
講師:
03:47

字幕

このレッスンではもぐらの HTML を複製して ゲーム画面内に配置する 方法について解説いたします まずはダウンロードしてきた こちらの clone_html という フォルダの中に入っている こちら js フォルダの中の この script.js ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それでは 早速レッスンを始めていきましょう 今回注目していただきたい部分は こちらの部分となります ゲームのプレイ画面においては もぐらは合計3体出てくる形となりますが これまでのレッスンで HTML のソース上では 一体分のもぐらのコーディングしか 行っていませんでした 今回はその一体分のもぐらの HTML ソースを複製して 残り2体分のもぐらを生成する 方法について見ていきます それでは具体的な処理を確認していきます まずはこちらの部分を見ていきましょう $('#mole1').clone().appendTo('.gameArea') そして .attr(); そてこの attr の括弧の中には 第1引数としてid そして第2引数として mole2 としています 少し長い1文ですね ただこの1文の中には 3つの処理が入っています それでは分解して 確認してみたいと思います まずは ここからここまでです この部分では HTML ソース上の id mole1 がついた HTML タグを clone 要するに複製しています そして 次はこちらの部分― こちらの部分ではその複製した HTML を クラス gameAreaがついた HTML タグの中の一番最後に追加する といった処理になります そして 最後のこちらの部分で は追加したタグの id の内容を mole2 に変更しろ といった形になります これでもぐら1体の複製が完了しました さらにもう1体欲しいので 同様の形で1文作ります そして最後の id の部分だけを mole3 に変更しておきます こうすることで 合計3体のもぐらを 画面上に表示することができます それではこの状態で index.html ファイルを ブラウザで開いて内容を確認してみましょう index.html ファイルは ダウンロードしてきた ファイルの中に含まれています そしてこれがその index.html ファイルをブラウザで開いた状態です このゲームスタート画面が表示される前は スプラッシュ スクリーンが 表示されていました それではこのゲームスタートボタンを クリックしてみましょう すると このようにもぐらが 3体表示されてきましたね このように表示されてくれば きちんとプログラムの実装が完了できている といった形になります 以上でレッスンは終了です 今回はもぐらの HTML を複製して ゲーム画面内に配置する方法について 解説いたしました 以降のレッスンでは もぐらの表示処理を行うための 関数の作成方法について解説していきますので そちら回してご覧ください

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

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

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

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

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

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