묻고답하기
자바 스크립트 게임 완료 후 포인트 주는 방법을 몰라서요..
2005.01.27 05:21
JavaScript에 김별님께서 올리신 소스 입니다.
제가 이걸 홈페이지에 적용하려고 하는데
제로보드 포인트와 연동되게 하고 싶어서 열심히 찾아봤지만
도무지 할 수가 없더라고요ㅠ
퍼즐을 완성하면 포인트를 줄 수 있게 하는 방법을 아신다면 제발 가르쳐 주시기 바랍니다. (꾸벅)
(아, 그리고 제로보드(아웃로그인)이랑 연동 되어서 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>