JavaScriptで作るリバーシゲーム
4.8 (23 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
331 students enrolled
Wishlisted Wishlist

Please confirm that you want to add JavaScriptで作るリバーシゲーム to your Wishlist.

Add to Wishlist

JavaScriptで作るリバーシゲーム

本コースでは、JavaScriptで、低レベルの処理からプログラムを積み上げていき、思考アルゴリズムまで入った、リバーシゲームを作ります。その過程とコードを、すべて解説します。
4.8 (23 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
331 students enrolled
Created by 柳井 政和
Last updated 6/2016
Japanese
Current price: $10 Original price: $85 Discount: 88% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 7.5 hours on-demand video
  • 6 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • ブラウザで動くリバーシゲームを、JavaScriptで1から組み立てられるようになる。
  • そのために必要な処理や、プログラムの積み上げが、できるようになる。
View Curriculum
Requirements
  • 事前の準備は特に必要ありません。
  • 「Google Chrome」と「Atom」エディタで、開発を進めていきます。それらの導入の仕方も解説しています。
  • JavaScriptとjQueryの基礎的な知識は、持っていた方がよいです。
Description

このコースは、JavaScriptで、低レベルの処理からプログラムを積み上げていき、思考アルゴリズムまで入ったリバーシゲームを作る、全課程が入っています。

このコースを習得すれば、次のような事ができるようになります。

・JavaScriptを利用したゲーム開発。

・ブラウザで動くゲームの作成。

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

‥‥‥‥‥‥‥‥‥‥

このコースは、以下のように進みます。

● イントロダクション

・開発環境の準備

● 基本処理を作る

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

● リバーシの描画を作る

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

● ゲームを作る

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

‥‥‥‥‥‥‥‥‥‥

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

Who is the target audience?
  • JavaScriptで、1からゲームを作ってみたい人。
  • ブラウザで動くゲームを、基礎から作ってみたい人。
Students Who Viewed This Course Also Viewed
Curriculum For This Course
170 Lectures
07:28:37
+
イントロダクション
9 Lectures 13:45

本コースの説明をおこない、おおまかなロードマップを示します。

Preview 01:34

本コースで作成するリバーシゲームを紹介します。画像表示、サウンド、ゲームの進行などの各種処理が統合されて、1つのゲームができています。

Preview 02:58

本コースで出てくるソースコードは、本レクチャーの「ダウンロード可能なリソース」からダウンロードできます。

ソースコードについて
00:37

本コースではGoogle Chromeを利用します。導入の仕方や、開発者ツールの使い方を紹介しておきます。

ブラウザについて
03:16

UTF-8で開発を行っていきます。

文字コードについて
02:06

何を使っても構いません。ここでは、複数のOSに対応している無料のテキストエディタであるAtomを使います。

テキストエディタについて
01:38

本コースは、ある程度JavaScriptの基本文法を知っている方向けのコースです。そのため、JavaScriptの基本文法を、手軽に学ぶ方法を紹介します。

JavaScriptの基本文法について
01:18

本セクションの参考資料をテキストでまとめたページです。必要に応じて、参照してください。

本セクションの参考資料
00:15

Q&Aを掲載していくページです。必要に応じて、参照してください。

Q&A
00:02
+
リバーシゲームの構造
9 Lectures 22:08

本セクションの前置きです。

[章頭] リバーシゲームの構造
00:24

HTML、CSS、JavaScript、画像、サウンド、Webフォントの各種ファイルを、本コースでは利用します。

Preview 02:56

HTMLファイルを紹介します。

HTML
04:18

CSSファイルを紹介します。

CSS
02:11

画像ファイルを紹介します。

画像
01:06

サウンドファイルを紹介します。

サウンド
03:39

Webフォントを紹介します。

Webフォント
03:17

JavaScriptファイルの種類と役割を紹介します。

Preview 03:53

本セクションの参考資料をテキストでまとめたページです。必要に応じて、参照してください。

本セクションの参考資料
00:24
+
◆基本処理を作る◆
5 Lectures 10:14

本セクションの前置きです。

[章頭] ◆基本処理を作る◆
00:19

基本処理として用意する、処理の概要について話します。

Preview 03:45

jQuery について、参考になる資料を示します。

jQueryの資料
01:59

HTML5 の Canvas について、参考になる資料を示します。

Canvasの資料
03:21

本セクションの参考資料をテキストでまとめたページです。必要に応じて、参照してください。

Preview 00:50
+
キャンバスの初期化
7 Lectures 21:05

本セクションの前置きです。

[章頭] キャンバスの初期化
00:10

「キャンバスの初期化」のサンプルのHTMLファイルを解説します。

Preview 03:29

各JavaScriptファイルの初期化部分を紹介します。

各JSファイルの初期化
03:46

ウィンドウの横幅と高さを取得する「game.core.getWinW」「game.core.getWinH」関数を紹介します。

game.core.getWinW, getWinH
01:52

縦横比を指定して、ウィンドウにぴったり収まるサイズを取得する「game.core.getFitSz」関数を紹介します。

game.core.getFitSz
03:24

縦横のサイズと倍率を指定して、キャンバスを生成する「game.canvas.genCnvs」関数を紹介します。

game.canvas.genCnvs
04:41

格納先のDOMのidと、縦横のサイズと倍率を指定して、キャンバスを初期化する「game.canvas.initCnvs」関数を紹介します。

game.canvas.initCnvs
03:43
+
game.core その他
4 Lectures 09:51

本セクションの前置きです。

[章頭] game.core その他
00:14

実行されているブラウザが、PCのブラウザかどうかの真偽値「game.core.ua.pc」を紹介します。

game.core.ua.pc
02:45

あるXY座標が、指定した四角形の範囲か判定する「game.core.inRng」関数を紹介します。

Preview 03:31

2つのRGB値を、指定比率で合成した色のRGB値を取得する「game.core.rtRGB」関数を紹介します。

game.core.rtRGB
03:21
+
画像の読み込みと管理
7 Lectures 22:33

本セクションの前置きです。

[章頭] 画像の読み込みと管理
00:18

リソースの読み込みを待つ処理が、なぜ必要なのかを説明します。

Preview 02:29

非同期処理をすっきりと書く、jQuery.Deferredについて簡単に説明します。

jQuery.Deferred
03:53

非同期処理をすっきりと書く、jQuery.Deferredについて簡単に説明します。その2。

jQuery.Deferred 2
04:52

非同期処理をすっきりと書く、jQuery.Deferredについて簡単に説明します。その3。

jQuery.Deferred 3
04:09

「画像の読み込みと管理」の、サンプルのHTMLファイルを解説します。

HTMLファイル
02:56

画像の読み込みと管理を行う「resouce.image.load」関数、「resouce.image.imgs」を紹介します。

Preview 03:56
+
フォントの読み込み
4 Lectures 12:03

本セクションの前置きです。

[章頭] フォントの読み込み
00:17

キャンバスの描画でWebフォントを使う際に注意しなければならない、Webフォントの読み込みタイミングについて説明します。

Webフォントの読み込みタイミング
01:37

「フォントの読み込み」の、サンプルのHTMLファイルを解説します。

HTMLファイル
04:44

フォントの読み込みを待機する「resouce.font.load」関数を紹介します。

resouce.font.load
05:25
+
サウンドの読み込み
15 Lectures 44:53

本セクションの前置きです。

[章頭] サウンドの読み込み
00:36

サンプルの動作を元にして、ゲームで必要なサウンド処理を確かめていきます。

サンプルの動作とゲームで必要な処理
03:36

「サウンドの読み込み」の、サンプルのHTMLファイルを解説します。

HTMLファイル
04:34

resouce.sound.js に入っている各種値や関数をまずは確認します。

resouce.sound.js の中身
05:56

サウンド機能を初期化する「resouce.sound.init」関数を紹介します。

resouce.sound.init
03:52

サウンドを読み込む「resouce.sound.load」関数を紹介します。SEの場合は、同時発音数に合わせて複数読み込みます。

resouce.sound.load
07:03

サウンドが無効かを確認する「resouce.sound.chckUnbl」関数を紹介します。

resouce.sound.chckUnbl
01:41

サウンドの再生位置を0に戻す「resouce.sound.rstCurTm」関数を紹介します。

resouce.sound.rstCurTm
01:30

サウンドを再生する「resouce.sound.play」関数を紹介します。

resouce.sound.play
04:36

サウンドをループ再生する「resouce.sound.playLoop」関数を紹介します。

resouce.sound.playLoop
02:13

サウンドを一時停止する「resouce.sound.pause」関数を紹介します。

resouce.sound.pause
00:59

サウンドを停止する「resouce.sound.stop」関数を紹介します。

resouce.sound.stop
01:38

サウンドのボリュームを変更する「resouce.sound.vol」関数を紹介します。

resouce.sound.vol
01:29

SEを再生する「resouce.sound.playSE」関数を紹介します。

resouce.sound.playSE
02:43

BGMを再生したり、切り替えたりする「resouce.sound.playBGM」関数を紹介します。

resouce.sound.playBGM
02:27
+
アニメーションの管理
7 Lectures 21:11

本セクションの前置きです。

[章頭] アニメーションの管理
00:17

サンプルを見ながら、アニメーションの仕組みを紹介します。

アニメーションの仕組み
02:06

「アニメーションの管理」の、サンプルのHTMLファイルを解説します。

HTMLファイル
06:48

アニメーション用の繰り返し処理を行う「game.anim.rqstAnmFrm」関数と、停止する「game.anim.cnclAnmFrm」関数を紹介します。

game.anim.rqstAnmFrm, cnclAnmFrm
02:49

アニメーションの開始と停止を行う「game.anim.strt」「game.anim.stp」関数を紹介します。また、各種変数についても紹介します。

game.anim.strt, stp
03:46

アニメーションの更新を行う「game.anim.updt」関数を紹介します。

game.anim.updt
03:42

アニメーションの追加と削除を行う「game.anim.add」「game.anim.rmv」関数を紹介します。

game.anim.add, rmv
01:43
+
UIの管理
8 Lectures 24:41

本セクションの前置きです。

[章頭] UIの管理
00:14

サンプルを見ながら、UIの動きを確認します。

サンプルの動作
01:55

「UIの管理」の、サンプルのHTMLファイルを解説します。

HTMLファイル
04:32

UIの初期化を行う「game.ui.init」関数と、各種変数を紹介します。

game.ui.init
04:00

ボタンの追加を行う「game.ui.addBtn」関数を紹介します。

game.ui.addBtn
03:38

ボタンの追加を行う「game.ui.addBtn」関数を紹介します。その2。

game.ui.addBtn 2
05:04

ボタンの追加を行う「game.ui.addBtn」関数を紹介します。その3。

game.ui.addBtn 3
03:52

ボタンの削除を行う「game.ui.rmvBtn」関数を紹介します。

game.ui.rmvBtn
01:26
16 More Sections
About the Instructor
柳井 政和
4.3 Average rating
341 Reviews
3,169 Students
6 Courses
ゲーム、アプリケーション開発、書籍の執筆、JavaScript、Java

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

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

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

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