태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

자바스크립트로 작성한 그림맞추기 퍼즐게임 만들기

홈페이지

20년 전

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>퍼즐</title>
<script language="JavaScript">

</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>