るてんのお部屋るてんのお部屋

HTML5とJavaScriptで作る 落ち物パズルゲーム 全コード

  • ダウンロード商品
    ¥ 1,000

 『テトリス』や『ぷよぷよ』に類似した落ち物パズルゲームの全コードを掲載して解説した本です。HTML5+JavaScriptで、フルスクラッチで開発しています。サンプルとして『Cthulhu Drop』という、落ち物パズルゲームが付属します。  実際に遊べる落ち物パズルゲームを試しながら、その中身を確認できる技術書です。シンプルなコードなので理解しやすいです。  サンプルゲーム『Cthulhu Drop』の紹介もします。横2列、縦1~3列のブロックが落ちてきます。落下物は時計回り、反時計回りに回転できます。  落下後、重力に従ってブロックは落下します。そして、縦横斜めに3ブロック以上連続していると消去できます。また、消えたブロックに隣接する同種のブロックも消滅します。連鎖が終了するまで、消え続けます。  本書を通して、ゲーム開発の勘所をつかんでいただければと思います。 -目次- 前書き 第1章 全体像   1-1 作る「落ち物パズルゲーム」の仕様   1-2 キー操作   1-3 ファイル構造   1-4 大まかな分類   1-5 js-game/nest.js   1-6 シーンのファイルの構造 第2章 HTML、CSS、main.js他   2-1 index.html   2-2 css/main.css   2-3 js-main/main.js 第3章 タイトル シーン   3-1 js-main/scn.titile.js 第4章 ドロップ シーン   4-1 js-main/scn.drop.js 第5章 描画処理   5-1 js-main/draw-core.js   5-2 js-main/draw-dropping.js   5-3 js-main/draw-ef.js   5-4 js-main/screenshot.js 第6章 ゲーム処理   6-1 js-main/drop-core.js   6-2 js-main/drop-input.js   6-3 js-main/drop-utl.js   6-4 js-main/drop-stuff.js   6-5 js-main/drop-erase.js   6-6 js-main/drop-erase-search.js   6-7 js-main/drop-erase-expand.js 第7章 ゲーム基本関数   7-1 js-game/game.core.js   7-2 js-game/game.anim.js   7-3 js-game/game.canvas.js   7-4 js-game/game.view.js   7-5 js-game/game.ui.js 第8章 リソース管理関数   8-1 js-game/resouce.image.js   8-2 js-game/resouce.font.js   8-3 js-game/resouce.sound.js 後書き

HTML5とJavaScriptで作る 落ち物パズルゲーム 全コード
HTML5とJavaScriptで作る 落ち物パズルゲーム 全コード
HTML5とJavaScriptで作る 落ち物パズルゲーム 全コード
HTML5とJavaScriptで作る 落ち物パズルゲーム 全コード
HTML5とJavaScriptで作る 落ち物パズルゲーム 全コード
 『テトリス』や『ぷよぷよ』に類似した落ち物パズルゲームの全コードを掲載して解説した本です。HTML5+JavaScriptで、フルスクラッチで開発しています。サンプルとして『Cthulhu Drop』という、落ち物パズルゲームが付属します。  実際に遊べる落ち物パズルゲームを試しながら、その中身を確認できる技術書です。シンプルなコードなので理解しやすいです。  サンプルゲーム『Cthulhu Drop』の紹介もします。横2列、縦1~3列のブロックが落ちてきます。落下物は時計回り、反時計回りに回転できます。  落下後、重力に従ってブロックは落下します。そして、縦横斜めに3ブロック以上連続していると消去できます。また、消えたブロックに隣接する同種のブロックも消滅します。連鎖が終了するまで、消え続けます。  本書を通して、ゲーム開発の勘所をつかんでいただければと思います。 -目次- 前書き 第1章 全体像   1-1 作る「落ち物パズルゲーム」の仕様   1-2 キー操作   1-3 ファイル構造   1-4 大まかな分類   1-5 js-game/nest.js   1-6 シーンのファイルの構造 第2章 HTML、CSS、main.js他   2-1 index.html   2-2 css/main.css   2-3 js-main/main.js 第3章 タイトル シーン   3-1 js-main/scn.titile.js 第4章 ドロップ シーン   4-1 js-main/scn.drop.js 第5章 描画処理   5-1 js-main/draw-core.js   5-2 js-main/draw-dropping.js   5-3 js-main/draw-ef.js   5-4 js-main/screenshot.js 第6章 ゲーム処理   6-1 js-main/drop-core.js   6-2 js-main/drop-input.js   6-3 js-main/drop-utl.js   6-4 js-main/drop-stuff.js   6-5 js-main/drop-erase.js   6-6 js-main/drop-erase-search.js   6-7 js-main/drop-erase-expand.js 第7章 ゲーム基本関数   7-1 js-game/game.core.js   7-2 js-game/game.anim.js   7-3 js-game/game.canvas.js   7-4 js-game/game.view.js   7-5 js-game/game.ui.js 第8章 リソース管理関数   8-1 js-game/resouce.image.js   8-2 js-game/resouce.font.js   8-3 js-game/resouce.sound.js 後書き