Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Created by柳井政和

Last updated 7/2024

Japanese

What you'll learn

ブラウザで動くリバーシゲームを、JavaScriptで1から組み立てられるようになる。
そのために必要な処理や、プログラムの積み上げが、できるようになる。

Course content

26 sections • 171 lectures • 7h 28m total length

イントロダクション1:34
本コースの説明をおこない、おおまかなロードマップを示します。
URLの変更0:22
作成するリバーシゲーム2:58
本コースで作成するリバーシゲームを紹介します。画像表示、サウンド、ゲームの進行などの各種処理が統合されて、1つのゲームができています。
ソースコードについて0:37
本コースで出てくるソースコードは、本レクチャーの「ダウンロード可能なリソース」からダウンロードできます。
ブラウザについて3:16
本コースではGoogle Chromeを利用します。導入の仕方や、開発者ツールの使い方を紹介しておきます。
文字コードについて2:06
UTF-8で開発を行っていきます。
テキストエディタについて1:38
何を使っても構いません。ここでは、複数のOSに対応している無料のテキストエディタであるAtomを使います。
JavaScriptの基本文法について1:18
本コースは、ある程度JavaScriptの基本文法を知っている方向けのコースです。そのため、JavaScriptの基本文法を、手軽に学ぶ方法を紹介します。
本セクションの参考資料0:55
本セクションの参考資料をテキストでまとめたページです。必要に応じて、参照してください。
Q&A0:13
Q&Aを掲載していくページです。必要に応じて、参照してください。

[章頭] リバーシゲームの構造0:24
本セクションの前置きです。
ファイルの種類2:56
HTML、CSS、JavaScript、画像、サウンド、Webフォントの各種ファイルを、本コースでは利用します。
HTML4:18
HTMLファイルを紹介します。
CSS2:11
CSSファイルを紹介します。
画像1:06
画像ファイルを紹介します。
サウンド3:39
サウンドファイルを紹介します。
Webフォント3:17
Webフォントを紹介します。
JavaScript3:53
JavaScriptファイルの種類と役割を紹介します。
本セクションの参考資料1:19
本セクションの参考資料をテキストでまとめたページです。必要に応じて、参照してください。

[章頭] ◆基本処理を作る◆0:19
本セクションの前置きです。
基本処理の概要3:45
基本処理として用意する、処理の概要について話します。
jQueryの資料1:59
jQuery について、参考になる資料を示します。
Canvasの資料3:21
HTML5 の Canvas について、参考になる資料を示します。
本セクションの参考資料3:08
本セクションの参考資料をテキストでまとめたページです。必要に応じて、参照してください。

[章頭] キャンバスの初期化0:10
本セクションの前置きです。
HTMLファイル3:29
「キャンバスの初期化」のサンプルのHTMLファイルを解説します。
各JSファイルの初期化3:46
各JavaScriptファイルの初期化部分を紹介します。
game.core.getWinW, getWinH1:52
ウィンドウの横幅と高さを取得する「game.core.getWinW」「game.core.getWinH」関数を紹介します。
game.core.getFitSz3:24
縦横比を指定して、ウィンドウにぴったり収まるサイズを取得する「game.core.getFitSz」関数を紹介します。
game.canvas.genCnvs4:41
縦横のサイズと倍率を指定して、キャンバスを生成する「game.canvas.genCnvs」関数を紹介します。
game.canvas.initCnvs3:43
格納先のDOMのidと、縦横のサイズと倍率を指定して、キャンバスを初期化する「game.canvas.initCnvs」関数を紹介します。

[章頭] game.core その他0:14
本セクションの前置きです。
game.core.ua.pc2:45
実行されているブラウザが、PCのブラウザかどうかの真偽値「game.core.ua.pc」を紹介します。
game.core.inRng3:31
あるXY座標が、指定した四角形の範囲か判定する「game.core.inRng」関数を紹介します。
game.core.rtRGB3:21
2つのRGB値を、指定比率で合成した色のRGB値を取得する「game.core.rtRGB」関数を紹介します。

[章頭] 画像の読み込みと管理0:18
本セクションの前置きです。
リソースの読み込みを待つ2:29
リソースの読み込みを待つ処理が、なぜ必要なのかを説明します。
jQuery.Deferred3:53
非同期処理をすっきりと書く、jQuery.Deferredについて簡単に説明します。
jQuery.Deferred 24:52
非同期処理をすっきりと書く、jQuery.Deferredについて簡単に説明します。その2。
jQuery.Deferred 34:09
非同期処理をすっきりと書く、jQuery.Deferredについて簡単に説明します。その3。
HTMLファイル2:56
「画像の読み込みと管理」の、サンプルのHTMLファイルを解説します。
resouce.image.load, imgs3:56
画像の読み込みと管理を行う「resouce.image.load」関数、「resouce.image.imgs」を紹介します。

