JavaScriptとHTMLで「タワーディフェンス」を作ろう 全コード解説
What you'll learn
- Webブラウザで動作する、JavaScriptのゲームを作れるようになります。
- タワーディフェンス ゲームを作れるようになります。
- ゲームの基本的な仕組みを把握し、その処理を身に付けます。
- タイトル シーン、防衛シーンといった画面遷移を伴うゲームを作れるようになります。
Requirements
- 変数や関数の利用といった、初歩的なJavaScriptのプログラミングの経験が必要です。
- パソコンで開発をおこないます。
- WebブラウザとしてGoogle Chrome、エディタとしてVisual Studio Codeを利用します。どちらも無料です。
Description
このコースでは、JavaScriptとHTMLで「タワーディフェンス」を作成する方法を学びます。
タイトル シーン、防衛シーンといった画面遷移を実現しながら、シンプルなコードでゲームを作ります。作成するタワーディフェンスは、好きなマスにタワーを置ける、自由配置型のものです。
コースで紹介するコードは、サンプルコードとして、全てダウンロードできます。
jQueryやその他のライブラリは一切使っていません。そのため必要な処理は、全てサンプル内に入っています。
このコースを習得すれば、次のような事ができるようになります。
・ユーザー入力、アニメーション表示、ゲームデータの管理といった、ゲームの基本的な仕組みの理解。
・タイトル シーン、防衛シーンといった画面遷移をともなうゲームの実現。
・敵や塔を自動で処理させるゲームの実現。
・それらを実現するJavaScriptのコードとHTMLの把握。
‥‥‥‥‥‥‥‥‥‥
このコースは、以下のように進みます。
● 第1章 イントロダクション
● 第2章 ゲームの構造と素材
● 第3章 HTMLなどの枠組み
● 第4章 ゲームのデータ
● 第5章 ゲームの基本的な処理1
● 第6章 ゲームの基本的な処理2
● 第7章 タイトル シーンと防衛シーン
● 第8章 基本部分の描画
● 第9章 タワーディフェンスの描画
● 第10章 終了処理の描画
● 第11章 タワーディフェンスの基本的な枠組み
● 第12章 タワーディフェンスの塔と弾の処理
● 第13章 タワーディフェンスの敵の処理
● 終わりに
‥‥‥‥‥‥‥‥‥‥
本コースで作成するゲームは、以下の機能を持っています。タワーディフェンス ゲームの基本的な機能を一通り学べるようにしています。
・タワーの配置。
・タワーのレベルアップ。
・タワーによる通常攻撃と、足止め攻撃。
・弾の自動追尾。
・敵の侵攻。
・タワーを避けた最短経路での敵の侵攻と、飛行による上空通過の侵攻。
・スクリーンショットの保存。
・ゲーム終了後の、Twitterへの成績投稿。
Who this course is for:
- JavaScriptとHTMLでゲームを作りたい人。
- タワーディフェンス ゲームを作りたい人。
- ゲームの中身を基礎的な仕組みから知りたい人。
Instructor
2002年にクロノス・クラウン合同会社を設立。代表社員。ゲームやアプリケーションの開発、書籍や記事の執筆をおこなう。
SBクリエイティブより「JavaScript[完全]入門」、MdNコーポレーションより「プロフェッショナルWebプログラミング JavaScript」、秀和システムより「マンガでわかるJavaScript」「マンガでわかるAndroidプログラミング」「マンガでわかるJavaプログラミング」他、技術評論社より「JavaScript 仕事の現場でサッと使える! デザイン教科書」「プログラマのためのコードパズル」を出版。
2001年度のオンラインソフトウェア大賞に「めもりーくりーなー」で入賞。
2016年に第23回松本清張賞の最終候補となり、文藝春秋より「裏切りのプログラム」で小説家デビュー。2018年に新潮社より「レトロゲームファクトリー」を出版。