数字ずらすアレ

１・JavaScript部 

<SCRIPT LANGUAGE="javascript">
<!--
function mazeru(){
	tate=3;		//ます目の数変更時書き換え１
	yoko=3;		//ます目の数変更時書き換え２
	max=tate*yoko;
	i=0;
	
	for(i=0;i<200;i++){
		for(n=0;n<max;n++){
			if(document.ninepzl.btn(n).value=="　　　"){
				rnd=Math.floor(Math.random() * 4);
				switch(rnd){
					case 0:	push=n-yoko;
						break;
					case 1:	push=n+yoko;
						break;
					case 2:	push=n+1;
						break;
					case 3:	push=n-1;
						break;
				}
				if(push<max && push>=0)	idou(push);
			}
		}
	}
	document.ninepzl.txt.value=0;
}

function idou(num){
	yoko=3;		//ます目の数変更時書き換え３
	tate=3;		//ます目の数変更時書き換え４
	max=tate*yoko;
	count=document.ninepzl.txt.value-0;

	tp=num-yoko;
		if(tp<0) tp=max;
	bt=num+yoko;
		if(bt>max) bt=max;
	lf=num-1;
		if((num+1)%yoko==1) lf=max;
	rg=num+1;
		if((num+1)%yoko==0) rg=max;

	if(tp<max){
		if(document.ninepzl.btn(tp).value=="　　　"){
			document.ninepzl.btn(tp).value
			=document.ninepzl.btn(num).value;
			document.ninepzl.btn(num).value="　　　";
		}
	}
	if(bt<max){
		if(document.ninepzl.btn(bt).value=="　　　"){
			document.ninepzl.btn(bt).value
			=document.ninepzl.btn(num).value;
			document.ninepzl.btn(num).value="　　　";
		}
	}
	if(lf<max){
		if(document.ninepzl.btn(lf).value=="　　　"){
			document.ninepzl.btn(lf).value
			=document.ninepzl.btn(num).value;
			document.ninepzl.btn(num).value="　　　";
		}
	}
	if(rg<max){
		if(document.ninepzl.btn(rg).value=="　　　"){
			document.ninepzl.btn(rg).value
			=document.ninepzl.btn(num).value;
			document.ninepzl.btn(num).value="　　　";
		}
	}
	count++;
	document.ninepzl.txt.value=count;
	hantei(count);
}

function hantei(count){	
	if(document.ninepzl.btn(0).value=="　１　"
	&& document.ninepzl.btn(1).value=="　２　"
	&& document.ninepzl.btn(2).value=="　３　"
	&& document.ninepzl.btn(3).value=="　４　"
	&& document.ninepzl.btn(4).value=="　５　"
	&& document.ninepzl.btn(5).value=="　６　"
	&& document.ninepzl.btn(6).value=="　７　"
	&& document.ninepzl.btn(7).value=="　８　"
	//ます目の数変更時書き換え５　ここに増やしていきます
	){
		alert("おめでとう！\n　終了 "+count+"手");	
	}
}
//-->
</SCRIPT>


２・FORM部 

<FORM NAME="ninepzl">
<TABLE><TR><TD>

<INPUT TYPE="button" value="　１　" onClick="idou(0)" NAME="btn"></TD><TD>
<INPUT TYPE="button" value="　２　" onClick="idou(1)" NAME="btn"></TD><TD>
<INPUT TYPE="button" value="　３　" onClick="idou(2)" NAME="btn"></TD></TR><TR><TD>
<INPUT TYPE="button" value="　４　" onClick="idou(3)" NAME="btn"></TD><TD>
<INPUT TYPE="button" value="　５　" onClick="idou(4)" NAME="btn"></TD><TD>
<INPUT TYPE="button" value="　６　" onClick="idou(5)" NAME="btn"></TD></TR><TR><TD>
<INPUT TYPE="button" value="　７　" onClick="idou(6)" NAME="btn"></TD><TD>
<INPUT TYPE="button" value="　８　" onClick="idou(7)" NAME="btn"></TD><TD>
<INPUT TYPE="button" value="　　　" onClick="idou(8)" NAME="btn">

</TD></TR></TABLE>
<BR><INPUT TYPE="text" NAME="txt" readonly>
<INPUT TYPE="button" value="シャッフル" onClick="mazeru()">

</FORM>


● 設置方法
１・JavaScript部を設置したいHTMLの<HEAD>〜</HEAD>に、
２・FORM部を<BODY>〜</BODY>の中のお好きなところに貼り付けて下さい。

● 本日のテーマ
ここ3回くらい何かひたすらしちめんどくさいものばっか作ってた気がするので、
ここいらで一発息抜きをば、と30分くらいで作れるものを作りました。
やっぱ凝ってないなぁ〜。

● 変更方法
ます目の数を変えるHTML分かる方限定。
１．まず、FORMのボタンを、増やしたい数だけ増やしてください。
ただし並んだ形は正方形、長方形になるようにしましょう。
<INPUT TYPE="button" value="(ボタンに表示される数字)" onClick="idou((←の数字-1))" NAME="btn">

２．スクリプトのコメント｢ます目の数変更時書き換え｣の１〜４の部分を書き換えます。
tate= に縦のます目数、yoko= に横のます目数を入れます。

３．スクリプトのコメント｢ます目の数変更時書き換え５｣を書き換えます。
ます目の数だけ、
&& document.ninepzl.btn((→の数字-1)).value=="(ボタンに表示される数字)"
を、コメントの場所に書き加えていきます。

ただ2桁になるとボタンの大きさがずれます。

● 今回の反省
反省も何もないよなぁ……。やってるのはごくごく単純な作業。
押したボタンの上下左右のどれかが空ボタンだったら、そっちに数字を移動、の繰り返し。
そういや｢オブジェクトがありません｣ってなメッセージを製作中いっぱいもらっちゃって
んなわけねぇだろちゃんと作ってるわコルァとか思ってたら、
やっぱり計算で値が有効な範囲よりはみ出してた(正確には、はみ出してるのを
知ってたくせに制御するのを忘れてた)という腐れイージーミスやらかしてて大笑いでした。
コンピュータさまの言うことはちゃんと素直に聞きましょう。

【実行結果】 【戻る】