Screenshots
Overview
概要
ピクロス(お絵かきロジック)とナンプレ(数独)を無限に自動生成するパズルサイトです。生成器とソルバーの両方を自前実装し、出題はすべて一意解を保証。さらに難易度を『人間の解法テクニックのレベル』でソルバーが判定するため、表示される難易度と体感が一致します。ピクロスは5×5から20×20まで、ナンプレは入門から上級まで4段階。ヒントは『ロジックで確定できる次の1マス』を理由つきで開示し、印刷ビューにも対応します。
How to use
遊び方・使い方
ピクロスは塗る/バツ/消すの3モードとドラッグ連続入力で、行と列の数字を手がかりにマスを埋めます(PCは左クリックで塗る・右でバツ、Z/Xキーも可)。ナンプレはメモモードで候補を書きつつ、重複は赤で警告されます。行き詰まったらヒントで次の確定マスと根拠を確認。タイマーと自己ベスト、ノーヒント達成のバッジがあり、盤面は自動保存されます。/printで印刷用の整形ビューを開けます。
Tech stack
技術スタック
TypeScriptNext.js 16React 19Web WorkerTailwind CSS v4
追加npm依存はなく、ピクロス盤面はCanvas 2D、ナンプレはCSS Gridで描画。状態はUndo/Redo履歴つきのuseReducerで、乱数はxorshift128。シード付きURLで同じ問題を共有でき(seedはnoindex)、大きい盤面はピンチズーム/2本指パンを自前実装しています。
Highlights
工夫した点
- ピクロスソルバーは行単位のロジック伝播(3値のDPメモ化で全整合配置の共通部分を確定)を反復し、完解できれば一意解として採用。生成器はランダム塗り→ソルバー検証→局所修正→難易度採点の流れ
- ナンプレはバックトラッキングで完成盤を作り、解数カウントソルバー(解が2個見つかり次第打ち切り)で一意解を保ちながら穴あけ。論理ソルバーを安いテクニック順に適用し、必要な最高位テクで難易度を確定
- 生成・ソルバーはWeb WorkerでUIブロックを回避(リクエストID方式)。ナンプレの解数カウントは候補ビットマスクとMRV(最小候補優先)で高速化
To improve
改善したい点
- ピクロスの絵柄(意味のある図案)生成は未対応で、ランダム由来のため絵として読みにくい問題が出る
- ナンプレ上級のテクニック判定を、より人間の解き筋に近づける余地がある
- 大きい盤面のモバイル操作(誤タップ・ズーム)の快適性に伸びしろ
What's next
今後の展望
- デイリーパズルやクリア数に応じた実績
- ピクロスの図案テンプレートによる『絵になる』問題生成
- スリザーリンク等、他のロジックパズルへの拡張