[章頭] フォントの読み込み0:17
本セクションの前置きです。
Webフォントの読み込みタイミング1:37
キャンバスの描画でWebフォントを使う際に注意しなければならない、Webフォントの読み込みタイミングについて説明します。
HTMLファイル4:44
「フォントの読み込み」の、サンプルのHTMLファイルを解説します。
resouce.font.load5:25
フォントの読み込みを待機する「resouce.font.load」関数を紹介します。

[章頭] サウンドの読み込み0:36
本セクションの前置きです。
サンプルの動作とゲームで必要な処理3:36
サンプルの動作を元にして、ゲームで必要なサウンド処理を確かめていきます。
HTMLファイル4:34
「サウンドの読み込み」の、サンプルのHTMLファイルを解説します。
resouce.sound.js の中身5:56
resouce.sound.js に入っている各種値や関数をまずは確認します。
resouce.sound.init3:52
サウンド機能を初期化する「resouce.sound.init」関数を紹介します。
resouce.sound.load7:03
サウンドを読み込む「resouce.sound.load」関数を紹介します。SEの場合は、同時発音数に合わせて複数読み込みます。
resouce.sound.chckUnbl1:41
サウンドが無効かを確認する「resouce.sound.chckUnbl」関数を紹介します。
resouce.sound.rstCurTm1:30
サウンドの再生位置を0に戻す「resouce.sound.rstCurTm」関数を紹介します。
resouce.sound.play4:36
サウンドを再生する「resouce.sound.play」関数を紹介します。
resouce.sound.playLoop2:13
サウンドをループ再生する「resouce.sound.playLoop」関数を紹介します。
resouce.sound.pause0:59
サウンドを一時停止する「resouce.sound.pause」関数を紹介します。
resouce.sound.stop1:38
サウンドを停止する「resouce.sound.stop」関数を紹介します。
resouce.sound.vol1:29
サウンドのボリュームを変更する「resouce.sound.vol」関数を紹介します。
resouce.sound.playSE2:43
SEを再生する「resouce.sound.playSE」関数を紹介します。
resouce.sound.playBGM2:27
BGMを再生したり、切り替えたりする「resouce.sound.playBGM」関数を紹介します。

[章頭] アニメーションの管理0:17
本セクションの前置きです。
アニメーションの仕組み2:06
サンプルを見ながら、アニメーションの仕組みを紹介します。
HTMLファイル6:48
「アニメーションの管理」の、サンプルのHTMLファイルを解説します。
game.anim.rqstAnmFrm, cnclAnmFrm2:49
アニメーション用の繰り返し処理を行う「game.anim.rqstAnmFrm」関数と、停止する「game.anim.cnclAnmFrm」関数を紹介します。
game.anim.strt, stp3:46
アニメーションの開始と停止を行う「game.anim.strt」「game.anim.stp」関数を紹介します。また、各種変数についても紹介します。
game.anim.updt3:42
アニメーションの更新を行う「game.anim.updt」関数を紹介します。
game.anim.add, rmv1:43
アニメーションの追加と削除を行う「game.anim.add」「game.anim.rmv」関数を紹介します。

[章頭] UIの管理0:14
本セクションの前置きです。
サンプルの動作1:55
サンプルを見ながら、UIの動きを確認します。
HTMLファイル4:32
「UIの管理」の、サンプルのHTMLファイルを解説します。
game.ui.init4:00
UIの初期化を行う「game.ui.init」関数と、各種変数を紹介します。
game.ui.addBtn3:38
ボタンの追加を行う「game.ui.addBtn」関数を紹介します。
game.ui.addBtn 25:04
ボタンの追加を行う「game.ui.addBtn」関数を紹介します。その2。
game.ui.addBtn 33:52
ボタンの追加を行う「game.ui.addBtn」関数を紹介します。その3。
game.ui.rmvBtn1:26
ボタンの削除を行う「game.ui.rmvBtn」関数を紹介します。

Requirements

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

Description

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

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

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

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

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

‥‥‥‥‥‥‥‥‥‥

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

● イントロダクション

・開発環境の準備

● 基本処理を作る

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

● リバーシの描画を作る

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

● ゲームを作る

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

‥‥‥‥‥‥‥‥‥‥

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

Who this course is for:

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

What you'll learn

Explore related topics

Course content

イントロダクション10 lectures • 15min

リバーシゲームの構造9 lectures • 23min

◆基本処理を作る◆5 lectures • 13min

キャンバスの初期化7 lectures • 21min

game.core その他4 lectures • 10min

画像の読み込みと管理7 lectures • 23min

フォントの読み込み4 lectures • 12min

サウンドの読み込み15 lectures • 45min

アニメーションの管理7 lectures • 21min

UIの管理8 lectures • 25min

Requirements

Description

Who this course is for: