웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
자바스크립트로 작성한 그림맞추기 퍼즐게임
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 라는 이름으로 그림을 넣으시면 됩니다.
절대경로, 상대경로 사용 가능합니다.
제목 | 글쓴이 | 날짜 |
---|---|---|
오늘의 명언을 출력해주는 함수 [10] | 김재경 | 2004.06.15 |
아이피 접근을 막고 메세지 출력하기.. [11] | ☺심심 | 2004.06.24 |
페이지에 암호를 걸자..=_= [27] | ☺심심 | 2004.06.25 |
파일업로드시 파일명 중복되지 않게 저장하기.. [8] | 페리 | 2004.06.28 |
서버가 느려졌을경우... [20] | 신상우 | 2004.06.28 |
<와 <=의 속도차이? [23] | 플로렐라 | 2004.07.07 |
++와 +=1 의 속도차이 [7] | 플로렐라 | 2004.07.12 |
히어닥 문법 활용 [14] | ☺심심 | 2004.07.13 |
트랙백 구현하기 - 3. PHP로 트랙백 핑 보내기
[4]
![]() | TheMics | 2004.07.18 |
트랙백 구현하기 - 4. PHP로 트랙백 핑 받기
![]() | TheMics | 2004.07.18 |
rand함수와 mt_rand함수의 비교 [6] | 심심타 | 2004.07.30 |
디비내용을 엑셀,워드,파워포인트 파일로 다운로드 시키는 방법 [13] | QQQ | 2004.07.30 |
php로 이미지를 mysql디비 저장하고 보여주는 소스 [2] | QQQ | 2004.07.30 |
IP 뒤에 두칸 글자 길이에 따라서 *로 나타내기 [13] | Sy-Tgt(stargt) | 2004.07.30 |
ISO 3166 국가코드로인한, 국가 검출소스 [4] | kein23 | 2004.08.04 |
파일업로드시 파일명 중복되지 않게 저장하기... [6] | 김지호 | 2004.08.06 |
PHP프로그램에 간단한 인증(로그인) 걸기. [15] | Lepas | 2004.08.09 |
접속자 IP 주소 텍스트로 저장 [7] | 천상원 | 2004.08.15 |
공유 메모리 제어에 관한 함수 정리 (공유메모리) [5] | Simsim | 2004.08.16 |
4. include, require 그리고 뽀나쓰~ [8] | 티다 | 2004.08.19 |
자세히점 갈켜주세요~!
감사합니다~!