PRO COURSE

JavaScriptで作るリバーシゲーム！ブラウザで動くゲーム開発講座

JavaScriptで低レベルの処理からプログラムを積み上げていき、思考アルゴリズムまで入った、リバーシゲームを作ります。JSでゲーム開発をやってみましょう！

Instructor: 柳井政和

ツールを使わず基礎から
JavaScriptでリバーシゲームを作りましょう！

このコースでは、JavaScriptで低レベルの処理からプログラムを積み上げていき、思考アルゴリズムまで入った、リバーシゲームを作ります。その過程とコードを、すべて解説します。

JavaScriptでリバーシゲームを作って何ができる？

ブラウザで動くリバーシゲームを、JavaScriptで1から組み立てられるようになる。
そのために必要な処理や、プログラムの積み上げが、できるようになる。
プロセス間通信や、メニュー、ショートカットなど、Electronの機能を使いこなせるようになる。
Webページのキャプチャ、PDF化、画像をまとめてDLなど、各種処理ができるようになる。

このコースで学ぶこと

このコースでは、Web開発の知識を利用して、JavaScriptとHTMLでGUIのローカルアプリケーションを作成する方法を学びます。

Windows環境に、Node.js、Electronの導入を行ない、メニューや文字コード変換機能を備えたテキストエディタや、特殊機能を複数持ったWebブラウザを、実際に作っていきます。

コースで紹介されるコードは、サンプルコードとして、全てダウンロードすることができます。

コースの構成

第1章イントロダクション

開発環境の準備

基本処理を作る

キャンバスの初期化
基礎的な共通処理
リソースの読み込みと管理
アニメーションの管理
UIの管理

リバーシの描画を作る

画面を作る描画
背景の描画
盤面の描画
石の描画
スコアの描画
手番プレイヤーの描画
その他の処理
描画キャッシュの作成
エフェクト
盤面クリック

ゲームを創る

ゲームの初期化
リバーシゲームのシステム
ゲームの進行
COMの思考

こんな方におすすめ

JavaScriptで、1からゲームを作ってみたい人
ブラウザで動くゲームを、基礎から作ってみたい人

受講に際して必要なもの

事前の準備は特に必要ありません。
「Google Chrome」と「Atom」エディタで、開発を進めていきます。それらの導入の仕方も解説しています。
JavaScriptとjQueryの基礎的な知識は、持っていた方がよいです。

JavaScriptを利用すれば、ブラウザで動くゲームやツールを開発できます。ゲームの開発を通して、JavaScriptを高度に使いこなす技術を学んでください。

About the Instructor

柳井政和

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

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

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

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

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

Course content

Total 7 hours 26 minutes

Preview You can preview lectures with this label

