普段はお客さま向けの業務アプリやモックを作っていますが、今回はまた完全に趣味です。以前スリーセブンを作ったのが楽しかったので、その勢いで、ずっと気になっていた『HUNTER×HUNTER』の盤上競技「軍儀（グンギ）」に手を出してみました。
キメラアント編でコムギとメルエムが延々と打っている、あの将棋みたいなやつです。「作中でルールほとんど説明されてないけど、これ再現できるのかな。。」と気になって、調べながら勢いでブラウザゲームにしてみました。
『師（スイ）を孤立！？』とか『これで「離れ隠し」とでも名付けておくか』とかの名言を言えるようになりますね！
軍儀ってどんなゲーム？
ざっくり言うと「将棋 ＋ α」です。
- 盤は将棋と同じ 9×9。相手の「師（スイ）」を取れば勝ち
- 駒は 14種類25枚。取った駒は将棋と違って再利用できず、ゲームから除外される
- 最大の特徴が「ツケ」。駒の上に駒を3段まで積み重ねられる
- 段が上がると駒の利き（動ける範囲）が伸びる。2段で+1マス、3段で+2マス
- 手駒は「新（あらた）」で盤上に打てる（将棋の“打つ”に近い）
- 初期配置が自由。どこに何を置くかから勝負が始まっている
将棋に「高さ（段）」という3次元の要素が乗っている感じですね。これがとにかく奥深い。
技術スタック
いつもどおり HTML / CSS / JavaScript のみ。ビルドツールなしの素の構成です。
index.html
css/style.css
js/pieces.js … 駒データ（動き・枚数）
js/engine.js … ルールエンジン（配置・移動・ツケ・取る・新・勝敗）
js/ui.js … 描画とクリック操作
ルールのロジック（engine.js）と、見た目・操作（ui.js）を分けておいたのは正解でした。あとで「駒の動きが実は違った」となったとき、pieces.js のデータ表を書き換えるだけで直せるようにしてあります。
いちばん大変だったところ：そもそも「駒の動き」が公開されていない
作り始めてすぐ壁にぶつかりました。軍儀って、各駒がどう動くのか、まとまった公式資料がなかなか無いんです。（ルールが間違ってたらごめんなさい笑）
最初に見つけたルール解説サイトも、肝心の駒の動きだけ「詳しい動かし方は後日」と保留になっていて、「そこが一番知りたいのに！」という状態。。
いろいろ探した結果、公式ルールブックの「駒の利き一覧図」を解説している記事にたどり着きました。ただこれが、色分けされた画像なんですね。
- 水色 = 1段のときの利き
- 青 = 2段まで
- 濃紺 = 3段まで
- 赤 = 無制限（段に関係なく端まで）
- 緑枠＋矢印 = 飛び越えられるマス
これを14駒ぶん、目視で1マスずつ書き写すのはさすがにミスる自信があったので、Python（Pillow）で画像を切り出して、各マスの色をピクセル単位で判定して読み取りました。碁盤の目に沿って中心の色を拾って、水色／青／濃紺／赤に分類する、というやつです。
おかげで「帥は8方向」「馬は縦横2マス」「砦は前・左右・後ろ斜め」みたいな利きが、推測ではなく図の通りに落とし込めました。趣味の落ちゲーのつもりが、途中から画像解析していて、なんだか本業みたいになってました😅
段（ツケ）で利きが伸びる ─ 3次元の将棋
軍儀のキモは、やっぱり「ツケ」です。
同じ駒でも、1段目・2段目・3段目で動ける範囲が変わる。データ側は「基本の利き＋（段数−1）マス」という素直なルールにして、赤（無制限）だけ別扱いにしました。
盤の上では、この“高さ”を見た目でも分かるようにしたくて、駒が積み上がると円柱みたいに段が覗くようにしています。下の画像の「兵」が3段、「侍」が2段。パッと見て高さが分かるのは、地味に大事でした。
ハマったところ：砲・弓・筒の「手前1マス空け」
飛び越えができる特殊駒（砲・弓・筒）の実装が地味にやっかいでした。
一覧図をよく見ると、これらの前方射撃はすぐ目の前のマスには着地できず、1マス空けた先から届くという設定になっていたんです（緑枠＝飛び越えるマス、色付き＝着地できるマス）。最初は普通に「まっすぐ何マスか進める」で作っていたので、手前のマスにも止まれてしまっていました。
そこで各方向に「最短距離（rmin）」という概念を足して、rmin未満のマスは“飛び越えるだけで着地はできない”ようにしました。「自分より高い塔は飛び越えられない」という条件も合わせて、これでようやく図の通りの挙動に。細かいですが、こういう1マスの差でゲームの性格が変わるので、詰めておきたいところでした。
「9手必勝法」を防ぐ、初期配置のルール
調べているとき、「軍儀には先手9手で決まる必勝法がある」という話も出てきました。
ただ、これは公式ルールを正しく読むと成立しないらしいんですね。ポイントは初期配置の終わり方で、「先手が『済（配置完了）』と言っても、後手はそこで止めなくていい」。後手は先手の配置を全部見てから、まだ好きなだけ置ける。後手が『済』と言った瞬間に配置終了、という非対称なルールになっています。
ここは最初、両者が「済」で始まる作りにしていたので、公式どおりに直しました。ルールって、こういう細部にちゃんと意味があるんだなと。
レベルは公式に合わせて4段階
いきなり全部入りだと難しすぎるので、公式のレベル分けもそのまま入れました。
- 入門 … 配置固定・特殊駒なし・2段まで
- 初級 … 配置固定・弓のみ・2段まで
- 中級 … 自由配置・特殊駒あり・2段まで
- 上級 … 自由配置・特殊駒あり・3段まで・帥ツケあり
入門・初級は公式推奨の並びを自動配置するので、駒を並べる手間なくすぐ始められます。中級・上級は「推奨配置で開始」ボタンで、公式おすすめの初期配置からワンクリックで対局スタートもできるようにしました。25枚を毎回手で並べるのは、さすがにしんどいので。。
デザインは実物の駒に寄せて
軍儀の駒は、将棋の五角形ではなく、碁石を厚くしたような丸い円盤なんですよね。せっかくなので、公式グッズの写真を見ながらそこに寄せました。
- 白（先手）… クリーム色の円盤に黒字
- 黒（後手）… 黒い円盤で、中央が白く抜かれてそこに字（相手向きに180°回転）
- 盤 … 淡い木目に細い格子線、碁盤みたいな星（点）も添えて
丸い駒が積み上がって円柱になる、あの見た目が出せたのはけっこう満足しています。
もちろんスマホでも遊べるように、盤は画面幅に合わせて自動で縮み、縦1カラムに整列します。ルールのポップアップも、背景をタップすれば閉じられるようにしてあります。
やってみた感想
完成して自分で打ってみると…普通に難しい。。（自分で作ったのに、というのはスリーセブンと同じ感想）。ってゆーかそもそもルールが覚えられない、、、笑 ちゃんと修行が必要ですね。
平面の将棋でも先が読めないのに、そこに「段（高さ）」が乗ると、読む枝が一気に増えるんですね。目の前の駒の上に載せて利きを伸ばすのか、取るのか、飛び越すのか。選択肢が多くて、1手の重みがすごい。
これを幼い女の子が脳内だけで何十手も読んでいる……コムギ、本当に何者なんだ、、と改めて思いました。
まとめ
今回は「そもそもルールが手に入らない」ところからのスタートだったので、遊ぶ前に“調べて・読み解く”のがいちばんの山場でした。画像をピクセル解析して駒の動きを起こす、なんて回り道もしましたが、結果的に推測ではなく資料どおりに作れたのは良かったです。
素のHTML/CSS/JSでも、ルールが複雑なボードゲームがちゃんと“遊べるもの”になる、という再確認にもなりました。
よかったら遊んでみてください↓