Softex CelwareTech Blog

地名タイムアタックWebゲーム

志布志市いくつ?

鹿児島県の「志布志市」を題材にしたブラウザゲームです。 盤面にランダム配置された「志」「布」「市」の中から、 「志→布→志→市」の順に4文字が一直線に並ぶ場所を探します。 日本語の地名の面白さを、短時間で遊べるタイムアタックにしました。

8方向から探す

横、縦、斜めの8方向を対象に、隣接する4マスが「志、布、志、市」の順に並ぶ場所を探します。

盤面サイズを選べる

4x4の初級から20x20の超上級まで、17段階の盤面サイズを切り替えられます。

全件発見で自動クリア

正解数と発見数を見ながら進め、すべて見つけると自動でクリアし、タイムを記録します。

遊び方

  1. 1. 盤面サイズを選ぶ
    4x4から20x20までの盤面サイズを選び、ゲームを開始します。
  2. 2. 4マスを順番になぞる
    「志」から始めて、「布」「志」「市」と隣接するマスをクリックします。
  3. 3. 全件発見を目指す
    正しく見つけると矢印が表示され、すべて見つけるとクリアです。
志布志市いくつ?の盤面サイズ選択画面

難易度と盤面サイズ

難易度サイズ志布志市の数
初級4x4 - 6x61個
中級7x7 - 10x102 - 6個
上級11x11 - 15x158 - 16個
超上級16x16 - 20x2019 - 31個
10x10盤面で志布志市を探す画面
10x10盤面の例です。中級サイズでは、適度な数の「志布志市」を探すタイムアタックになります。
20x20盤面で志布志市を探す画面
20x20盤面では、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
];

基本情報

アプリ名志布志市いくつ?
URLhttps://shibushishi-ikutsu.vercel.app/
GitHubhttps://github.com/YujiFukami/shibushishi-ikutsu
技術構成HTML / CSS / JavaScript
盤面サイズ4x4 - 20x20
探索方向横・縦・斜めの8方向
タイマー0.1秒精度