JavaScriptとHTMLで「タワーディフェンス」を作ろう 全コード解説
JavaScriptとHTMLで、タワーディフェンス ゲームを作る講座です。ゲームの基本的な構造と、JavaScriptを使ったタワーディフェンス ゲームの作り方を学べます。
What you will learn
Webブラウザで動作する、JavaScriptのゲームを作れるようになります。
タワーディフェンス ゲームを作れるようになります。
ゲームの基本的な仕組みを把握し、その処理を身に付けます。
タイトル シーン、防衛シーンといった画面遷移を伴うゲームを作れるようになります。
Why take this course?
このコースでは、JavaScriptとHTMLで「タワーディフェンス」を作成する方法を学びます。
タイトル シーン、防衛シーンといった画面遷移を実現しながら、シンプルなコードでゲームを作ります。作成するタワーディフェンスは、好きなマスにタワーを置ける、自由配置型のものです。
コースで紹介するコードは、サンプルコードとして、全てダウンロードできます。
jQueryやその他のライブラリは一切使っていません。そのため必要な処理は、全てサンプル内に入っています。
このコースを習得すれば、次のような事ができるようになります。
・ユーザー入力、アニメーション表示、ゲームデータの管理といった、ゲームの基本的な仕組みの理解。
・タイトル シーン、防衛シーンといった画面遷移をともなうゲームの実現。
・敵や塔を自動で処理させるゲームの実現。
・それらを実現するJavaScriptのコードとHTMLの把握。
‥‥‥‥‥‥‥‥‥‥
このコースは、以下のように進みます。
● 第1章 イントロダクション
● 第2章 ゲームの構造と素材
● 第3章 HTMLなどの枠組み
● 第4章 ゲームのデータ
● 第5章 ゲームの基本的な処理1
● 第6章 ゲームの基本的な処理2
● 第7章 タイトル シーンと防衛シーン
● 第8章 基本部分の描画
● 第9章 タワーディフェンスの描画
● 第10章 終了処理の描画
● 第11章 タワーディフェンスの基本的な枠組み
● 第12章 タワーディフェンスの塔と弾の処理
● 第13章 タワーディフェンスの敵の処理
● 終わりに
‥‥‥‥‥‥‥‥‥‥
本コースで作成するゲームは、以下の機能を持っています。タワーディフェンス ゲームの基本的な機能を一通り学べるようにしています。
・タワーの配置。
・タワーのレベルアップ。
・タワーによる通常攻撃と、足止め攻撃。
・弾の自動追尾。
・敵の侵攻。
・タワーを避けた最短経路での敵の侵攻と、飛行による上空通過の侵攻。
・スクリーンショットの保存。
・ゲーム終了後の、Twitterへの成績投稿。