オーラス麻雀ゲーム開発日記構想から現在までの開発記録を、公開順にまとめています。

開発日記一覧
オーラスの条件戦だけを繰り返し遊べる麻雀ゲームの開発記録です。TypeScript・Reactを使い、点数管理や順位計算から少しずつ制作しています。
前回までの進捗
前回は、4人へ13枚ずつ配牌し、親の第一ツモまで進められるようにした。
今回は、内部で作った手牌を実際に画面へ表示していく。
牌コードを人間向けの表示に変える
麻雀ライブラリでは、牌が次のようなコードで扱われている。
m1
p5
s9
z1
プログラム上では扱いやすいが、このまま表示してもかなり分かりづらい。
そこで、
m1 → 一萬
p5 → 五筒
s9 → 九索
z1 → 東
のように、日本語の牌名へ変換する処理を追加した。
赤牌についても、「赤五萬」「赤五筒」「赤五索」と表示するようにしている。
手牌を麻雀らしい順番に並べる
配牌された順番のままだと手牌がばらばらなので、表示前に並び替える。
いったん強制的に理牌する。設定でONOFF切り替えられるようにするかもしれない。
基本的には、
萬子
↓
筒子
↓
索子
↓
字牌
の順。
同じ種類の中では数字順に並べ、赤5も通常の5付近に入るようにした。
これだけでも手牌がかなり見やすくなる。
自分の手牌を画面に表示する
新しく麻雀卓用の表示部分を作り、自分の手牌を牌らしい形で横に並べるようにした。
画面には手牌だけでなく、
- 自分の席
- 親の席
- 残りツモ可能枚数
- ドラ表示牌
も表示する。
親だった場合は第一ツモを手牌の右端から少し離して表示し、「ツモった牌」が分かるようにした。
配牌をやり直せるようにする
確認しやすいように「配牌をやり直す」ボタンも追加した。
押すたびに新しい牌山から配牌し直すので、いろいろな手牌が表示される。
まだ牌を切ることはできないが、ここまで来ると画面上でもかなり麻雀らしく見えるようになってきた。
今回できたこと
今回の進捗は以下のとおり。
- 牌コードを日本語の牌名へ変換した
- 手牌を種類・数字順に並べるようにした
- 赤牌にも対応した
- 自分の手牌を画面へ表示した
- ドラ表示牌と残り牌数を表示した
- 配牌をやり直せるようにした
これまで内部でしか見えなかった配牌を、実際に画面で確認できるようになった。
牌が見えるようになっただけだが、かなり麻雀感が出てきた気がする。
次回は、表示した手牌から牌を選んで捨てられるようにし、河へ牌を並べる処理を追加する。

仕事も落ち着いたので、開発、投稿ペースは戻せそうか。
牛一。
コメント