スライドパズルをJavaScriptで実装！Swap型 & Slide型の2種類を比較
はじめに
スライドパズルはシンプルながら奥深いパズルゲームです。本記事では、JavaScriptを用いて Swap型 と Slide型 の2種類のスライドパズルを実装しました。それぞれの違いとコードの解説を行います。
Swap型スライドパズル
特徴
- 任意の2つのタイルを入れ替える方式。
- 数字の順番を整えていくロジックが必要。
- 直感的にプレイしやすい。
コード
<style>button{font-size:50;width:100;height:100</style>
<body id=b><script>
z=3,Z=z*z,x=Z-1;
for(p="x",i=x;i;p=[i--,...p]);
for(i=0;i<2*Z;i+=r-t?1:0)[p[r],p[t]]=[p[t=new Date%x],p[r=new Date%x]];
m=n=>{
N=n-x;
if((~~(n/z)==~~(x/z)&&(n+x)%2)||N==z||N==-z)p[x]=p[n],p[n]="x",x=n;
b.innerHTML=p.map((v,i)=>`${i%z?"":"<br>"}<button onclick=m(${i})>${v}</button>`).join``
};m()
</script>
解説
-
変数の初期化
-
z=3で3×3のパズルを設定。 -
Z=z*zで全タイル数を計算。 -
x=Z-1で空白セルの位置を最後に設定。
-
-
初期状態の設定
-
p配列に数値を格納し、シャッフル。
-
-
タイルの移動処理
- 同じ行で隣り合っている、または上下に並んでいる場合のみ入れ替え。
-
m(n)関数でクリック時の処理を実行。
Slide型スライドパズル
特徴
- 空白タイルをスライドさせる方式。
- パズルゲームとして一般的。
- 適切な順序でスライドさせる戦略が必要。
コード
<style>button{font-size:50;width:100;height:100</style>
<body id=b><script>
z=3,Z=z*z,x=Z-1;
for(p="x",i=x;i;p=[i--,...p]);
for(i=0;i<2*Z;i+=r-t?1:0)[p[r],p[t]]=[p[t=new Date%x],p[r=new Date%x]];
m=n=>{
f=p.filter((_,i)=>i%z==n%z);
((t=n/z|0)-(s=x/z|0))||(p.splice(x,1),p.splice(x=n,0,"x"));
if(/x/.test(f)){
f.splice(s,1),f.splice(t,0,"x");
for(i=n%z;i<Z;i+=z)p[i]=f[i/z|0];
x=n
}
b.innerHTML=p.map((v,i)=>`${i%z?"":"<br>"}<button onclick=m(${i})>${v}</button>`).join``
};m()
</script>
解説
-
初期設定
-
x=Z-1で空白の位置を最後にする。 -
p配列をシャッフル。
-
-
タイルのスライド処理
- 空白と同じ行または列のタイルをスライドさせる。
-
m(n)でクリック時のスライド処理を実行。
まとめ
- Swap型 はどこでもタイルを入れ替え可能で直感的。
- Slide型 は空白を動かす一般的なパズル。
- どちらも短いコードで実装可能！
興味のある方はぜひ試してみてください！