
JavaScriptとHTMLで作る「タワーディフェンス」講座
JavaScriptを使って
Webブラウザーで動く
「タワーディフェンス」ゲームを作りましょう!!
JavaScriptとHTML5を使えば、Webブラウザー上で動くアプリケーションやゲームを作ることができます。
本講座では外部のライブラリを使わずに、JavaScriptとHTML5の基本機能だけを使って、Webブラウザー上で動く「タワーディフェンス」ゲームを作る方法を学びます。
まずはじめに、ゲームの構造と素材、HTMLファイルやJSファイルなどの構成を確認します。
そしてゲームの素材の読み込み、アニメーション処理、描画やクリック/タップ入力の受け取りの方法を学びます。
そこから先は実際のゲーム部品の作成に入ります。
基本的な描画や、弾、塔、敵の描画や処理、盤面の生成や各種計算を実装していきます。
本講座を学ぶことで、JavaScriptの基本的な命令を利用して、ゲームの部品を作り、組み立てていく方法が分かります。
また改造することで、自作のゲームやアプリケーションも作れるようになるでしょう。
※本講座では、変数や関数といった基礎的なJavaScriptの知識を習得しているものとして話を進めます。
このコースで学べること
- JavaScriptを使ったWebブラウザーゲームの開発
- 基礎的な命令から、ゲームを組み上げていく手法
- 「タワーディフェンス」ゲームの作り方
こんな方にオススメ
- Webブラウザー上で動くゲームを作りたい
- JavaScriptを使ったゲーム開発やアプリケーション開発をおこないたい
- 「タワーディフェンス」のようなマップ配置型ゲームを作りたい
「タワーディフェンス」ゲームは、シンプルな実装で作ることが可能です。
サンプルのゲームは、コメントを豊富に記入した状態で、64KBほどで全てを実装しています。
一通り学べば、すぐに応用できるでしょう。
About the Instructor

