slide-puzzle
リポジトリのリンク
https://github.com/beeeyan/slide-puzzle
ブログの説明
Reactのinteractjsを使って3×3のスライドパズルを作った
完成形のうごき
https://gyazo.com/0d26c081ea2648d6b3c29d5f22e57a29
「パズルを移動させている途中は、別のピースは動かせない」処理になっている。
けっこう判定がシビアになっています。
私のポートフォリオサイトでも試せます。
使ったパッケージ
https://interactjs.io/
パッケージを利用することで、処理の記述が楽にできた。
動かすコンポーネントが多少は分かりやすくなった。
大元の参考サイト
【React】ドラッグでコンポーネントを動かせるようにするCustom Hookを作る
画像の用意
Instagramのグリッド分割ジェネレーター
パズルとして成立しているかどうかの確認
8パズル,15パズルの不可能な配置と判定法
理解できると面白かった。
#作った