地名タイムアタックWebゲーム
志布志市いくつ?
鹿児島県の「志布志市」を題材にしたブラウザゲームです。 盤面にランダム配置された「志」「布」「市」の中から、 「志→布→志→市」の順に4文字が一直線に並ぶ場所を探します。 日本語の地名の面白さを、短時間で遊べるタイムアタックにしました。
8方向から探す
横、縦、斜めの8方向を対象に、隣接する4マスが「志、布、志、市」の順に並ぶ場所を探します。
盤面サイズを選べる
4x4の初級から20x20の超上級まで、17段階の盤面サイズを切り替えられます。
全件発見で自動クリア
正解数と発見数を見ながら進め、すべて見つけると自動でクリアし、タイムを記録します。
遊び方
難易度と盤面サイズ
| 難易度 | サイズ | 志布志市の数 |
|---|---|---|
| 初級 | 4x4 - 6x6 | 1個 |
| 中級 | 7x7 - 10x10 | 2 - 6個 |
| 上級 | 11x11 - 15x15 | 8 - 16個 |
| 超上級 | 16x16 - 20x20 | 19 - 31個 |


実装のポイント
HTML / CSS / JavaScriptだけで構成
サーバーやフレームワークを使わず、静的なWebゲームとして構成しています。 そのため、Vercelに配置しやすく、ブラウザだけで遊べます。
期待値で正解数を調整
ランダム盤面でも難易度が大きくぶれないように、盤面サイズごとの期待値を使って 「志布志市」の出現数を調整しています。たとえば、10x10では約6個、 20x20では約31個を目安にしています。
SVGで矢印を描画
正解箇所は、SVGの線、三角形、円を組み合わせて矢印として描画します。 見つけた場所が盤面上で残るため、進捗と答え合わせが分かりやすくなります。
ランキング機能の拡張構想
今後、クリアタイムを登録して盤面サイズ別のランキングを表示する場合は、 Googleスプレッドシートを簡易DBとして使う構成を想定しています。 プレイヤー名、盤面サイズ、クリアタイム、登録日時だけを保存し、 個人情報を持たない軽いランキングDBとして扱う方針です。
実装時は、ブラウザから直接GASを呼び出さず、Webアプリ側APIで中継して API_TOKENを隠す構成にします。詳しい設計はGASでGoogleスプレッドシートを簡易DB化し外部WebアプリからCRUDする構成にまとめています。
8方向探索アルゴリズム
各マスを起点に、右、左、下、上、右下、左上、右上、左下の8方向を調べます。 4文字分が盤面外に出ないかを確認し、「志→布→志→市」と一致した場合だけ正解として扱います。
const dirs = [
[ 0, 1], [ 0, -1], // right / left
[ 1, 0], [-1, 0], // down / up
[ 1, 1], [-1, -1], // down-right / up-left
[-1, 1], [ 1, -1], // up-right / down-left
];基本情報
| アプリ名 | 志布志市いくつ? |
|---|---|
| URL | https://shibushishi-ikutsu.vercel.app/ |
| GitHub | https://github.com/YujiFukami/shibushishi-ikutsu |
| 技術構成 | HTML / CSS / JavaScript |
| 盤面サイズ | 4x4 - 20x20 |
| 探索方向 | 横・縦・斜めの8方向 |
| タイマー | 0.1秒精度 |

