スライドパズルを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型 は空白を動かす一般的なパズル。
どちらも短いコードで実装可能！

興味のある方はぜひ試してみてください！