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