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

ゲーム内各画面のHTMLコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ゲーム内の各画面のインターフェースをHTMLで構築していく方法について、そのいくつかのポイントを解説致します。
講師:
04:30

字幕

このレッスンではゲーム内での各画面の インターフェースを HTML で構築していく方法について そのいくつかのポイントを解説いたします まずダウンロードしたこちらの html coding というフォルダに入っているー www フォルダの中の この index.html を エディタで開いて下さい これがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきます ではレッスンを始めましょう この index.html ファイルですが 既に今回のゲームの ユーザーインターフェースの HTML コーディングが完了している 状態となっています このファイルを目で追いながら 実際にどのように HTML コーディングを しているか確認していきたいと思います まず この HTML ファイルの中では このゲームで表示する全ての画面をこの 1つの HTML ファイルに記述しています 画面ごとに HTML ファイルを分けていない という所がポイントとなります そしてその画面に対しては このように div タグで作成して行って そして class="page" をその div タグに つけています そして その div タグには id で ページの名前をつけてあげています 例えば こちらの スプラッシュスクリーンであれば div タグの id="pageSplash" として class="page" としています そして この div タグ ここからここまでが 1つの画面を構成しています 例えばスタート画面であれば こちらの div タグですね こちらのスタート画面においては この div タグに id="pageStart" と書いて class="page" としています この div タグの中に そのスタート画面で表示させる 要素を記述しています 例えば 最高得点の部分や ゲームスタートのボタンの部分ですね このように 他の画面に対しても このように div タグと id そして class をつけて このように制作していっています そして この HTML ファイルの中で 最も複雑なことをしているのが… この部分です この部分はゲームプレイ画面中に 表示されるモグラのコーディングを 行っている部分です モグラの部分には 表示させる内容が 他と比べて多いです 例えばモグラの画像はもちろん 得点画像や モグラをクリックした時に 表示される打撃の画像 そして穴の画像 モグラを隠すためのカバー画像 といった形になります 更に モグラ自身に関しても 二種類のモグラ 良いモグラと悪いモグラがいて それぞれのモグラには通常時の表情と 叩かれた時の表情 それぞれ2つずつ画像があります よって このように コーディングしている形となります また ゲーム画面中では 3つのモグラが出てきますが 実際にこの HTML ファイルの中では 1つのモグラに対しての コーディングしか行っていません これは HTML のソースを 簡潔にする目的でもあります その他の2体のモグラについては 後程 JavaScript で このモグラの HTML ソースを 複製して あと2体分を 動的に生成していきます ですので こちらの HTML ソース上には 1体分のモグラの HTML ソースだけで大丈夫です 以上で この HTML ソースに対しての 解説は終了となりますが 先程ダウンロードしたファイルの中には こちらの部分に完成形の各画面の イメージを合わせて入れていますので これを参考にしながら 一度ご自身でコーディングの方を やってみて下さい 以上でレッスンは終了です 今回はゲーム内の各画面の インターフェースを HTML で構築していく方法について そのいくつかのポイントを 解説いたしました 以降のレッスンでは HTML で構築した ゲーム内の各画面の インターフェースに対して CSS コーディングをしていく 方法について そのいくつかのポイントを 解説していきますので そちらも合わせてご覧下さい

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

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

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

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

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

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