ココパズル (CocoPuzzle)

お気に入りの画像からオリジナルのスライドパズルを作成し、タイムアタックで遊べるWebアプリです。

特長

• 画像アップロード: 好きな画像をアップロードしてパズルを作成できます。
• 盤面サイズ選択: 2x2〜6x6まで、難易度を自由に選択可能。
• 自動シャッフル: 解ける状態になるように自動でシャッフルされます。
• タイマー機能: クリアタイムを計測し、自己ベストを目指せます。
• 自動解答: シャッフル時の履歴を使って自動で解答する機能付き。
• BGM再生: ゲーム中はBGMがループ再生され、オン/オフ切り替えも可能。
• トースト通知・紙吹雪演出: クリア時やエラー時に分かりやすく通知。

セットアップ

1. 依存パッケージのインストール

   pnpm install
   

2. 開発サーバー起動

   pnpm run dev
   

3. ブラウザでアクセス

   http://localhost:3000
   

主な技術

• Next.js
• React
• TypeScript
• Tailwind CSS
• react-confetti
• react-use

使い方

1. 「画像を選択」ボタンから画像をアップロード
2. 盤面サイズを選択（2x2〜6x6）
3. 「シャッフル」ボタンでゲームスタート
4. タイルをクリックして空白と入れ替え、元の画像を完成させよう
5. クリアするとタイムが表示され、紙吹雪とトーストでお祝い！

ライセンス

MIT

---

© 2025 AkaakuHub