미리보기 : http://oxtag.com/html/ex/game/puzzle.html
<html>
<head>
<title>puzzle</title>
<script type = "text/javascript">
<!--
var puz = [[1,2,3,4],[5,6,7,8],[9,10,11,12],[13,14,15,""]];
var x, y, i, j, s1, s2, s3, s4, tmp;
var c1,c2, c3, c4;
function go(){
p1.innerText = "5";
}
function change(c1, c2, c3, c4){
tmp = puz[c1][c2];
puz[c1][c2] = puz[c3][c4];
puz[c3][c4] = tmp;
in_puz();
}
function sort(){
for(i=0;i<30;i++){
s1 = Math.floor(Math.random()*4);
s2 = Math.floor(Math.random()*4);
s3 = Math.floor(Math.random()*4);
s4 = Math.floor(Math.random()*4);
tmp = puz[s1][s2];
puz[s1][s2] = puz[s3][s4];
puz[s3][s4] = tmp;
}
in_puz();
}
function puzzle(x, y){
if(x>0&&puz[x-1][y]=="") change(x,y,x-1,y);
if(x<3&&puz[x+1][y]=="") change(x,y,x+1,y);
if(y>0&&puz[x][y-1]=="") change(x,y,x,y-1);
if(y<3&&puz[x][y+1]=="") change(x,y,x,y+1);
}
function in_puz(){
p1.innerText = puz[0][0];
p2.innerText = puz[0][1];
p3.innerText = puz[0][2];
p4.innerText = puz[0][3];
p5.innerText = puz[1][0];
p6.innerText = puz[1][1];
p7.innerText = puz[1][2];
p8.innerText = puz[1][3];
p9.innerText = puz[2][0];
p10.innerText = puz[2][1];
p11.innerText = puz[2][2];
p12.innerText = puz[2][3];
p13.innerText = puz[3][0];
p14.innerText = puz[3][1];
p15.innerText = puz[3][2];
p16.innerText = puz[3][3];
test();
}
function test(){
var k=1, test_num=1;
for(i=0;i<=3;i++){
for(j=0;j<=3;j++){
if(puz[i][j] == k++) test_num++;
}
}
if(test_num==16)
if(confirm("축하합니다! 퍼즐을 완성시켰습니다.\n다시 하시겠습니까?")) sort();
}
//-->
</script>
<style>
p{font-size:20pt;width:40px;text-align:center;font-weight:bold;}
td{width:40px;height:40px;cursor:hand;}
</style>
</head>
<body topmargin="3">
<table align="center" width="178" border="5" cellspacing = "1" bordercolorlight="ddddff" bordercolordark="000088">
<tr>
<td onclick="puzzle(0, 0)"><p id="p1">1</p></td><td onclick="puzzle(0, 1)"><p id="p2">2</p></td>
<td onclick="puzzle(0, 2)"><p id="p3">3</p></td><td onclick="puzzle(0, 3)"><p id="p4">4</p></td>
</tr>
<tr>
<td onclick="puzzle(1, 0)"><p id="p5">5</p></td><td onclick="puzzle(1, 1)"><p id="p6">6</p></td>
<td onclick="puzzle(1, 2)"><p id="p7">7</p></td><td onclick="puzzle(1, 3)"><p id="p8">8</p></td>
</tr>
<tr>
<td onclick="puzzle(2, 0)"><p id="p9">9</p></td><td onclick="puzzle(2, 1)"><p id="p10">10</p></td>
<td onclick="puzzle(2, 2)"><p id="p11">11</p></td><td onclick="puzzle(2, 3)"><p id="p12">12</p></td>
</tr>
<tr>
<td onclick="puzzle(3, 0)"><p id="p13">13</p></td><td onclick="puzzle(3, 1)"><p id="p14">14</p></td>
<td onclick="puzzle(3, 2)"><p id="p15">15</p></td><td onclick="puzzle(3, 3)"><p id="p16"> </p></td>
</tr>
</table>
<table align="center" width="195px">
<tr><td align="center">
<input type="button" value="시 작" onclick="sort()" style="width:195px;height:25px;" />
</td>
</tr>
</table>
</body>
</html>
'인터넷정보' 카테고리의 다른 글
| 팝업 타이머 - 새창 타이머 (0) | 2007.10.12 |
|---|---|
| 텍스트 카운팅 (0) | 2007.10.12 |
| 텍스트 카운팅 (0) | 2007.10.12 |
| 텍스트 확대 축소 소스 (0) | 2007.10.12 |
| 텍스트 확대 축소 소스 (0) | 2007.10.12 |
| 퍼즐 게임 - puzzle (0) | 2007.10.12 |
| 타이틀바.. (0) | 2007.10.12 |
| 타이틀바.. (0) | 2007.10.12 |
| 웹브라우저, 언어, 운영체제 보여주기 (0) | 2007.10.12 |
| 웹브라우저, 언어, 운영체제 보여주기 (0) | 2007.10.12 |