Name: JavaScriptで作るリバーシゲーム
Rating: 3.6 (168 reviews)

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: