사용자함수 낱말퍼즐 (낱말맞추기)게임 구현
페이지 정보

본문
$(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();
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;
}
}
$(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;
}
}
}
관련링크
- 이전글자바스크립트 전용 이벤트 핸들러 모음 15.05.15
- 다음글롤링배너함수 15.05.15
댓글목록
등록된 댓글이 없습니다.

