메인메뉴 바로가기

HOME으로 가기


사용자함수 낱말퍼즐 (낱말맞추기)게임 구현

페이지 정보

profile_image
작성자 너갱이
댓글 0건 조회 6,236회 작성일 15-05-15 15:53

본문

$(document).ready(function(){

    Q.init();
});
//낱말맞추기 퍼즐함수 구현 (2013.10.16 최낙영)
var Q = {
    orient : "garo",
    tempOverTextClass : null, //문제 마우스오버시에 textarea목록 클래스 변경을 위해 기존클래스명 저장.
    tempStr : [], //사용자 답안배열 임시저장소
    idx : -1, //현재 포커싱된 인덱스값
    letter : "",
    li_noclass : null,
    z_index : 1, //기본
    init : function(){
        
        $("#btns_number > li > button").click(
            function(){ 
                $("#"+this.parentNode.id.substring(4)+">textarea").focus();
            }
        );
        
        //포커싱에 맨 위로 올라오고 배경바꾸기
        $("#letter_box textarea").focus(
            function(){
                if(Q.li_noclass != null) {
                    $(Q.li_noclass).find("textarea").val("");
                    $(Q.li_noclass).attr({"class":"init"});
                    Q.li_noclass = null;
                }
                Q.z_index = $(this.parentNode).css("z-index");
                if( $(this.parentNode).attr("class") != "yes") { //정답을 푼 낱말은 skip.
                    $(this.parentNode).attr("class","typing");
                    
                    //포커싱된문제 표시하기
                    Q.onQuestion(this);
                }else{ 
                    this.blur();
                }
            }
        );
        
        //포커스아웃때 원래 z-index값과 원래배경으로..
        $("#letter_box textarea").blur(
            function(){ 
                Q.chkPass(this);
                Q.z_index = null;
                Q.onQuestion();
            }
        );
        
        //입력키 이벤트핸들러
        $("#letter_box textarea").keydown(function(e){if( e.keyCode == 13 ) this.blur();});
        
        //문제마우스오버 이벤트핸들러
        $("#letter_question a").hover(
            function(){
                var trgLi = $($(this).attr("href"));
                
                if( $(trgLi).attr("class") == "yes") {
                    $(trgLi).css("border","1px solid #f90");
                    return false;
                }
                Q.tempOverTextClass = $(trgLi).attr("class");    
                $(trgLi).find("textarea").focus();    
            },
            function(){
                var trgLi = $($(this).attr("href"));
                
                if( $(trgLi).attr("class") == "yes") {
                    $(trgLi).css("border","none");
                    return false;
                }
            }
        );
        
        //문제클릭 이벤트핸들러
        $("#letter_question a").click(
            function(){
                if( $( $(this).attr("href") ).attr("class") != "yes" ) $($(this).attr("href")+">textarea").focus();
            }
        );
        
        $("button.btn_try").click(function(){
            if(confirm("지금까지 풀었던 답까지 모두 초기화 하시겠습니까?"))    {
                $("#letter_box textarea").val("");
                $("#letter_box li").attr("class","init");
                Q.tempStr = [];    
            }
            this.blur();
            return false;
        });
        
        
        //정답 보여주기
        $("button.btn_quiz_hint").click(function(){
            var customAnswer = $("#letter_box textarea");
            var correctAnswer = $("#btns_number button");
            for(var i=0; i< $(customAnswer).length; i++){    
                if(Q.tempStr[i] != null) { //복구    
                    $(customAnswer).eq(i).focus();    
                    $(customAnswer).eq(i).val( Q.tempStr[i] ); //창고에서 사용자답안 복사하여 답안에 복사
                    if( i == ($(customAnswer).length-1) ) $(customAnswer).eq(i).blur();
                    Q.tempStr[i] = null;
                }else{ //정답복사
                    Q.tempStr[i] = $(customAnswer).eq(i).val(); //사용자 답안을 창고에 저장.    
                    $(customAnswer).eq(i).focus();                            
                    $(customAnswer).eq(i).val( $(correctAnswer).eq(i).val() ); //정답복사하여 사용자답안에 복사.
                    if( i == ($(customAnswer).length-1) ) $(customAnswer).eq(i).blur();
                }
            }
            this.blur();
            return false;
        });
    },
    
    chkPass : function(txt_area){
        var CustomStr = ($(txt_area).val());
        var CorectStr = $("#btn_"+txt_area.parentNode.id+" > button").val();
        if(CustomStr == CorectStr){
               $(txt_area).parent().attr({"class":"yes","readonly":"readonly"});
               return false;
        }else if(CustomStr ==""){
            $(txt_area).parent().attr({"class":"init"});
            return false;
        }else{
            Q.li_noclass = $(txt_area.parentNode);
            $(Q.li_noclass).attr({"class":"no"});
            return false;
        }
    },
    
    onQuestion : function(textArea){ //포커싱된 문제 표시하기
        if(Q.idx > -1) $("#letter_question a").eq(Q.idx).css("border","1px dotted transparent");
        if(textArea){
            var idx = $("#letter_box textarea").index(textArea);
            Q.idx = idx;
            $("#letter_question a").eq(idx).css("border","1px dotted red");
        }else{
            Q.idx = -1;
            return false;
        }
    },
    
    chkLetters : function(txt_area){
        Q.maxLen = $(txt_area).attr("maxlength");
        Q.maxLen *=2;
        var Str = $(txt_area).val();
        var OneChr;
        var StrByte = 0;
        var StrLen = 0;
        for(var i = 0 ; i < Str.length ; i++){
            //한글자추출
            OneChr = txt_area.value.charAt(i);
            if (escape(OneChr).length > 4){    // 한글이면...
                StrByte += 2;
            }else{    // 그외의 경우는.
                StrByte++;
                $(txt_area).attr("ime-mode","active");
                Str = Q.letter;
                return false;
            }
/*            if(StrByte < Q.maxLen){    // 전체 크기가 li_max를 넘지않으면
                 StrLen = i + 1;
            }*/
        }
           
        if(StrByte >= Q.maxLen){    // 전체길이를 초과하면
            //alert(" 글자를 초과 입력할수 없습니다. \n 초과된 내용은 자동으로 삭제 됩니다. ");
            str = Q.letter;
            return false;
        }else{
            Q.letter = Str;
        }
        
    }
        
    
    

} 

댓글목록

등록된 댓글이 없습니다.