웹마스터 팁
자바스크립트로 작성한 그림맞추기 퍼즐게임
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 라는 이름으로 그림을 넣으시면 됩니다.
절대경로, 상대경로 사용 가능합니다.
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 정말 멋있는 글자 변환 스크립트 [12] | sythesis | 2003.11.07 |
| 자바스크립트로 작성한 그림맞추기 퍼즐게임 [2] | 김별 | 2003.11.05 |
| 자바스크립트로 윈도우 흉내내기 (?) [15] | 뒹굴리스트 | 2003.11.03 |
| [초간단 자바스크립트!] 이미지 드래그하기..~~ [8] | ∑Ztxy | 2003.11.02 |
| 마우스 이벤트 발생시 문서 상,하단으로 이동 [3] | RedEye(kaist) | 2003.10.30 |
| 클릭하면 홈페이지를 시작페이지로 하는 소스... [7] | 젤군 | 2003.10.28 |
| 식대 계산기... ^^ [3] | 김주형 | 2003.10.27 |
| 더 이상의 필터링은 없다!!! [10] | 미친개 | 2003.10.26 |
| [초간단 자바스크립트!] 자바로 플래시 따라하기! [3] | ∑Ztxy | 2003.10.15 |
| 스물을 세면 죽음이야~~~ [20] | 미친개 | 2003.10.14 |
| [초간단 자바스크립트!] 트랜지션 공지사항!! | ∑Ztxy | 2003.10.13 |
| 플래시 크기 바꾸기 [IE/NS 겸용] [4] | teslaMINT | 2003.10.13 |
| 새창 띄운후 부모창 확인없이 닫기... [4] | PHASE | 2003.10.12 |
| 개판 오분전 - 이미지 뷰에 관한 한가지 힌트 [5] | 미친개 | 2003.10.11 |
| [초간단 자바스크립트!] 날짜 카운터! 커플홈에 강추!! [15] | ∑Ztxy | 2003.10.08 |
| 개판 오분전 만년달력......ㅡ,.ㅡ [4] | 미친개 | 2003.10.08 |
| 게시판 스킨에 프린트 버튼 추가하기 [3] | PHASE | 2003.09.30 |
| [초간단 자바스크립트!] 홈페이지에 FTP 폼 넣기?! [10] | ∑Ztxy | 2003.09.29 |
| [초간단 자바스크립트(강의)!] 입력박스에 입력한 주소로 이동하기... | ∑Ztxy | 2003.09.27 |
| [초간단 자바스크립트(강의)!] 풀스크린 창 띄우기... [3] | ∑Ztxy | 2003.09.27 |
자세히점 갈켜주세요~!
감사합니다~!