開発日記① オーラスだけの麻雀ゲームを作り始める

以前記事で書いたとおり、今回作ろうとしているのは、麻雀のオーラス条件戦を中心にしたゲーム。
普通の麻雀ゲームのように、東一局から半荘を通して遊ぶものではなく、最終局であるオーラスだけを切り取る。
たとえば、

• 何点のアガリなら逆転できるのか
• ツモとロンで条件がどう変わるのか
• 誰からアガれば目標順位に届くのか
• アガらずに相手を止めるべき場面なのか

といった、点数状況による判断を楽しめるものにしたい。
とはいえ、いきなり麻雀ゲームを丸ごと作ろうとすると、また途中で力尽きる気がする。
牌山の生成、配牌、ツモ、打牌、鳴き、役判定、点数計算、対戦相手のAI。
必要なものを並べるだけでも、かなり多い。
そのため、まずはオーラス条件戦の土台になる部分から作っていくことにした。

最初に作るもの

最初の段階で必要になりそうなのは、次のような処理。

• 4人分の点数を管理する
• 東家・南家・西家・北家を管理する
• 現在の順位を計算する
• アガリや流局後の点数を反映する
• 点数変動後の順位を計算し直す
• 目標順位を達成できたか判定する

まだ牌を並べたり、実際に麻雀を打ったりするところまでは考えない。
まずは点数を入力して、何か操作をすると点数と順位が変わる。
そこまで動けば、ゲームの一番下にある土台としては十分だと思う。

最初の目標

第一段階の目標は、4人分の点数と順位を画面に表示すること。
そこからボタン操作などで点数を変動させ、順位が正しく入れ替わるところまで作りたい。
この時点では、麻雀牌も対戦相手も出てこない。
ゲームらしさはほとんどないと思う。
ただ、過去には完成形ばかりを考えて、最初から作るものを大きくしすぎていた。
今回は小さい単位で動かしながら、少しずつ必要な機能を足していく。
まずは、点数と順位を正しく管理できるところから始める。

開発環境

これも以前の記事に書いたが、
開発には、現時点で次のものを使っている。

• TypeScript
• React
• Vite
• VS Code
• Git・GitHub

まずはブラウザ上で動く形で試作する。
見た目を整えることよりも、点数管理や順位計算などの処理を正しく動かすことを優先したい。TypeScriptを使うのは、点数や座席などのデータを、できるだけ分かりやすい形で管理したいから。Reactについてはまだ理解しきれていない部分も多いけれど、画面の表示と状態の変化を扱うために使っていく。

Reactの恩恵

着手したばかりながら、すでにReactの恩恵を感じている。
すっきり書けるというか、まとまっていて見やすいという印象。
あとgetElementByIdまみれにならない。
しっかり理解しているわけではないため、正確性には欠ける表現になるが、

• javascriptだけの場合.html

<head>
～～～おまじない～～～
<script>
～～～めっちゃロジック～～～ (修正頻度高)
</script>
</head>
<body>
～～～めっちゃHTML～～～ (修正頻度高)
</body>

という感じ。
良くも悪くもロジック部とHTML部がはっきり分かれてる。
行ったり来たりするだけで日が暮れる。
あとgetElementByIdまみれ。

• React使った.tsx

importとかtypeとか(一度書いたら修正頻度低)

function({ … }) {
 return(
  HTML+ロジック　(修正頻度高だけどここにまとまってて見やすい!)
 )
}

()とか{}が入り乱れてとんでもないという第一印象だったが、
HTMLとロジックが近くにまとまっていて見やすい。
(正確にはHTMLじゃなくてJSXだとかあるらしいが、正確なことは追々学んでいく。
今はイメージでつかむ)

設計書はまだなくて、
作りながらイメージを膨らませている・できることを確認している現段階において、
可読性の高さは非常に重要である。
ChatGPTより人間のメモリが足りなくてソースコードが追えなくなりかねないし、
日を跨いで再着手するときのしきい値をぐっと下げてくれる。

進捗

最後に、本当にシンプルながら、各家の点数入力部分と点数合計が出るようにしてみたという進捗報告。
将来的には、対局開始前のインプットその1になるはずだ。
(改めてみると、「現在点数」の文字が薄い…)

〆

いよいよ開発に着手し始められたし、こうやって日記も書けた。
平日は仕事から帰ってちょっとゲームしたら時間が無くなるけれど、
休日に少しずつ進めていけそうだ。
スタートを切れたことがまず一歩。牛歩も一歩。