はじめに
前回のJqueryライブラリを利用した懐かしいゲームサンプルの備忘録を投稿します。
日本ではタカラトミー（昔はタカラ）が販売していたレーダー作戦ゲームを彷彿させます。
海戦ゲームがボードゲームの正式名称です。
ブラウザでゲームアプリ開発のファーストステップサンプルをお楽しみください。
前提
- Visual Studio Codeがインストール済み
- Node.js/npmがインストール済み
- gitからSampleをダウンロードして任意のディレクトリに解凍済み
- View In Browserがインストール済み(Market Placeより)
- OSはWindows7/10を想定
サンプル warship
古典的なグリッドベースの軍艦戦闘ゲーム
ディレクトリ構成
./
└───img/
ファイル構成
| パス | ファイル名 | 説明 |
|---|---|---|
| . | default.html | warship画面のhtml |
| . | jquery.d.ts | Jqueryライブラリ型定義ファイル |
| . | jqueryui.d.ts | Jqueryドラッグ&ドロップ型定義ファイル |
| . | README.md | このサンプルの説明と使用方法 |
| . | styles.css | スタイルシート |
| . | tsconfig.json | TypeScriptのコンパイルコンフィグファイル |
| . | warship.js | warship.tsのコンパイルにて作成されたJavaScriptファイル |
| . | warship.js.map | warship.tsのコンパイルにて作成されたmapファイル |
| . | warship.ts | warshipのTypeScriptファイル |
| img | bg.jpg | ブルーボックスイメージファイル |
| img | bg2.jpg | イエローボックスイメージファイル |
クラス図
実行
cd ./warship
tsc --sourcemap --target ES5 warship.ts
default.htmlをエディターで表示Ctrl+F1
結果
【遊び方】
左ボードが敵陣、右ボードが自陣
敵艦並びに自艦の配置はランダムに配置されます。
左ボードのマスをクリックしてひっくり返します。
1ターンずつ攻撃を交互に行います。
敵陣クリックで開始します。
敵艦船に命中すると赤、海面であれば緑に反転します。
艦船でマスの長さが決まっています。
空母:5マス × 1 隻
戦艦:4マス × 1 隻
巡洋艦:3マス × 1 隻
潜水艦:3マス × 1 隻
駆逐艦:2マス × 1 隻
敵艦船または自艦船すべてに命中でゲーム終了です。
ポイント
ゲームを構成するリソースをクラス化することで無駄のない教科書通りのコーディングです。
ボードクラスはセルクラスと船クラスから成り立ち、このボードクラスからゲームクラスが構成されます。そしてゲームクラスのインスタンスを作成しています。
もちろんボードクラスのマウスイベントはJqueryライブラリを使用しています。
TypeScriptのクラス機能がゲーム開発でいかんなく発揮出ることを証明しています。
ノート
勝ち方のコツ、残りの艦船のマス数を意識し、連続してマスを開けるより飛び飛びで開けるほうが戦功できます。実ボードゲームで培った経験則ですが。
まとめ
成功体験は人間のやる気を高めます。TypeScriptを勉強する初学者は、最初に「はじめてのTypeScipt」みたいな文法の参考書から学習するのが世間の常識みたいです。ほぼ退屈な無味乾燥な言葉の羅列でまったく頭に記憶されないのが常ではないでしょうか？別の視点から入ったていいはず。まったく別の方法、結果から学ぶ方法。このwarshipをとことん調べるだけでTypeScriptは制覇できる予感。文法など必要な時覚えればいいのさぐらいでどうでしょう。
以上、おそまつ