웹마스터 팁
자바스크립트로 작성한 그림맞추기 퍼즐게임
2003.11.05 17:10
예전에 자바스크립트 공부하려고 만들어본 게임입니다.
사용법은 상단의 7가지 설정만 맞춰주시면 되구요..
예제 파일은 http://kimstar.pe.kr/home/msn/game/puzzle/jiri_puzzle.htm 에서 확인하세요..
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>퍼즐</title>
<script language="JavaScript">
<!--
//////////////////////////////////////////////////////////////////////////////
// 출처 : http://kimstar.pe.kr
// 작성자 : kimstar
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
// 사용자 설정
//////////////////////////////////////////////////////////////////////////////
var h_count = 5; // 가로로 쪼갤 갯수
var v_count = 4; // 세로로 쪼갤 갯수
var p_img = "puzzle_copy.jpg"; // 사용할 이미지
var p_width = 455; // 이미지 폭
var p_height = 340; // 이미지 높이
var blank_point = 2; // 상좌:1, 상우:2, 하좌:3, 하우:4
function complete_job() { // 끝났을때 할 일
alert('축하합니다.');
}
//////////////////////////////////////////////////////////////////////////////
var init_x = 0;
var init_y = 0;
var cell_width = eval(p_width / h_count);
var cell_height = eval(p_height / v_count);
var cur_x;
var cur_y;
var shuffle_now = false;
function move_clip(i, j) {
if (i-1 >= 0 && eval("puzzle_"+(i-1)+"_"+j+".innerHTML") == "") {
eval("puzzle_"+(i-1)+"_"+j+".innerHTML=puzzle_"+i+"_"+j+".innerHTML");
eval("puzzle_"+i+"_"+j+".innerHTML=''");
cur_x = i;
cur_y = j;
}
if (i+1 < v_count && eval("puzzle_"+(i+1)+"_"+j+".innerHTML") == "") {
eval("puzzle_"+(i+1)+"_"+j+".innerHTML=puzzle_"+i+"_"+j+".innerHTML");
eval("puzzle_"+i+"_"+j+".innerHTML=''");
cur_x = i;
cur_y = j;
}
if (j-1 >= 0 && eval("puzzle_"+i+"_"+(j-1)+".innerHTML") == "") {
eval("puzzle_"+i+"_"+(j-1)+".innerHTML=puzzle_"+i+"_"+j+".innerHTML");
eval("puzzle_"+i+"_"+j+".innerHTML=''");
cur_x = i;
cur_y = j;
}
if (j+1 < h_count && eval("puzzle_"+i+"_"+(j+1)+".innerHTML") == "") {
eval("puzzle_"+i+"_"+(j+1)+".innerHTML=puzzle_"+i+"_"+j+".innerHTML");
eval("puzzle_"+i+"_"+j+".innerHTML=''");
cur_x = i;
cur_y = j;
}
if (shuffle_now==false) {complete_check();}
}
function shuffle() {
shuffle_now = true;
rnd_x = eval(cur_x + Math.round(Math.random()*2) - 1);
rnd_y = eval(cur_y + Math.round(Math.random()*2) - 1);
if (rnd_x<0) {rnd_x=0;}
if (rnd_y<0) {rnd_y=0;}
if (rnd_x>=v_count) {rnd_x=v_count-1;}
if (rnd_y>=h_count) {rnd_y=h_count-1;}
move_clip(rnd_x, rnd_y);
}
function shuffle_all() {
shuffle_rate = h_count*v_count*10;
for (i=0; i<shuffle_rate; i++) { shuffle(); }
shuffle_now=false;
}
function complete_check() {
miss_match = 0;
for (i=0; i<v_count; i++) {
for (j=0; j<h_count; j++) {
if (eval("clip_"+i+"_"+j+".parentElement.id.toString()") != "puzzle_"+i+"_"+j) {
miss_match = miss_match + 1;
}
}
}
if (miss_match==1) {
complete_job();
}
}
//-->
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<script language="JavaScript">
document.write("<div id='layer1'+ ' style='overflow:hidden; width:"+p_width+"px; height:"+p_height+"px; position:relative; left:0px; top:0px;'>");
for (i=0; i<v_count; i++) {
for (j=0; j<h_count; j++) {
left_position = j*cell_width;
top_position = i*cell_height;
rel_top_position = (i*cell_height)-(j*cell_height);
rel_top_position = rel_top_position - i*((h_count-1)*cell_height);
rel_top_position = rel_top_position - (i*cell_height);
document.write("<div id='puzzle_"+i+"_"+j+"' style='width:"+cell_width+"px; height:"+cell_height+"px; position:relative; left:"+(left_position + init_x)+"px; top:"+(rel_top_position + init_y)+"px; z-index:1; overflow : hidden;' onmouseover="this.style.cursor='hand'"; onclick='move_clip("+i+", "+j+")'>");
document.write("<img name='clip_"+i+"_"+j+"' src='"+p_img+"' border='0' style='position:relative; left:"+eval(left_position*(-1))+"px; top:"+eval(top_position*(-1))+"px; z-index:1;'>");
document.write("</div>");
}
}
document.write("</div>");
switch(blank_point) {
case 1:
eval("puzzle_0_0.innerHTML = ''");
cur_x = 0;
cur_y = 0;
break;
case 3:
eval("puzzle_"+(i-1)+"_0.innerHTML = ''");
cur_x = v_count - 1;
cur_y = 0;
break;
case 2:
eval("puzzle_0_"+(j-1)+".innerHTML = ''");
cur_x = 0;
cur_y = h_count - 1;
break;
case 4:
eval("puzzle_"+(i-1)+"_"+(j-1)+".innerHTML = ''");
cur_x = v_count - 1;
cur_y = h_count - 1;
break;
default:
eval("puzzle_"+(i-1)+"_"+(j-1)+".innerHTML = ''");
cur_x = v_count - 1;
cur_y = h_count - 1;
}
document.write("<input type='hidden' name='clip_"+cur_x+"_"+cur_y+"'>");
</script>
</td>
<td>
<img src="puzzle_copy.jpg" width="455" height="340" border="0">
</td>
</tr>
</table>
<br>
<input type=button value="섞기" onclick="shuffle_all()">
</body>
</html>
사용법은 상단의 7가지 설정만 맞춰주시면 되구요..
예제 파일은 http://kimstar.pe.kr/home/msn/game/puzzle/jiri_puzzle.htm 에서 확인하세요..
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>퍼즐</title>
<script language="JavaScript">
<!--
//////////////////////////////////////////////////////////////////////////////
// 출처 : http://kimstar.pe.kr
// 작성자 : kimstar
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
// 사용자 설정
//////////////////////////////////////////////////////////////////////////////
var h_count = 5; // 가로로 쪼갤 갯수
var v_count = 4; // 세로로 쪼갤 갯수
var p_img = "puzzle_copy.jpg"; // 사용할 이미지
var p_width = 455; // 이미지 폭
var p_height = 340; // 이미지 높이
var blank_point = 2; // 상좌:1, 상우:2, 하좌:3, 하우:4
function complete_job() { // 끝났을때 할 일
alert('축하합니다.');
}
//////////////////////////////////////////////////////////////////////////////
var init_x = 0;
var init_y = 0;
var cell_width = eval(p_width / h_count);
var cell_height = eval(p_height / v_count);
var cur_x;
var cur_y;
var shuffle_now = false;
function move_clip(i, j) {
if (i-1 >= 0 && eval("puzzle_"+(i-1)+"_"+j+".innerHTML") == "") {
eval("puzzle_"+(i-1)+"_"+j+".innerHTML=puzzle_"+i+"_"+j+".innerHTML");
eval("puzzle_"+i+"_"+j+".innerHTML=''");
cur_x = i;
cur_y = j;
}
if (i+1 < v_count && eval("puzzle_"+(i+1)+"_"+j+".innerHTML") == "") {
eval("puzzle_"+(i+1)+"_"+j+".innerHTML=puzzle_"+i+"_"+j+".innerHTML");
eval("puzzle_"+i+"_"+j+".innerHTML=''");
cur_x = i;
cur_y = j;
}
if (j-1 >= 0 && eval("puzzle_"+i+"_"+(j-1)+".innerHTML") == "") {
eval("puzzle_"+i+"_"+(j-1)+".innerHTML=puzzle_"+i+"_"+j+".innerHTML");
eval("puzzle_"+i+"_"+j+".innerHTML=''");
cur_x = i;
cur_y = j;
}
if (j+1 < h_count && eval("puzzle_"+i+"_"+(j+1)+".innerHTML") == "") {
eval("puzzle_"+i+"_"+(j+1)+".innerHTML=puzzle_"+i+"_"+j+".innerHTML");
eval("puzzle_"+i+"_"+j+".innerHTML=''");
cur_x = i;
cur_y = j;
}
if (shuffle_now==false) {complete_check();}
}
function shuffle() {
shuffle_now = true;
rnd_x = eval(cur_x + Math.round(Math.random()*2) - 1);
rnd_y = eval(cur_y + Math.round(Math.random()*2) - 1);
if (rnd_x<0) {rnd_x=0;}
if (rnd_y<0) {rnd_y=0;}
if (rnd_x>=v_count) {rnd_x=v_count-1;}
if (rnd_y>=h_count) {rnd_y=h_count-1;}
move_clip(rnd_x, rnd_y);
}
function shuffle_all() {
shuffle_rate = h_count*v_count*10;
for (i=0; i<shuffle_rate; i++) { shuffle(); }
shuffle_now=false;
}
function complete_check() {
miss_match = 0;
for (i=0; i<v_count; i++) {
for (j=0; j<h_count; j++) {
if (eval("clip_"+i+"_"+j+".parentElement.id.toString()") != "puzzle_"+i+"_"+j) {
miss_match = miss_match + 1;
}
}
}
if (miss_match==1) {
complete_job();
}
}
//-->
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<script language="JavaScript">
document.write("<div id='layer1'+ ' style='overflow:hidden; width:"+p_width+"px; height:"+p_height+"px; position:relative; left:0px; top:0px;'>");
for (i=0; i<v_count; i++) {
for (j=0; j<h_count; j++) {
left_position = j*cell_width;
top_position = i*cell_height;
rel_top_position = (i*cell_height)-(j*cell_height);
rel_top_position = rel_top_position - i*((h_count-1)*cell_height);
rel_top_position = rel_top_position - (i*cell_height);
document.write("<div id='puzzle_"+i+"_"+j+"' style='width:"+cell_width+"px; height:"+cell_height+"px; position:relative; left:"+(left_position + init_x)+"px; top:"+(rel_top_position + init_y)+"px; z-index:1; overflow : hidden;' onmouseover="this.style.cursor='hand'"; onclick='move_clip("+i+", "+j+")'>");
document.write("<img name='clip_"+i+"_"+j+"' src='"+p_img+"' border='0' style='position:relative; left:"+eval(left_position*(-1))+"px; top:"+eval(top_position*(-1))+"px; z-index:1;'>");
document.write("</div>");
}
}
document.write("</div>");
switch(blank_point) {
case 1:
eval("puzzle_0_0.innerHTML = ''");
cur_x = 0;
cur_y = 0;
break;
case 3:
eval("puzzle_"+(i-1)+"_0.innerHTML = ''");
cur_x = v_count - 1;
cur_y = 0;
break;
case 2:
eval("puzzle_0_"+(j-1)+".innerHTML = ''");
cur_x = 0;
cur_y = h_count - 1;
break;
case 4:
eval("puzzle_"+(i-1)+"_"+(j-1)+".innerHTML = ''");
cur_x = v_count - 1;
cur_y = h_count - 1;
break;
default:
eval("puzzle_"+(i-1)+"_"+(j-1)+".innerHTML = ''");
cur_x = v_count - 1;
cur_y = h_count - 1;
}
document.write("<input type='hidden' name='clip_"+cur_x+"_"+cur_y+"'>");
</script>
</td>
<td>
<img src="puzzle_copy.jpg" width="455" height="340" border="0">
</td>
</tr>
</table>
<br>
<input type=button value="섞기" onclick="shuffle_all()">
</body>
</html>
댓글 2
-
이봉찬
2003.11.06 08:51
-
김별
2003.11.06 10:04
var p_img = "puzzle_copy.jpg"; // 사용할 이미지
라고 되어 있으므로.. 위의 html 파일과 같은 경로에 puzzle_copy.jpg 라는 이름으로 그림을 넣으시면 됩니다.
절대경로, 상대경로 사용 가능합니다.
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 들어갈때 시작페이지 설정하는거... [2] | 쉿!비밀 | 2003.12.17 |
| 소스보기를 일부 차단하는 방법입니다. [12] | Juny. | 2003.12.12 |
오른버튼 누를때 메뉴 뜨게하기(깔끔버전)
[5]
 | 럽 | 2003.12.09 |
