퍼즐 소스 봐주세요
본문
<html>
<head>
<title>4월이벤트</title>
<script language="JavaScript">
<!--
// 사용자 설정
var h_count = 3; // 가로로 쪼갤 갯수
var v_count = 3; // 세로로 쪼갤 갯수
var p_img = "http://mediamixhub.com/test/puzzle_copy.jpg"; // 사용할 이미지
var p_width = 622; // 이미지 폭
var p_height = 622; // 이미지 높이
var blank_point = 4; // 상좌: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>
<h1>그림퍼즐</h1><br><br>
<table>
<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="" width="622" height="622" border="0">
</td>
</tr>
</table>
<br><br>
<table width="70%">
<tr id="help">
<td colspan="2">
<h4>
<ol>
<li>테이블 안에 하나의 빈 칸으로 블럭을 마우스로 클릭하여 이동할 수 있습니다.</li>
<li>완성된 그림의 오른쪽과 비교하여, 퍼즐을 완성하여 주세요.</li>
<li>시작버튼을 누름과 동시에 게임이 시작됩니다.</li>
<li>게임을 끝냈거나, 게임을 중간에 마치고 싶으면 게임종료를 누르세요.</li>
</ol>
<center>
자!! 그림 퍼즐의 지존이 되는 그날까지.. 아자 아자 화이팅!!</center>
</h4>
</td>
</tr>
</table><br>
<form name="check_level">
<table>
<tr>
<td><input type=button name=start value="게임시작" onclick="shuffle_all()"></td>
<td><input type=button name=end value="게임 종료" onclick="javascript:window.close()"></td>
</tr>
</table>
</form>
</body>
</html>
이미지 조각 퍼즐 맞추기게임인데요..
익스플로러에서는 alert메세지(축하합니다.)가 잘 실행되는데,, 크롬에서는 메세지가 안뜹니다.
뭐가 문제 인지 고수님들 봐주세요
답변 3
에러 나는 이유가 퍼즐 게임을 실행시키면 퍼즐을 움직이기 위해서 하나가 없어집니다.
그영역이 clip_2_2가 되는데 이부분을 체크를 합니다..익스에서는 이걸 무시하는데.
크롬은 정확하게 반응하기때문에 이게 없다고 (not defined)하면서 에러가 납니다.
그래서 clip_2_2을 제외하게 끔 처리를 해야만 이부분은 해결이 됩니다.
바이올렛9820님 다시한번 설명드렸어요 ^^
크롬 콘솔창에서 complete_job() 쳐보니깐 축하합니다 alert창 뜨긴 뜨네요.
다른문제가 아닐까 싶습니다.
콘솔창에서 Uncaught ReferenceError: clip_2_2 is not defined
at eval (eval at complete_check (tt.html:84), <anonymous>:1:1)
at complete_check (tt.html:89)
at move_clip (tt.html:61)
at HTMLDivElement.onclick (tt.html:158)
이런 에러가 뜨는데...
해결 좀...플리즈.고수님들!
