実際に遊べるタワーディフェンスを、TypeScriptで作っていく本です。 遊べるゲームと、全コードが付いてきます。 内部処理のコードが中心です。 標準ライブラリだけで作っており、外部のライブラリは利用していません。 シンプルなゲーム用の処理を自作するところから組み立てていきます。 サンプルは↓から遊べます。 https://crocro.com/shop/item/ts_tower_defense.html
章目次
● 第1章 説明と全体像 ● 第2章 開発の準備 ● 第3章 HTML・CSS・フォント・画像 ● 第4章 main.tsとゲームデータ ● 第5章 ゲーム用ライブラリを作る1 ● 第6章 ゲーム用ライブラリを作る2 ● 第7章 タイトル画面 ● 第8章 ディフェンス画面 ● 第9章 コア部分 ● 第10章 描画処理 ● 第11章 ゲーム処理 ● 第12章 終了処理
詳細目次
● 第1章 説明と全体像 ・今回作るゲームの説明 ・ゲームのストーリー ・プロジェクトの全体像 ● 第2章 開発の準備 ・TypeScriptについて ・Node.jsの導入 ・TypeScriptの導入 ・プロジェクトの構成 ・設定ファイルの作成 ・ビルドの方法 ・実行の方法 ● 第3章 HTML・CSS・フォント・画像 ・開始HTMLファイル index.html ・CSSをまとめて読み込む main.css ・アプリケーションのCSS app.css ・ダイアログ用CSS dialog.css ・フォントについて ・画像について ● 第4章 main.tsとゲームデータ ・プログラムのエントリーポイント main.ts ・ゲームデータとユーザーデータ ・ゲームの固定データ data-gd.ts ・レイアウトのデータ data-gd-layout.ts ・変動するユーザーデータ data-ud.ts ● 第5章 ゲーム用ライブラリを作る1 ・キャンバスの生成 game-canvas.ts ・アニメーションと時間の管理 game-anim.ts ・入力イベントの管理 game-user-event.ts ・画面サイズ自動フィット game-view-resize.ts ● 第6章 ゲーム用ライブラリを作る2 ・イメージ管理と描画 resouce-image.ts ・フォント読み込み管理 resouce-font.ts ・ユーティリティ utl.ts ・乱数 xors.ts ・ボタン game-ui-btn.ts ・スクリーンショット game-screenshot.ts ● 第7章 タイトル画面 ・タイトル画面 scn-title.ts ● 第8章 ディフェンス画面 ・ディフェンス画面 scn-defense.ts ・ボタン群の初期化 scn-defense-init-btn.ts ・ディフェンス画面の補助 scn-defense-sub.ts ● 第9章 コア部分 ・ゲーム コア部分 defense-core.ts ・コスト地図生成 defense-cost-map.ts ・ルート生成 defense-route.ts ・盤面選択 defense-sel-board.ts ● 第10章 描画処理 ・盤面描画 draw-brd-bg.ts ・情報描画 draw-info.ts ・塔描画 draw-tower.ts ・敵描画 draw-enemy.ts ・弾描画 draw-bullet.ts ● 第11章 ゲーム処理 ・敵の生成 enemy.ts ・敵の移動 enemy-move.ts ・塔の処理 tower.ts ・塔の攻撃 tower-attack.ts ・弾の処理 bullet.ts ● 第12章 終了処理 ・終了エフェクト draw-ef.ts ・ダイアログ生成 game-dialog.ts ・ゲーム終了処理 defense-end.ts ・終了時スクリーンショット defense-end-ss.ts