| 소스연구1 테이블 자동으로 늘었다 커지기 태클환영 [9] | 박한웅 | 2003.12.04 |
| 크리스마스 날짜 카운터 [1] | keymove | 2003.12.04 |
| 익스플로러에서 인쇄 누르면 페이지 이동.... [3] | 조한웅 | 2003.11.28 |
| 3D 효과의 원형 거울을 띄우자. [6] | 줄리앙 | 2003.11.21 |
| 팝업공지창 다시 안뜨게 하는 소스[날짜지정가능] [17] | lemin | 2003.11.20 |
| 자바로 만들어진 계산기 [1] | 현규웅 | 2003.11.20 |
| 동영상 오른쪽 버튼 방지 소스 입니다... [9] | 김성목 | 2003.11.15 |
| 플래시느낌의 유동적인 메뉴 [9] | jabusim | 2003.11.13 |
| 심플한 원단위를 콤마로 나타내주기 [2] | zentoo.com | 2003.11.11 |
| 날짜카운터 숫자로만 입력하자. [3] | TechnoKevin™ | 2003.11.08 |
| 정말 멋있는 글자 변환 스크립트 [12] | sythesis | 2003.11.07 |
| 자바스크립트로 작성한 그림맞추기 퍼즐게임 [2] | 김별 | 2003.11.05 |
| 자바스크립트로 윈도우 흉내내기 (?) [15] | 뒹굴리스트 | 2003.11.03 |
| 마우스 이벤트 발생시 문서 상,하단으로 이동 [3] | RedEye(kaist) | 2003.10.30 |
| 클릭하면 홈페이지를 시작페이지로 하는 소스... [7] | 젤군 | 2003.10.28 |
| 식대 계산기... ^^ [3] | 김주형 | 2003.10.27 |
| 더 이상의 필터링은 없다!!! [10] | 미친개 | 2003.10.26 |
자세히점 갈켜주세요~!
감사합니다~!