非破壊的な画像タイル分割と
剰余算によるクリア判定アルゴリズム

1. background-position による「仮想的」な画像分割

このパズルの最大の特徴は、実際に画像をN個のファイルに分割しているわけではないという点です。1つの画像を `background-image` として利用し、CSSの `background-size` と `background-position` を動的に計算することで、仮想的なタイルを実現しています。

メリット： 画像の切り出し処理（Canvasでのスライス等）を待機する必要がなく、アップロード直後にパズルを開始できます。また、画像の解像度やアスペクト比を問わず、計算式一つでN×Nのグリッドに対応可能です。

// 各タイルの背景位置を計算するロジックの概要
const gridSize = // 3, 4, 5などの分割数;

// 背景サイズを分割数に合わせて拡大
innerDiv.style.width = `${gridSize * 100}%`;
innerDiv.style.height = `${gridSize * 100}%`;

// タイルのIDから表示すべき座標を算出
// 独自の計算ロジックにより、1枚の画像から特定部位を抽出
innerDiv.style.left = `-${(pieceId % gridSize) * 100}%`;
innerDiv.style.top = `-${Math.floor(pieceId / gridSize) * 100}%`;

2. 360度の剰余（Modulo）を活用した状態管理

ピースが回転する際、内部的な回転状態は常に累積されていきますが、クリア判定では「向きが合っているか」のみが重要です。ここで、360を法とする剰余演算を用いることで、ユーザーが何度回転させても正しく「正位置」を判定できる設計にしています。

メリット： 「360度を超えたら0に戻す」といった複雑な条件分岐が不要になり、`Array.prototype.every` を用いた極めて簡潔な関数型のアプローチでクリア判定を完結させることができます。

// ピースごとの回転角を管理し、全ピースが正位置か判定
function checkClear() {
    const isAllCorrect = pieces.every((p) => {
        // 360の倍数であれば、向きが一致しているとみなす
        return p.rotation % 360 === 0;
    });

    if (isAllCorrect) {
        // ここにクリア後の演出・処理が入ります
    }
}

3. Canvas API による動的な「クリア記録」の合成

クリア時に生成される記録画像は、Canvas APIを使用してクライアントサイドで動的に合成しています。元の画像の上に、半透明のオーバーレイや統計データ（タイム、タップ数）を描画し、一枚のJPEGとしてエクスポートします。

メリット： サーバーにデータを送信することなく「シェア用コンテンツ」を生成できるため、ユーザーのプライバシーを完全に守りつつ、ゲーム性を高める付加価値を提供できています。

// 記録画像の描画プロセス（一部抽象化）
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 1. ベース画像の描画
ctx.drawImage(originalImg, // 独自の描画パラメータ);

// 2. 統計情報パネルの合成
ctx.fillStyle = '#4f46e5'; // ブランドカラー
// ここに矩形描画とクリッピング処理が入ります

// 3. テキスト情報の書き込み
ctx.font = 'bold 32px sans-serif';
ctx.fillText(`CLEAR! [ ${gridSize}x${gridSize} ]`, // 座標指定);
ctx.fillText(`Time: ${formattedTime} / Moves: ${moves}`, // 座標指定);

Developer's Note

このツールを開発する上で最もこだわったのは「徹底したオフライン志向」です。昨今のAIツールやクラウドツールとは対照的に、あえて「手元のデバイスだけで完結する」ことに価値を置きました。

iPhoneのHEIC形式への対応もその一環です。ブラウザ上で動的にライブラリをロードし、ユーザーの手を煩わせることなく最新の画像フォーマットを扱えるように調整しています。パズルという古典的な遊びの中に、現代のフロントエンド技術を詰め込んだ意欲作です。