Top Programming JavaScriptで作るリバーシゲーム!ブラウザで動くゲーム開発講座
PRO COURSE

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

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

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

See more

Course content

Total 7 hours 26 minutes
Preview You can preview lectures with this label
イントロダクション
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秒
リバーシゲームの構造
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秒
◆基本処理を作る◆
19 [章頭] ◆基本処理を作る◆ 0分19秒
20 基本処理の概要 3分45秒
21 jQueryの資料 1分59秒
22 Canvasの資料 3分21秒
23 本セクションの参考ドキュメント 1分00秒
キャンバスの初期化
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秒
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秒
画像の読み込みと管理
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秒
フォントの読み込み
42 [章頭] フォントの読み込み 0分17秒
43 Webフォントの読み込みタイミング 1分37秒
44 HTMLファイル 4分44秒
45 resouce.font.load 5分25秒
サウンドの読み込み
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秒
アニメーションの管理
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秒
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秒
画像の縮小
76 [章頭] 画像の縮小 0分18秒
77 サンプルの動作 3分29秒
78 HTMLファイル 3分54秒
79 game.canvas.getScaledImg 5分06秒
◆リバーシの描画を作る◆
80 [章頭] ◆リバーシの描画を作る◆ Preview 0分17秒
81 リバーシの描画の概要 Preview 2分03秒
82 リバーシの描画の概要2 Preview 3分51秒
83 リバーシの描画の概要3 Preview 2分10秒
84 本セクションの参考ドキュメント 1分00秒
背景の描画
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秒
盤面の描画
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秒
石の描画
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秒
スコアの描画
105 [章頭] スコアの描画 0分15秒
106 サンプルの動作 Preview 1分47秒
107 HTMLファイル 1分54秒
108 reversi.canvas.drwPScrAll 1分25秒
109 reversi.canvas.drwPScr 3分23秒
手番プレイヤーの描画
110 [章頭] 手番プレイヤーの描画 0分13秒
111 サンプルの動作 Preview 1分11秒
112 HTMLファイル 1分10秒
113 reversi.canvas.drwPlyr 2分24秒
114 reversi.canvas.drwPlyr 2 5分35秒
描画キャッシュの作成
115 [章頭] 描画キャッシュ 0分17秒
116 サンプルの動作 Preview 1分55秒
117 HTMLファイル 2分20秒
118 reversi.canvas.genCsh 2分17秒
119 reversi.canvas.drwCsh 1分07秒
エフェクト
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秒
盤面クリック
126 [章頭] 盤面クリック 0分13秒
127 サンプルの動作 2分05秒
128 HTMLファイル 5分06秒
◆ゲームを作る◆
129 [章頭] ◆ゲームを作る◆ 0分15秒
130 ゲームの処理の概要 3分07秒
131 ゲームの処理の概要2 3分59秒
132 ゲームの処理の概要3 3分09秒
133 本セクションの参考ドキュメント 1分00秒
ゲームの初期化
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秒
リバーシゲームのシステム
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秒
ゲームの進行
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秒
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秒
◆終わりに◆
169 [章頭] ◆終わりに◆ 0分12秒
170 ゲーム作成について 1分15秒

Ratings and reviews

5.0
1 reviews
5 stars
100%
4 stars
0%
3 stars
0%
2 stars
0%
1 stars
0%

Related Courses