Reactで作る2048風パズルゲーム
2048風ゲームを作ってみた
新しいプロジェクトとして、数字を合体させて大きくしていくパズルゲーム「Tile Merge Game」を作成しました！
技術スタック
- Vite: 高速なビルドツール
- React: UI構築
- CSS Modules: スタイル管理
- TypeScript: 型安全性
今回はゲームロジックとUIをきれいに分離することを意識しました。
実装のポイント
1. グリッド操作のロジック化
盤面の状態管理や移動ロジックは useGrid というカスタムフックにまとめました。
面白かったのは「移動」の実装です。4方向すべての移動ロジックを書くのは大変なので、盤面を回転させるアプローチを取りました。
- 「右移動」＝「180度回転」→「左移動」→「180度回転」
- 「上移動」＝「反時計回り90度回転」→「左移動」→「時計回り90度回転」
こうすることで、ロジックとしては「左に詰める」処理だけを書けば良くなります。
2. コンポーネント設計
Board コンポーネントの上に、絶対配置で Tile コンポーネントを乗せる形にしました。
CSSの transition を使うことで、座標が変わった時に自動的にスーッと動くアニメーションを実現しています。
苦労した点
無限スコア地獄 😱
最初はスコア加算を useEffect で監視していたのですが、ステート更新のタイミングがかみ合わず、一度スコアが入ると無限ループしてカウンターストップするバグが発生しました。
最終的には useEffect への依存をやめ、move 関数が移動結果と一緒に獲得スコアを返すシンプルな設計に変更して解決しました。
iOSでのLocalStorage問題
ハイスコアを保存しようとして localStorage を使っていたのですが、環境によってはうまく動かないことが判明。今回は潔く「オンメモリ管理（リロードでリセット）」に切り替えました。シンプル・イズ・ベスト！
まとめ
シンプルなゲームですが、アニメーションや状態管理など、Reactの良い練習になりました。 皆さんもぜひ遊んでみてください！