PRO COURSE

JavaScriptとHTMLで作る「レトロ風RPG」講座

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

Instructor: 柳井政和

JavaScriptを使って
Webブラウザーで動くレトロ風RPGを作りましょう!!

JavaScriptとHTML5を使えば、Webブラウザー上で動くアプリケーションやゲームを作ることができます。

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

まずはじめに、ゲームの構造と素材、HTMLファイルやJSファイルなどの構成を確認します。

そしてゲームのデータの作成、描画やクリック/タップ入力の受け取り、音声の利用方法を学びます。

そこから先は実際のゲーム部品の作成に入ります。ウィンドウやステータス表示、メニュー表示といったUIの作成、マップやバトル画面、イベントの構築、バトルの内部計算を実装していきます。

本講座を学ぶことで、JavaScriptの基本的な命令を利用して、ゲームの部品を作り、組み立てていく方法が分かります。

また改造することで、自作のゲームやアプリケーションも作れるようになるでしょう。

※本講座では、変数や関数といった基礎的なJavaScriptの知識を習得しているものとして話を進めます。

このコースで学べること

JavaScriptを使ったWebブラウザーゲームの開発
基礎的な命令から、ゲームを組み上げていく手法
レトロ風RPGの作り方

こんな方にオススメ

Webブラウザー上で動くゲームを作りたい
JavaScriptを使ったゲーム開発やアプリケーション開発をおこないたい
RPGを作りたい

レトロ風RPGは、短いプログラムで作り上げることが可能です。

サンプルのゲームは、コメントを豊富に記入した状態で、70KBほどで全てを実装しています。

一通り学べば、すぐに応用できるでしょう。

About the Instructor

柳井政和

クロノス・クラウン合同会社代表社員

2002年にクロノス・クラウン合同会社を設立。代表社員。ゲームやアプリケーションの開発、書籍や記事の執筆を行う。

秀和システムより「マンガでわかるJavaScript」「マンガでわかるAndroidプログラミング」「マンガでわかるJavaプログラミング」他、技術評論社より「JavaScript 仕事の現場でサッと使える! デザイン教科書」「プログラマのためのコードパズル」を出版。

2001年度のオンラインソフトウェア大賞に「めもりーくりーなー」で入賞。

2016年に第23回松本清張賞の最終候補となり、文藝春秋より「裏切りのプログラム」で小説家デビュー。

Course content

Total 2 hours 33 minutes

Preview You can preview lectures with this label

Section 1：ダウンロード資料
1	ダウンロード資料(サンプルコード含む)		1:00
Section 2：第1章イントロダクション
2	第1章イントロダクション	Preview	1:29
3	1-1. 作成するレトロ風RPG		1:51
4	1-2. 開発環境		1:39
Section 3：第2章ゲームの構造と素材
5	第2章ゲームの構造と素材		0:16
6	2-1. ゲームの構造1 - 画面構成とゲームの内容		3:06
7	2-2. ゲームの構造2 - 必要な技術		2:04
8	2-3. ゲームの構造3 - プログラムの構成		1:59
9	2-4. ゲームの素材1 - 画像ファイル		2:20
10	2-5. ゲームの素材2 - 音声ファイル		1:35
Section 4：第3章 HTMLなどの枠組み
11	第3章 HTMLなどの枠組み		0:16
12	3-1. index.html		1:34
13	3-2. main.css		1:30
14	3-3. main.js		3:28
Section 5：第4章ゲームのデータ
15	第4章ゲームのデータ		0:13
16	4-1. ゲームデータ（js-data「GameData.js」）		3:36
17	4-2. ユーザーデータ（js-data「UserData.js」）		3:02
18	4-3. 能力値計算とレベル（js-data「UtilLevel.js」）		4:06
19	4-4. マップの自動生成（js-data「UtilMap.js」）		4:11
20	4-5. データの保存と復帰（js-data「UtilUrlData.js」）		2:50
Section 6：第5章ゲームの基本的な処理
21	第5章ゲームの基本的な処理		0:14
22	5-1. 基本的な処理の概要（js-game「～」）		2:39
23	5-2. Canvasによるレイヤー構造（js-game「GameCanvas.js」）		3:34
24	5-3. アニメーションと時間の管理（js-game「GameAnim.js」）		4:40
25	5-4. リサイズ対応と入力の座標変換（js-game「GameView.js」）		6:44
26	5-5. その他（js-game「GameUtil.js」）		2:06
27	5-6. 画像管理（js-game「GameImage.js」）		1:35
28	5-7. 音声管理（js-game「GameSound.js」）		3:14
29	5-8. 音声管理2（js-game「GameSound.js」）		4:18
Section 7：第6章文字とウィンドウの描画
30	第6章文字とウィンドウの描画		0:16
31	6-1. 描画の階層構造		1:20
32	6-2. 文字列の描画（js-ui「UiText.js」）		4:06
33	6-3. ウィンドウの描画（js-ui「UiWIn.js」）		3:20
34	6-4. ステータスの描画（js-ui「UiStatus.js」）		2:37
Section 8：第7章マップの描画
35	第7章マップの描画		0:14
36	7-1. 描画の階層構造		0:49
37	7-2. チップの描画（js-ui「UiChip.js」）		1:44
38	7-3. マップの描画（js-ui「UiMap.js」）		3:19
39	7-4. 全体マップの描画（js-ui「UiMapFull.js」）		3:30
Section 9：第8章アイテムの描画
40	第8章アイテムの描画		0:12
41	8-1. アイテムの描画（js-ui「UiItem.js」）		1:48
42	8-2. アイテム用の文字列生成（js-data「UtilMisc.js」）		3:41
Section 10：第9章タイトル画面とマップ画面
43	第9章タイトル画面とマップ画面		0:12
44	9-1. タイトル画面（js-scene「SceneTitle.js」）		4:13
45	9-2. マップ画面（js-scene「SceneMap.js」）		4:00
Section 11：第10章マップ画面の処理
46	第10章マップ画面の処理		0:10
47	10-1. タップ方向の検出（js-scene「UtilMapDirection.js」）		2:12
48	10-2. 移動の処理（js-scene「UtilMapMove.js」）		4:12
49	10-3. イベント判定（js-scene「UtilMapEvent.js」）		4:11
Section 12：第11章イベント画面とバトル画面
50	第11章イベント画面とバトル画面		0:12
51	11-1. イベント画面（js-scene「SceneEvent.js」）		4:26
52	11-2. バトル画面（js-scene「SceneBattle.js」）		3:31
Section 13：第12章戦闘の描画
53	第12章戦闘の描画		0:11
54	12-1. 基本描画（js-ui「UiBattleBase.js」）		3:24
55	12-2. エフェクト描画（js-ui「UiBattleEffect.js」）		4:32
56	12-3. 数字エフェクト描画（js-ui「UiBattleNumEffect.js」）		1:59
Section 14：第13章戦闘のメニュー
57	第13章戦闘のメニュー		0:16
58	13-1. メニュー初期化と描画（js-scene「UtilBattleMenu.js」）		2:19
59	13-2. メニュータップ判定（js-scene「UtilBattleMenu.js」）		2:34
Section 15：第14章戦闘の内部処理
60	第14章戦闘の内部処理		0:14
61	14-1. 戦闘データの初期化（js-ui「UtilBattleData.init.js」）		2:05
62	14-2. 戦闘の計算（js-ui「UtilBattleData.calc.js」）		3:43
63	14-3. 戦闘の進行（js-ui「UtilBattleProcess.js」）		3:15
Section 16：終わりに
64	終わりに		3:01