Section 1：イントロダクション
1	イントロダクション	Preview	1:35
2	ソースコードのダウンロード		1:00
3	作成するリバーシゲーム	Preview	2:59
4	ソースコードについて		0:37
5	ブラウザについて		3:16
6	文字コードについて		2:06
7	テキストエディタについて		1:38
8	JavaScriptの基本文法について		1:18
9	本セクションの参考ドキュメント		1:00
Section 2：リバーシゲームの構造
10	[章頭] リバーシゲームの構造		0:25
11	ファイルの種類	Preview	2:56
12	HTML		4:19
13	CSS		2:11
14	画像		1:07
15	サウンド		3:39
16	Webフォント		3:18
17	JavaScript	Preview	3:53
18	本セクションの参考ドキュメント		1:00
Section 3：◆基本処理を作る◆
19	[章頭] ◆基本処理を作る◆		0:19
20	基本処理の概要		3:45
21	jQueryの資料		1:59
22	Canvasの資料		3:21
23	本セクションの参考ドキュメント		1:00
Section 4：キャンバスの初期化
24	[章頭] キャンバスの初期化		0:11
25	HTMLファイル	Preview	3:29
26	各JSファイルの初期化		3:46
27	game.core.getWinW, getWinH		1:53
28	game.core.getFitSz		3:24
29	game.canvas.genCnvs		4:41
30	game.canvas.initCnvs		3:43
Section 5：game.core その他
31	[章頭] game.core その他		0:14
32	game.core.ua.pc		2:45
33	game.core.inRng	Preview	3:31
34	game.core.rtRGB		3:21
Section 6：画像の読み込みと管理
35	[章頭] 画像の読み込みと管理		0:18
36	リソースの読み込みを待つ	Preview	2:29
37	jQuery.Deferred		3:53
38	jQuery.Deferred 2		4:52
39	jQuery.Deferred 3		4:09
40	HTMLファイル		2:56
41	resouce.image.load, imgs	Preview	3:56
Section 7：フォントの読み込み
42	[章頭] フォントの読み込み		0:17
43	Webフォントの読み込みタイミング		1:37
44	HTMLファイル		4:44
45	resouce.font.load		5:25
Section 8：サウンドの読み込み
46	[章頭] サウンドの読み込み		0:36
47	サンプルの動作とゲームで必要な処理		3:36
48	HTMLファイル		4:34
49	resouce.sound.js の中身		5:55
50	resouce.sound.init		3:52
51	resouce.sound.load		7:03
52	resouce.sound.chckUnbl		1:41
53	resouce.sound.rstCurTm		1:31
54	resouce.sound.play		4:36
55	resouce.sound.playLoop		2:14
56	resouce.sound.pause		1:00
57	resouce.sound.stop		1:38
58	resouce.sound.vol		1:30
59	resouce.sound.playSE		2:43
60	resouce.sound.playBGM		2:27
Section 9：アニメーションの管理
61	[章頭] アニメーションの管理		0:17
62	アニメーションの仕組み		2:06
63	HTMLファイル		6:47
64	game.anim.rqstAnmFrm, cncl		2:49
65	game.anim.strt, stp		3:46
66	game.anim.updt		3:42
67	game.anim.add, rmv		1:43
Section 10：UIの管理
68	[章頭] UIの管理		0:14
69	サンプルの動作		1:56
70	HTMLファイル		4:32
71	game.ui.init		4:00
72	game.ui.addBtn		3:38
73	game.ui.addBtn 2		5:04
74	game.ui.addBtn 3		3:52
75	game.ui.rmvBtn		1:26
Section 11：画像の縮小
76	[章頭] 画像の縮小		0:18
77	サンプルの動作		3:29
78	HTMLファイル		3:54
79	game.canvas.getScaledImg		5:06
Section 12：◆リバーシの描画を作る◆
80	[章頭] ◆リバーシの描画を作る◆	Preview	0:17
81	リバーシの描画の概要	Preview	2:03
82	リバーシの描画の概要2	Preview	3:51
83	リバーシの描画の概要3	Preview	2:10
84	本セクションの参考ドキュメント		1:00
Section 13：背景の描画
85	[章頭] 背景の描画		0:14
86	サンプルの動作	Preview	0:53
87	HTMLファイル		2:34
88	reversi.canvas.jsの変数		4:06
89	reversi.canvas.initCnvs		5:22
90	reversi.canvas.drwBg		1:32
Section 14：盤面の描画
91	[章頭] 盤面の描画		0:16
92	サンプルの動作	Preview	1:27
93	HTMLファイル		1:20
94	reversi.canvas.drwSqAll		3:27
95	reversi.reversi.scnBrd		2:11
96	reversi.canvas.xyToReal		1:59
97	reversi.canvas.drwSq		3:09
98	reversi.canvas.drwSq 2		3:32
Section 15：石の描画
99	[章頭] 石の描画		0:15
100	サンプルの動作	Preview	0:48
101	HTMLファイル		1:57
102	reversi.canvas.rszTkn		2:20
103	reversi.canvas.drwTkn		2:06
104	reversi.canvas.drwTknAll		1:22
Section 16：スコアの描画
105	[章頭] スコアの描画		0:15
106	サンプルの動作	Preview	1:47
107	HTMLファイル		1:54
108	reversi.canvas.drwPScrAll		1:25
109	reversi.canvas.drwPScr		3:23
Section 17：手番プレイヤーの描画
110	[章頭] 手番プレイヤーの描画		0:13
111	サンプルの動作	Preview	1:11
112	HTMLファイル		1:10
113	reversi.canvas.drwPlyr		2:24
114	reversi.canvas.drwPlyr 2		5:35
Section 18：描画キャッシュの作成
115	[章頭] 描画キャッシュ		0:17
116	サンプルの動作	Preview	1:55
117	HTMLファイル		2:20
118	reversi.canvas.genCsh		2:17
119	reversi.canvas.drwCsh		1:07
Section 19：エフェクト
120	[章頭] エフェクト		0:13
121	サンプルの動作	Preview	0:51
122	HTMLファイル		2:30
123	reversi.effect.js		2:08
124	reversi.effect.msg		2:53
125	reversi.effect.msg 2		4:23
Section 20：盤面クリック
126	[章頭] 盤面クリック		0:13
127	サンプルの動作		2:05
128	HTMLファイル		5:06
Section 21：◆ゲームを作る◆
129	[章頭] ◆ゲームを作る◆		0:15
130	ゲームの処理の概要		3:07
131	ゲームの処理の概要2		3:59
132	ゲームの処理の概要3		3:09
133	本セクションの参考ドキュメント		1:00
Section 22：ゲームの初期化
134	[章頭] ゲームの初期化		0:13
135	HTMLファイル		2:44
136	reversi.core.jsの変数		2:30
137	reversi.core.init		5:17
138	reversi.core.initClck		1:23
139	reversi.core.strt		2:19
140	reversi.core.btnStrt		3:52
141	reversi.core.updtCnvs		3:47
142	reversi.canvas.drwEnblSqsAll, drwEnblSqs		3:50
Section 23：リバーシゲームのシステム
143	[章頭] リバーシゲームのシステム		0:24
144	reversi.reversi.jsの変数		7:20
145	reversi.reversi.init		5:31
146	各種共通処理		3:58
147	reversi.reversi.scnLn		5:48
148	reversi.reversi.getEnblSqs		5:42
149	reversi.reversi.putTkn		2:45
150	reversi.reversi.execRvrs		4:34
151	nxt		2:15
Section 24：ゲームの進行
152	[章頭] ゲームの進行		0:13
153	reversi.core.clckBrd		2:56
154	reversi.core.doRev		2:58
155	reversi.core.playSERev		2:20
156	reversi.core.updt		2:21
157	reversi.core.updt 2		2:44
158	reversi.core.updt 3		2:01
159	reversi.effect.putTkn		7:20
160	reversi.effect.chngBrd		5:37
161	reversi.effect.chngBrd 2		3:11
Section 25：COMの思考
162	[章頭] COMの思考		0:15
163	アルゴリズムの概要		4:46
164	reversi.com.js		3:11
165	comIn		2:38
166	comIn 2		2:24
167	comIn 3		3:52
168	comIn 4		4:21
Section 26：◆終わりに◆
169	[章頭] ◆終わりに◆		0:12
170	ゲーム作成について		1:15