Top Programming JavaScriptとHTMLで作る「タワーディフェンス」講座
PRO COURSE

JavaScriptとHTMLで作る「タワーディフェンス」講座

外部のライブラリを使わずに、JavaScriptとHTML5の基本機能だけを使って、Webブラウザー上で動くゲームを作る方法を学びます。

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回松本清張賞の最終候補となり、文藝春秋より「裏切りのプログラム」で小説家デビュー。

See more

Course content

Total 3 hours 30 minutes
Preview You can preview lectures with this label
ダウンロード資料
1 ダウンロード資料(サンプルコード含む)
第1章 イントロダクション
2 第1章 イントロダクション Preview 1:28
3 1-1. 作成するタワーディフェンス 2:52
4 1-2. 開発環境 1:45
第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
第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
第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
第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
第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
第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
第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
第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
第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
第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
第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
第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
終わりに
81 終わりに 2:09

Related Courses