なにこれ
先日社内で、開発合宿なるものが開催されました。
https://fusic.co.jp/doings/351
上記開発合宿で何をテーマにしようかなーと思って
最終的にReact.jsで麻雀を作ろうと思い立ったので作りました
※実際には開発合宿だけでは全部は開発が終わらなかったので
その後ボチボチ少しずつ作業してある程度満足いくところまでできたので記事にしてます。
作ったもの
github
https://github.com/satthi/react_majong/
サンプルサイト
http://react-mahjong.s3-website-ap-northeast-1.amazonaws.com/sample/hanchan_game
※上記サイトはそのうち消すかもです
やったこと
・牌を表示
・それぞれターンを回す
・メンツ判定/シャンテン数の計算
・役・点数計算
・ツモ・ロン・ポン・チー・カンの実装
・簡易的なCPU思考の実装
メンツ判定/シャンテン数の計算
以前麻雀に関するネタはやっていましたが、
この計算方法は実際には正しくないことは気づいていたので
今回はゲームにする必要があったためやり方を変えました。
https://qiita.com/satthi/items/575b323578010a89c120
https://qiita.com/satthi/items/c9e2cddc32148887426d
https://qiita.com/satthi/items/cb673491540b9affc8eb
代替肝はこの辺
https://github.com/satthi/react_majong/blob/main/front/src/components/game/shanten_base.tsx#L826
色々やってますが、基本的に総当たりで試してるって感じです。
雀頭があるかどうかは大事なところ（でかつシャンテン数をややこしくしている要因)なので
雀頭があるパターンとないパターンという見方で総当たりしている感じです。
※これだけで、シャンテン当てゲームとかメンチン待ち当てゲームとか点数計算のサイトとか作れそうではあるｗ
それぞれターンを回す/ツモ・ロン・ポン・チー・カンの実装
特定のuseEffectの変数を利用して
・現在誰のターンなのか
・現在思考中なのか
・上がりなのか
などを判定するようにしています。
この辺はReactの癖が強いところで毎度苦労するところですが
今回も2重に動作してしまったり、うまくターンが回らなかったりなど難しいポイントでした。
簡易的なCPU思考の実装
これがないとゲームにならないので、
あまり凝り過ぎない程度にやりました。
一番凝ったCPU思考で
・切る牌はシャンテン数が少なくなる牌が基本
・待ちは両面・カンチャン・ペンチャン・シャンポン・単騎の順で優先
・鳴きは役牌からのみ
・面前のテンパイは即リーチ
くらいなレベル感で対応しています
この辺
https://github.com/satthi/react_majong/tree/main/front/src/components/game/cpu_type/type3
やってないこと
・槍槓の実装
通常の流れと結構大きく違うのでひとまず置いてます
・役を意識したCPU思考
これはそのうち少しずつやりたい気持ちはある
まとめ
楽しかった
やっぱ役に立たないものを作るっていいね！