<style>
.cel{width:40;height:40;}
</style>
<body>
<div id=d></div>
<span id=dbg></span>
<script>
//숫자퍼즐 w----@hanmail.net 2004-04-25
sol=''; //1234567890 해답배열
bl=''; //공백(0)의 위치 c_y_x;
count=0; //시도(클릭)회수
var wd=3, ht=3; //셀의 크기
//퍼즐 테이블을 그리는 함수
function drawTable(w,h){
var str="<table border=1 id=tbl>";
for(var i=0;i<h;i++){
str+="<tr>";
for(var j=0;j<w;j++){
str+="<td id=c_"+i+"_"+j+" class=cel valign=middle align=center onclick=mv(this.id)> </td>";
}
str+="</tr>";
}
str+="</table>";
d.innerHTML=str;
}
//테이블에 랜덤숫자를 채우는 함수
function setTable(w,h){
ran=new Array(w*h); //배열 생성
for(var i=0;i<ran.length;i++){ //배열의 크기만큼 루프를 돈다.
if(i!=0)sol+=i; //해답스트링 지정
ran[i]=Math.random()+"_"+i; //배열에 랜덤값 + idx를 지정
}
sol+=" "; //해답스트링 완성
ran.sort(); //배열을 소트한다 - 이로서 idx가 랜덤하게 섞이게 된다.
var cnt=0; //카운터
for(var i=0;i<h;i++){ //세로만큼 돌면서
for(var j=0;j<w;j++){ //가로만큼 돌면서
var tmp=ran[cnt].split("_")[1]; //배열의 값에서 idx를 분리해낸다.
if(tmp!=0) { //idx가 0이 아니면
tbl.rows(i).cells(j).innerText=tmp; //셀의 내용에 idx를 출력한다.
} else {
bl="c_"+i+"_"+j; //공백셀이면, 공백셀변수에 현재셀의 id를 저장한다
}
cnt++; //카운터 증가
}
}
}
drawTable(wd,ht); //테이블을 그리고
setTable(wd,ht); //숫자를 채운다
//셀을 클릭했을경우의 처리함수
function mv(e){
if(document.all(e).innerText!=' '){ //클릭한 셀이 공백이 아닌경우
var gbl=getBlank(); //공백셀의 위치
var t0=e.split("_"); // c_y_x; 가로,세로위치로 분리
var t1=gbl.split("_"); // 상동
var ab0=Math.abs(parseInt(t0[1])-parseInt(t1[1])); //클릭한셀과, 공백셀의 위치의 차이
var ab1=Math.abs(parseInt(t0[2])-parseInt(t1[2])); // 상동
if(ab0==1&&ab1==0||ab0==0&&ab1==1){ //바로 인접한경우
document.all(gbl).innerText=document.all(e).innerText; //클릭셀과 공백셀의 내용을 대입
document.all(e).innerText=' '; // 클릭한셀에는 공백처리 - 이로서 셀이 이동한것처럼 보여진다.
bl=e; // 공백셀의 위치를 재정의
count++; //클릭회수 증가.
var test=confirmNumbers(); //게임이 끝나는지 확인
if(result==1){ //게임이 끝나면,
alert('done'); //메시지 출력
}
} else {
}
}
}
function getBlank(){ //공백셀의 위치를 반환한다
return bl;
}
// 현재테이블의 셀의 배열이 해답스트링과 일치하는지 여부를 리턴한다.
function confirmNumbers(){
var str="";
for(var i=0;i<tbl.rows.length;i++){ //세로만큼 루프를 돌며
for(var j=0;j<tbl.rows[i].cells.length;j++){ //가로셀만큼 루프를돈다.
str+=tbl.rows(i).cells(j).innerText; //셀의 내용을 임시스트링에 담는다.
}
}
(str==sol)?result=1:result=-1; //임시스트링이 해답스트링과 일치하는지 여부를 변수에 담는다.
dbg.innerHTML="회수:"+count; //횟수 카운터 출력
return result; //일치여부를 반환한다.
}
</script>
</body>