# Penny Packer 16 — 使用マニュアル ## 概要 Penny Packer 16 は、ブラウザ上で動くインタラクティブなパズルです。16枚の同じ大きさの円形「コイン」を、四分円（90度の扇形）の中に、互いに重ならないようにすべて収めることが目標です。円充填問題を視覚的に扱ったパズルとなっています。 ## 起動方法 このアプリは単一のHTMLファイル（`index.html`）です。ファイルをダブルクリックするか、任意のモダンブラウザ（Chrome、Firefox、Safari、Edgeなど）で開くだけで動作します。インストールやインターネット接続は不要です。 ## 画面構成 - **左側 — キャンバス（600×600）：** 四分円の扇形（水色の塗りつぶしと青い輪郭線、角は左下、原点には赤い点）が表示され、目安用に50ピクセル（1単位）ごとの薄いグリッド線が引かれています。この上に番号付きの16枚のコインが描画されます。 - **右側 — コントロールパネル：** - **ステータスボックス** — 16枚のうち、現在何枚のコインが有効（扇形内に完全に収まり、かつ他のコインと重なっていない）かを表示します - **コイン半径スライダー** — すべてのコインの大きさを設定（10〜50px、初期値25） - **扇形半径スライダー** — 四分円の大きさを設定（100〜400px、初期値200） - **色の凡例** - **6つの操作ボタン** - スクロール可能な**ログ／出力パネル** ## 遊び方 1. 初期状態では、16枚のコインが扇形の角付近に4×4のグリッド状に配置されています。 2. コインをクリックしたままドラッグして新しい位置へ移動し、マウスボタンを離すと配置が確定します。 3. 各コインの色に注目してください。**緑**＝有効、**オレンジ**＝他のコインと重なっている、**赤**＝一部が扇形の外にはみ出している、を意味します。 4. ステータスボックスに「16/16 Valid」と表示されるまで、16枚すべてのコインを配置し直してください。これで解けたことになります。 5. どちらかのスライダーを動かすと扇形やコインの大きさが変わるため、すべてのコインの判定がその場で再計算されます（ある大きさでは有効でも、別の大きさでは無効になることがあります）。 ## 色の凡例 | 色 | 意味 | |---|---| | 緑 | 有効 — 扇形内にあり、重なりなし | | オレンジ | 他のコインと重なっている | | 赤 | 扇形の境界（直線の辺または円弧）の外側にはみ出している | ## 操作パネルの詳細 ### スライダー - **コイン半径**（10〜50、刻み1、初期値25）：すべてのコインの半径をピクセル単位で設定します。コインが大きいほど配置は難しくなります。 - **扇形半径**（100〜400、刻み1、初期値200）：四分円の半径をピクセル単位で設定します。扇形が大きいほど余裕が生まれます。 ### ボタン - **Reset Positions（配置をリセット）** — 16枚のコインを初期の4×4グリッド配置に戻します。 - **Check Solution（解答をチェック）** — 有効なコインの数、現在の半径設定、成功／不成功を下部のログパネルにテキストで出力します。 - **Save Config（設定を保存）** — 名前の入力を求められ、現在のコイン配置・半径・有効数をブラウザのメモリ上に保存します（ディスクには保存されません）。複数の名前で保存できます。 - **Load Config（設定を読み込み）** — これまでに保存した設定名の一覧を表示し、選んだものを復元します。 - **Randomize（ランダム配置）** — 16枚のコインをランダムな位置に散らばらせます（実験用で、そのままでは有効な配置にはなりにくいです）。 - **Export JSON（JSONを書き出し）** — 現在の設定をJSON形式でログパネルに出力し、クリップボードにもコピーします。 ## 補足・ヒント - 座標は論理単位で表され、1単位＝50ピクセル（`scale`定数）です。原点(0, 0)は扇形の角にあたり、赤い点で示されています。 - Save Config／Load Configは、現在のブラウザタブのセッション中のみ有効です。ページを再読み込みすると消えてしまいます。ブラウザの外に記録を残したい場合は、**Export JSON**を使い、コピーされたJSONをテキストファイルに貼り付けて保存してください。 - コインが扇形の「内側」と判定されるのは、中心点だけでなく半径を含めた円全体が、両方の直線の辺と円弧の内側に完全に収まっている場合のみです。中心が内側でも、円の一部が辺や円弧からはみ出していれば赤色になります。 - サーバーとの通信は一切なく、データはどこにも送信されません。すべてブラウザ内でローカルに動作します。 ## トラブルシューティング - **ドラッグできない場合：** コインの上を直接クリックしたまま操作しているか確認してください（何もない場所をクリックしても反応しません）。 - **「Load Config」で設定が見つからない場合：** 同じブラウザセッション内で、先に一度「Save Config」を行う必要があります。 - **「Export JSON」のクリップボードコピーが失敗する場合：** ページにフォーカスがない、またはクリップボード権限がないブラウザでは自動コピーが失敗することがあります。その場合もJSONのテキストは必ずログパネルに出力されるので、そこから手動でコピーできます。