
Copy Link
このコースでは、JavaScriptで低レベルの処理からプログラムを積み上げていき、思考アルゴリズムまで入った、リバーシゲームを作ります。その過程とコードを、すべて解説します。
このコースでは、Web開発の知識を利用して、JavaScriptとHTMLでGUIのローカルアプリケーションを作成する方法を学びます。
Windows環境に、Node.js、Electronの導入を行ない、メニューや文字コード変換機能を備えたテキストエディタや、特殊機能を複数持ったWebブラウザを、実際に作っていきます。
コースで紹介されるコードは、サンプルコードとして、全てダウンロードすることができます。
JavaScriptを利用すれば、ブラウザで動くゲームやツールを開発できます。ゲームの開発を通して、JavaScriptを高度に使いこなす技術を学んでください。
2002年にクロノス・クラウン合同会社を設立。代表社員。ゲームやアプリケーションの開発、書籍や記事の執筆を行う。
秀和システムより「マンガでわかるJavaScript」「マンガでわかるAndroidプログラミング」「マンガでわかるJavaプログラミング」他、技術評論社より「JavaScript 仕事の現場でサッと使える! デザイン教科書」「プログラマのためのコードパズル」を出版。
2001年度のオンラインソフトウェア大賞に「めもりーくりーなー」で入賞。
2016年に第23回松本清張賞の最終候補となり、文藝春秋より「裏切りのプログラム」で小説家デビュー。
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秒 |