2002年にクロノス・クラウン合同会社を設立。代表社員。ゲームやアプリケーションの開発、書籍や記事の執筆を行う。
秀和システムより「マンガでわかるJavaScript」「マンガでわかるAndroidプログラミング」「マンガでわかるJavaプログラミング」他、技術評論社より「JavaScript 仕事の現場でサッと使える! デザイン教科書」「プログラマのためのコードパズル」を出版。
2001年度のオンラインソフトウェア大賞に「めもりーくりーなー」で入賞。
2016年に第23回松本清張賞の最終候補となり、文藝春秋より「裏切りのプログラム」で小説家デビュー。
Course content
Section 1:ダウンロード資料 | ||||
1 | ダウンロード資料(サンプルコード含む) | |||
Section 2:第1章 イントロダクション | ||||
2 | 第1章 イントロダクション | Preview | 1:28 | |
3 | 1-1. 作成するタワーディフェンス | 2:52 | ||
4 | 1-2. 開発環境 | 1:45 | ||
Section 3:第2章 ゲームの構造と素材 | ||||
5 | 第2章 ゲームの構造と素材 | 0:23 | ||
6 | 2-1. ゲームの構造1 - 画面構成とゲームの内容 | 4:10 | ||
7 | 2-2. ゲームの構造2 - 必要な技術 | 1:54 | ||
8 | 2-3. ゲームの構造3 - プログラムの構成 | 2:48 | ||
9 | 2-4. ゲームの素材1 - 画像ファイル | 2:23 | ||
10 | 2-5. ゲームの素材2 - Webフォント ファイル | 2:19 | ||
Section 4:第3章 HTMLなどの枠組み | ||||
11 | 第3章 HTMLなどの枠組み | 0:28 | ||
12 | 3-1. index.html | 2:15 | ||
13 | 3-2. main.css | 1:34 | ||
14 | 3-3. dialog-end.css | 2:30 | ||
15 | 3-4. main.js | 4:18 | ||
Section 5:第4章 ゲームのデータ | ||||
16 | 第4章 ゲームのデータ | 0:22 | ||
17 | 4-1. ゲーム データ(js-data「GameData.js」) | 4:48 | ||
18 | 4-2. ゲーム データ2(js-data「GameData.js」) | 2:55 | ||
19 | 4-3. ゲーム データ 表示用の設定(js-data「GameData.initView.js」) | 3:30 | ||
20 | 4-4. ユーザー データ(js-data「UserData.js」) | 3:30 | ||
21 | 4-5.ユーザー データ2(js-data「UserData.js」) | 3:18 | ||
Section 6:第5章 ゲームの基本的な処理1 | ||||
22 | 第5章 ゲームの基本的な処理1 | 0:28 | ||
23 | 5-1. 基本的な処理1の概要(js-game「~」) | 2:17 | ||
24 | 5-2. Canvasによるレイヤー構造(js-game「GameCanvas.js」) | 3:03 | ||
25 | 5-3. Canvasによるレイヤー構造2(js-game「GameCanvas.js」) | 2:15 | ||
26 | 5-4. アニメーションと時間の管理(js-game「GameAnim.js」) | 3:31 | ||
27 | 5-5. アニメーションと時間の管理2(js-game「GameAnim.js」) | 2:58 | ||
28 | 5-6. リサイズ対応と入力の座標変換(js-game「GameView.js」) | 2:44 | ||
29 | 5-7. リサイズ対応と入力の座標変換2(js-game「GameView.js」) | 3:18 | ||
30 | 5-8. リサイズ対応と入力の座標変換3(js-game「GameView.js」) | 3:20 | ||
31 | 5-9. リサイズ対応と入力の座標変換4(js-game「GameView.js」) | 2:56 | ||
Section 7:第6章 ゲームの基本的な処理2 | ||||
32 | 第6章 ゲームの基本的な処理2 | 0:25 | ||
33 | 6-1. 基本的な処理2の概要(js-game2「~」) | 1:06 | ||
34 | 6-2. 画像管理(js-game2「GameImage.js」) | 2:21 | ||
35 | 6-3. 画像管理2(js-game2「GameImage.js」) | 2:28 | ||
36 | 6-4. Webフォント管理(js-game2「GameFont.js」) | 3:38 | ||
37 | 6-5. その他(js-game2「GameUtil.js」) | 3:04 | ||
38 | 6-6. スクリーンショット(js-game2「GameScreenshot.js」) | 2:30 | ||
39 | 6-7. スクリーンショット2(js-game2「GameScreenshot.js」) | 2:29 | ||
Section 8:第7章 タイトル シーンと防衛シーン | ||||
40 | 第7章 タイトル シーンと防衛シーン | 0:25 | ||
41 | 7-1. タイトル シーン(js-scene「SceneTitle.js」) | 4:04 | ||
42 | 7-2. タイトル シーン2(js-scene「SceneTitle.js」) | 2:58 | ||
43 | 7-3. タイトル シーン3(js-scene「SceneTitle.js」) | 3:10 | ||
44 | 7-4. 防衛シーン(js-scene「SceneDefense.js」) | 2:40 | ||
45 | 7-5. 防衛シーン2(js-scene「SceneDefense.js」) | 2:34 | ||
46 | 7-6. 防衛シーン3(js-scene「SceneDefense.js」) | 2:49 | ||
47 | 7-7. ボタン部品(js-scene「UiButton.js」) | 3:33 | ||
48 | 7-8. ボタンの生成(js-scene「SceneDefense.initButton.js」) | 4:11 | ||
Section 9:第8章 基本部分の描画 | ||||
49 | 第8章 基本部分の描画 | 0:22 | ||
50 | 8-1. 背景の描画(js-ui-base「UiBg.js」) | 2:17 | ||
51 | 8-2. 盤面の描画(js-ui-base「UiBoard.js」) | 3:44 | ||
52 | 8-3. 情報の描画(js-ui-base「UiInfo.js」) | 3:16 | ||
53 | 8-4. 情報の描画2(js-ui-base「UiInfo.js」) | 2:08 | ||
Section 10:第9章 タワーディフェンスの描画 | ||||
54 | 第9章 タワーディフェンスの描画 | 0:22 | ||
55 | 9-1. 弾の描画(js-ui-defense「UiBullet.js」) | 4:18 | ||
56 | 9-2. 敵の描画(js-ui-defense「UiEnemy.js」) | 4:19 | ||
57 | 9-3. 塔の描画(js-ui-defense「UiTower.js」) | 4:59 | ||
Section 11:第10章 終了処理の描画 | ||||
58 | 第10章 終了処理の描画 | 0:20 | ||
59 | 10-1. 終了の描画(js-ui-end「UiEnd.js」) | 2:41 | ||
60 | 10-2. 終了ダイアログ(js-ui-end「UiDialogEnd.js」) | 3:49 | ||
61 | 10-3. 終了ダイアログ2(js-ui-end「UiDialogEnd.js」) | 3:19 | ||
Section 12:第11章 タワーディフェンスの基本的な枠組み | ||||
62 | 第11章 タワーディフェンスの基本的な枠組み | 0:27 | ||
63 | 11-1. 処理の初期化(js-defense「Defense.js」) | 1:39 | ||
64 | 11-2. 盤面の選択(js-defense「Defense.selectBoard.js」) | 3:35 | ||
65 | 11-3. 盤面の選択2(js-defense「Defense.selectBoard.js」) | 2:24 | ||
66 | 11-4. 処理の進行(js-defense「Defense.progress.js」) | 4:15 | ||
67 | 11-5. 処理の進行2(js-defense「Defense.progress.js」) | 3:05 | ||
Section 13:第12章 タワーディフェンスの塔と弾の処理 | ||||
68 | 第12章 タワーディフェンスの塔と弾の処理 | 0:28 | ||
69 | 12-1. 塔の生成と値計算(js-tower「Tower.js」) | 3:18 | ||
70 | 12-2. 塔のレベル処理(js-tower「Tower.level.js」) | 2:32 | ||
71 | 12-3. 塔の攻撃処理(js-tower「Tower.attack.js」) | 3:48 | ||
72 | 12-4. 弾の処理(js-tower「Bullet.js」) | 3:18 | ||
73 | 12-5. 弾の処理2(js-tower「Bullet.js」) | 2:38 | ||
Section 14:第13章 タワーディフェンスの敵の処理 | ||||
74 | 第13章 タワーディフェンスの敵の処理 | 0:28 | ||
75 | 13-1. 敵の生成(js-enemy「Enemy.generate.js」) | 2:05 | ||
76 | 13-2. 移動コスト地図の生成(js-enemy「EnemyCostMap.js」) | 3:24 | ||
77 | 13-3. 移動コスト地図の生成2(js-enemy「EnemyCostMap.js」) | 2:52 | ||
78 | 13-4. 移動コスト地図の生成3(js-enemy「EnemyCostMap.js」) | 1:50 | ||
79 | 13-5. ルートの生成(js-enemy「EnemyRoute.js」) | 4:21 | ||
80 | 13-6. 敵の移動(js-enemy「Enemy.move.js」) | 4:26 | ||
Section 15:終わりに | ||||
81 | 終わりに | 2:09 |