クロクロ・ショップ

JavaScriptでリバーシゲームをつくろう

 ライブラリを使わずに、全てのコードを書いて、リバーシゲームを作り上げるところまでを徹底解説した本。400ページ以上の大ボリューム。

 サンプルとして実際に遊べるリバーシゲームが付属。プログラミング言語はJavaScriptですが、作り方は他の言語にも応用できます。

詳細情報

 ライブラリを使わずに、全てのコードを書いて、リバーシゲームを作り上げるところまでを徹底解説した本です。コードの全ての行を解説しています。400ページ以上かけて、徹底的に解説します。

 サンプルとして実際に遊べるリバーシゲームが付属します。プログラミング言語はJavaScriptですが、低レベルな命令から作り、ゲームを完成させるまでの作業は、他のプログラミング言語にも応用できます。

 ゲームのプログラムには、簡単なアニメーションによるエフェクトが入っており、簡易な思考アルゴリズムも実装しています。

 本書を通して、ゲーム開発の勘所をつかんでいただければと思います。以下から、サンプルのゲームも試せます。

サンプルで遊ぶ

 「表紙」と「帯付き表紙」。

 著者は、様々な変形盤面で遊べる『EX リバーシ』も開発しています。

目次

序章 はじめに
前書き / 目次
第1章 イントロダクション
イントロダクション / 作成するリバーシゲーム / ソースコードとサンプルについて / ブラウザについて / 文字コードについて / テキストエディタについて / JavaScriptの基本文法について / JavaScriptチートシート / 本章の参考資料
第2章 リバーシゲームの構造
ファイルの種類 / HTML / CSS / 画像 / サウンド / Webフォント / JavaScript / 本章の参考資料 - ファイルの概要
第3章 ◆◆ 基本処理を作る ◆ ◆
基本処理の概要 / Canvasの資料 / 本章の参考資料
第4章 キャンバスの初期化
HTMLファイル / 各JSファイルの初期化 / JSファイル_game.core.js / game.core.getWinW, getWinH / game.core.getFitSz / JSファイル_game.canvas.js / game.canvas.genCnvs / game.canvas.initCnvs
第5章 game.coreその他
game.core.ua.pc / game.core.inRng / game.core.rtRGB
第6章 画像の読み込みと管理
リソースの読み込みを待つ / HTMLファイル / Promise 1 / Promise 2 / Promise 3 / HTMLファイル / JSファイル_resouce.image.js / resouce.image.load, imgs
第7章 フォントの読み込み
Webフォントの読み込みタイミング / HTMLファイル / JSファイル_resouce.font.js / resouce.font.load
第8章 サウンドの読み込み
サンプルの動作とゲームで必要な処理 / HTMLファイル / JSファイル_resouce.sound.js / resouce.sound.js の中身 / resouce.sound.init / resouce.sound.load / resouce.sound.chckUnbl / resouce.sound.rstCurTm / resouce.sound.play / resouce.sound.playLoop / resouce.sound.pause, restart / resouce.sound.stop / resouce.sound.vol / resouce.sound.playSE / resouce.sound.playBGM
第9章 アニメーションの管理
アニメーションの仕組み / HTMLファイル / JSファイル_game.anim.js / game.anim.rqstAnmFrm, cnclAnmFrm / game.anim.strt, stp / game.anim.updt / game.anim.add, rmv
第10章 UIの管理
サンプルの動作 / HTMLファイル / JSファイル_game.ui.js / game.ui.init / game.ui.addBtn / game.ui.addBtn 2 / game.ui.addBtn 3 / game.ui.rmvBtn
第11章 画像の縮小
サンプルの動作 / HTMLファイル / JSファイル_game.canvas.js / game.canvas.getScaledImg
第12章 ◆◆ リバーシの描画を作る ◆◆
リバーシの描画の概要 / リバーシの描画の概要2 / リバーシの描画の概要3 / 本章の参考資料
第13章 背景の描画
サンプルの動作 / HTMLファイル / JSファイル_reversi.canvas.js / reversi.canvas.jsの変数 / reversi.canvas.initCnvs / reversi.canvas.drwBg
第14章 盤面の描画
サンプルの動作 / HTMLファイル / JSファイル_reversi.canvas.js / JSファイル_reversi.reversi.js / reversi.canvas.drwSqAll / reversi.reversi.scnBrd / reversi.canvas.xyToReal / reversi.canvas.drwSq / reversi.canvas.drwSq 2
第15章 石の描画
サンプルの動作 / HTMLファイル / JSファイル_reversi.canvas.js / reversi.canvas.rszTkn / reversi.canvas.drwTkn / reversi.canvas.drwTknAll
第16章 スコアの描画
サンプルの動作 / HTMLファイル / JSファイル_reversi.canvas.js / reversi.canvas.drwPScrAll / reversi.canvas.drwPScr
第17章 手番プレイヤーの描画
サンプルの動作 / HTMLファイル / JSファイル_reversi.canvas.js / reversi.canvas.drwPlyr / reversi.canvas.drwPlyr 2
第18章 描画キャッシュの作成
サンプルの動作 / HTMLファイル / JSファイル_reversi.canvas.js / reversi.canvas.genCsh / reversi.canvas.drwCsh
第19章 エフェクト
サンプルの動作 / HTMLファイル / JSファイル_reversi.effect.js / reversi.effect.js / reversi.effect.msg / reversi.effect.msg 2
第20章 盤面クリック
サンプルの動作 / HTMLファイル
第21章 ◆◆ ゲームを作る ◆◆
ゲームの処理の概要 / ゲームの処理の概要2 / ゲームの処理の概要3 / 本章の参考資料
第22章 ゲームの初期化
HTMLファイル / JSファイル_reversi.core.js / JSファイル_reversi.canvas.js / reversi.core.jsの変数 / reversi.core.init / reversi.core.initClck / reversi.core.strt / reversi.core.btnStrt / reversi.core.updtCnvs / reversi.canvas.drwEnblSqsAll, drwEnblSqs
第23章 リバーシゲームのシステム
JSファイル_reversi.reversi.js / reversi.reversi.jsの変数 / reversi.reversi.init / 各種共通処理 / reversi.reversi.scnLn / reversi.reversi.getEnblSqs / reversi.reversi.putTkn / reversi.reversi.execRvrs / nxt
第24章 ゲームの進行
JSファイル_reversi.core.js / JSファイル_reversi.effect.js / reversi.core.clckBrd / reversi.core.doRev / reversi.core.playSERev / reversi.core.updt / reversi.core.updt 2 / reversi.core.updt 3 / reversi.effect.putTkn / reversi.effect.chngBrd / reversi.effect.chngBrd 2
第25章 COMの思考
アルゴリズムの概要 / JSファイル_reversi.com.js / reversi.com.js / comIn / comIn 2 / comIn 3 / comIn 4
第26章 終わりに
ゲーム作成について
奥付

プレビュー

 本のページのサンプルです。

QR コード

情報

著作権者 : 柳井 政和

Web Site : http://crocro.com/

This Page : https://crocro.com/shop/item/all_code_js_reversi.html

埋め込み :

Twitter : ruten