Hexfrontier — 3Dで遊ぶヘックスの島の開拓ゲーム
Vanilla JavaScript + Three.js で 1 から作った、ブラウザで動く六角タイルの開拓ゲーム。
CPU 相手の 1 人プレイでも、合言葉を共有した友達とのオンライン対戦でも遊べる。
ルールは基本・都市と騎士・漁師たち・航海者たちと、
オリジナルのドラゴンの島の5種類。
ビルド工程なし・依存はベンダリング済みの Three.js のみ。
▶ 今すぐ遊ぶ: https://junia2009.github.io/hexfrontier/
(スマホ推奨。PWA なのでホーム画面に追加すればアプリのように起動できる)
遊べるルール(5種類)
基本カタン(10点先取)
いわゆる標準カタン。開拓地と都市を建て、道を伸ばし、サイコロの出目で資源を集めて
銀行交易・港交易・プレイヤー間交易で回す。発展カード(騎士・街道建設・収穫・独占・勝利点)、
最長交易路、最大騎士力もすべて実装。まずはここから。
都市と騎士(13点先取)
公式拡張「Cities & Knights」の主要システムを一通り実装した本命モード。
- 都市が商品(布・コイン・紙)を産出し、商品で都市改良(交易・政治・科学の3系統)を進める
- 改良 Lv3 で公式どおりの特典 — 交易=商館(商品2:1)、政治=要塞(騎士Lv3)、
科学=水道橋(産出ゼロのロールで好きな資源1枚)
- 系統最速で Lv4 に到達するとメトロポリス(+2点)
- イベントダイスで蛮族が迫り、騎士を雇い・活性化して島を守る。
防衛に成功すれば「カタンの守護者」、失敗すれば都市が焼かれる
- 進歩カード全54枚(公式構成: 交易・政治・科学 × 各18枚)。錬金術師で出目を操作したり、
破壊工作員で相手の手札を捨てさせたり、スパイでカードを盗んだり
- 城壁(手札上限+2)、商人、初期配置は開拓地+都市、といった細かいルールも公式準拠
🐉 ドラゴンの島(12点先取・本作オリジナル)
盗賊の代わりにドラゴンが島に棲むオリジナルルール。
- ドラゴンは最も出目の良い山に巣を作り、そのヘックスの産出を封鎖する
- ゾロ目が出るとドラゴンが暴走! 最も稼いでいるヘックスへ飛んでいき、
8手番のあいだ炎上させ、隣接プレイヤーの資源を焼く
- 対抗手段は見張り塔(木+レンガ+鉱石、1人2基まで)。塔が守るヘックスが
襲われると撃退に成功し、財宝(+1点と資源1枚)を獲得
- 「良い土地ほど狙われる」ため、強い土地に居座る定石にリスクが生まれ、
塔のタイミングと立地の読み合いが加わる
🐟 漁師たち(10点先取)
公式の小拡張「Fishermen of Catan」。基本ルールに魚という第2の通貨が加わる。
- 砂漠が湖になり(2/3/11/12 で魚)、海岸の漁場6か所も出目で魚を産む
- 魚は手札に数えないので、7の捨て札でも盗賊でも失われない
- 匹数に応じて、盗賊の追い払い・資源の略奪・銀行から1枚・道1本・発展カードと交換できる
- 山札に1枚だけの古い靴を引くと、持っている間は勝利に必要な点数が+1
⛵ 航海者たち(13点先取)
公式拡張「Seafarers」。盤が広がり、海と船が入る。
- 本島のまわりに小島5つ。小島へは船(木+羊毛)で航路をつないで渡る
- 本島以外の島に初めて開拓地を建てると +2点
- 7が出たら陸の盗賊か海の海賊を動かす。金鉱は好きな資源を産む
- 開いた航路の先端の船は、1手番に1隻だけ動かせる
ルールの正確な仕様と公式から簡略化した点は docs/RULES.md に明記。
アプリ内でも「📖 あそびかた」からいつでも読める。
特徴
3D の盤面と演出(Three.js)
- 海: シェーダー製。島に近いほど浅く明るいエメラルド、沖は深い藍。
波のうねり・岸辺の泡・雲の影が流れる
- 空: スカイドームに太陽と星空。5分で昼→夕→夜→朝が一周し、
照明・影の濃さ・フォグ・海の色まで連動する(夜は月明かりの青に)
- 地形: ヘックスごとに起伏があり、山・森・畑がそれぞれの植生で飾られる。
ヨットや飛行機が島の周りを行き交う
- コマと演出: 羽ばたくドラゴンと火炎ブレス、蛮族船が航路ブイに沿って迫る様子、
転がる 3D ダイス、交易成立のバナーなど、状態の変化は必ず目に見える形で起きる
- 3D が動かない環境向けに 2D Canvas 表示へワンタップ切替(こちらもダイス演出付き)
スマホファーストの UI
- 縦持ち全画面・ボトムシート・セーフエリア対応。頂点や辺の選択は
「候補をタップ → 確定」の2段階タップで誤操作を防ぐ
- PWA 対応(Service Worker はネットワーク優先なので常に最新版で起動する)
- 完全オフラインで CPU 戦ができる。初回に一度開けば配信物を全てキャッシュするので、
以降は機内モードでも全モードを最後まで遊べる(オンライン対戦のみ通信が必要)
- ▶ あそびかたデモ。本物のエンジンと HUD をその場で動かす自動再生デモを、
話題ごとに 33本の短編(10〜60秒)に分けて収録。見たい操作だけ選んで観られる
- 戦績と実績と称号。モード別の勝率・最高得点・最短勝利と、43種の実績(金/銀/銅)。
実績には称号が紐づいていて、獲得したものから1つ選んで対戦中に名乗れる。
記録は端末のローカルにだけ残る(サーバーには送らない)
- 匿名のアクセス集計。何人来て、どれだけ遊ばれたかだけを GoatCounter で数えている。
送るのは「ページを開いた」と出来事の名前(対戦開始・終局・部屋を作った など)だけで、
名前・合言葉・盤面・戦績は送らない。Cookie も使わない
🚶 島を歩く(ミニゲーム)
対戦で使う島の上を棒人間で歩き回れるモード。島ごとに遊びが乗っている。
- 釣り(全ての島の港)・蛮族を射る(都市と騎士)・丸太乗り(航海者たち)・
ドラゴンから逃げろ(ドラゴンの島)・大富豪(基本の島の円卓。CPU 入りでひとりでも可)
- 合言葉で集まれば、友達と同じ島を歩いて**集まり(大会)**に出られる
- 遊ぶと銀貨が貯まり、島の店でかぶりもの・島の飾り・盤まわりの着せ替え
(サイコロ・コマ・盤の柄、夜の灯り)を買える。掲示板には日替わりの依頼が出る
オンライン対戦(合言葉で友達と)
- タイトルの「🌐 オンライン対戦」から部屋を作ると 英字4文字の合言葉が出る。
それを共有した友達が同じ部屋に入り、最大4人で対戦できる。空いた席は CPU が埋める
- サーバー権威型: ルール判定も乱数もサーバー側で行うため、
クライアントを改造しても不正な手は通らない。相手の手札の中身も配信されない
- 通信が切れても席は残り、同じ端末で戻れば元の席に復帰する。
切断中はサーバーがその席を肩代わりして進めるので、誰かが落ちてもゲームは止まらない
- サーバーは Cloudflare Workers + Durable Objects(合言葉ごとに1部屋)。
ルールエンジンをそのまま
import しているので、ルール実装はクライアントと共通の1つだけ
対戦相手として成立する CPU
- 貪欲法 + 盤面評価で、建設・騎士運用・都市改良・進歩カード54枚の使いどころまで判断する
- 難易度3段階(弱い・普通・強い)。評価関数に決定的ノイズを加える方式なので、
難易度を変えてもゲームの乱数列は変わらない
- プレイヤー間交易: こちらから提案できるだけでなく、CPU からも提案が届く。
CPU は損得を計算して応じ、断られた CPU はしばらく再提案してこない
その他
- 中世風 BGM: 音源ファイルを一切使わず、Web Audio でコード進行・パッド・撥弦・笛を
リアルタイム合成するジェネレーティブ音楽
- 決定性: すべての乱数はシード制御(URL に
?seed=123)。同じシードは同じゲームになり、
バグ報告・テスト・リプレイに使える。ダイスの公正性は χ² 検定で統計監査済み
ローカルで動かす
ES Modules を使っているため、ローカルサーバー経由で開く:
npm run serve # または python3 -m http.server 8000
# → http://localhost:8000/ を開く
インストールもビルドも不要(npm install すら要らない)。
オンライン対戦も試す場合は、別ターミナルでサーバーを立てる:
npm install # wrangler(開発用)を入れる
npm run server # http://127.0.0.1:8787
localhost で開いたページは自動でこのローカルサーバーを見る。
開発
npm test # 単体テスト + セルフプレイ検証(Node のみ、ブラウザ不要)
npm run selfplay # CPU 4体の自動対戦ゲート(node scripts/selfplay.js 1000 等)
node scripts/dice-audit.mjs # ダイス乱数の統計監査(χ²検定バッテリー)
ルールエンジンは DOM に依存しない純粋関数の集まりなので、Node だけで全ルールが検証できる。
最重要の不変条件は保存則(銀行+全手札 = 資源19×5・商品12×3)と、
セルフプレイ数百ゲームの完走。
オンライン対戦サーバーのデプロイ
静的サイトとは別に、一度だけ Cloudflare へ配置する(無料枠で動く)。
GitHub Actions 経由なら、ブラウザだけで設定できる(PCがなくても可):
- Cloudflare ダッシュボード で
API トークンを作る(テンプレート「Edit Cloudflare Workers」を使う)
- GitHub の
Settings → Secrets and variables → Actions に登録する
CLOUDFLARE_API_TOKEN … 1 で作ったトークンCLOUDFLARE_ACCOUNT_ID … Cloudflare のアカウントID
Actions → Deploy game server → Run workflow を実行する
以降は server/ や src/ を変更して main に push すると自動でデプロイされる
(ルールエンジンはサーバーも同じコードを取り込むため、ルール変更時も再デプロイが要る)。
手元にPCがある場合は以下でもよい:
npx wrangler login # ブラウザで Cloudflare アカウントを認証
npm run deploy:server
デプロイ後に出た URL を src/net/client.js の DEFAULT_SERVER に設定する。
アプリの「🌐 オンライン対戦」画面でも、接続に失敗したときに接続先を変更・保存できる。
プロジェクト構成
index.html # 単一ページ(CSS込み)。importmap で three をベンダー読込
sw.js # Service Worker(ネットワーク優先 + install 時にプリキャッシュ)
src/
├── main.js # 起動・画面フロー・入力モード・CPU駆動・演出
├── state.js # GameState 定義(JSON化可能な単一オブジェクト)・モード一覧
├── actions.js # 全アクションの validate / apply(dispatch の一本道)
├── rng.js # シード制御の疑似乱数(mulberry32系)
├── rules/ # ルールエンジン(純粋関数、canvas 非依存)
│ ├── board.js build.js dice.js robber.js trade.js victory.js road-building.js
│ ├── cak/ # 都市と騎士(騎士・蛮族・都市改良・進歩カード54枚)
│ ├── dragon.js # ドラゴンの島(暴走・炎上・見張り塔・財宝)
│ ├── fish.js # 漁師たち(湖・漁場・魚の使い道・古い靴)
│ └── sea.js # 航海者たち(船・海賊・金鉱・新しい島)
├── ai/ # CPU(合法手列挙・評価関数・思考・カード別プラグイン)
├── render/ # 2D Canvas 描画 + DOM HUD + あそびかた・戦績・店の画面
├── render3d/board3d.js # Three.js レンダラー(海・空・地形・コマ・演出)
├── demo/ # あそびかたデモ(台本と再生エンジン)
├── minigame/ # 島を歩く(棒人間・釣り・射的・丸太乗り・大富豪・飾り・集まり)
├── net/client.js # オンライン対戦(WebSocket・再接続)
├── audio/ # ジェネレーティブBGM・効果音・足音・水の音(Web Audio)
├── progress.js achievements.js # 戦績・実績・称号
└── rewards.js shop.js quests.js market.js gear.js # 銀貨・店・掲示板・魚の相場・盤まわり
server/ # オンライン対戦サーバー(Cloudflare Workers)
├── room-core.js # 部屋のロジック(席・伏せ処理・肩代わり。テスト可能)
├── room-do.js # Durable Object(合言葉ごとに1部屋)
├── walk-relay.js # 散策部屋の位置の中継
└── index.js # Worker(合言葉の発行と振り分け)
test/ # node --test(1100本超: ルール・統計・セルフプレイ・部屋・ミニゲーム)
scripts/ # セルフプレイゲート・乱数監査・故障注入・プリキャッシュ生成
vendor/ # Three.js(MIT)
開発の歩み
| フェーズ | 内容 | 検証 |
|---|
| Phase 1 | 基本カタン + 貪欲法CPU | セルフプレイ1000ゲーム |
| Phase 2 | 都市と騎士の盤面要素(商品・騎士・蛮族・都市改良) | セルフプレイ300ゲーム |
| Phase 3 | 進歩カード全54枚 + カード別CPU判断 + 難易度 | セルフプレイ300ゲーム |
| 独自拡張 | 🐉 ドラゴンの島 / プレイヤー間交易 / BGM / 海・空・島の描画強化 | 各機能ごとにE2E+セルフプレイ |
| オンライン | 合言葉で最大4人の対戦(サーバー権威型・切断復帰) | 部屋ロジックの単体テスト+ブラウザ2つのE2E |
| 公式拡張 | 🐟 漁師たち / ⛵ 航海者たち | セルフプレイ+盤面の回帰ハッシュ |
| やりこみ | 戦績・実績・称号 / 島の銀貨と店 / 掲示板 / 盤まわりの着せ替え | 実績の全件走査テスト+E2E |
| 島を歩く | 棒人間の散策・釣り・射的・丸太乗り・大富豪・集まり(大会) | 進行を純粋関数に分けて単体テスト+E2E |
| あそびかた | 実物を動かす自動再生デモ33本 | 台本が本物の手を出しているかをテストで検査 |
スコープ外
公開マッチメイキング・ランキング / 上記以外の公式拡張(「商人と蛮族」など) / アカウント登録
