초성으로 맞추는 단어 퍼즐

초성으로 맞추는 단어 퍼즐

HTML

<div id="wrap">

<div class="wrap_inner">

<div class="intro_box">

<h2>초성으로 알아보는 단어 퍼즐</h2>

<div class="input_box">

<input type="text" class="user_check">

<a href="javascript:;" class="btn_result">결과 확인</a>

</div>

</div>

<div class="result_box">

<p><span class="user_name"></span>방갑습니다.</p>

<div class="value_box">

<span class="cho0"></span>

<span class="cho1"></span>

<span class="cho2"></span>

</div>

<ul class="result_list">

<li class="on">초성 타입 a입니다.</li>

<li>초성 타입 b입니다.</li>

<li>초성 타입 c입니다.</li>

</ul>

<a href="javascript:;" class="btn_reset">다시 하기</a>

</div>

</div>

</div>

CSS

<style>

#wrap{ max-width:720px; margin:0 auto;}

.wrap_inner{ padding-top:50px;}

.intro_box{ padding: 20px;}

.intro_box h2{ font-size:34px; text-align: center; padding-bottom:20px;}

.intro_box input{ display:block; width:250px; height:35px; margin:0 auto 30px;}

.intro_box .btn_result{ display:block; width:250px; height:40px; line-height: 40px; background:#000; color:#fff; text-align: center; margin:0 auto;}

.result_box{ display:none; text-align: center; }

.result_list li{ display:none; }

.result_list li.on{ display:block; }

.btn_reset{ display:block; width:250px; height: 40px; line-height: 40px; background:#000; color:#fff; text-align: center; margin: 10px auto 0; }

</style>

JAVASCRIPT

var _w;

var _introBox;

var _inputValue;

var _resultBox;

var _resultName;

var _btnResulit;

var _resultList;

var _btnReset;

//첫번재 초성

var _cho1 = [

"남자친구랑",

"남자친구랑",

"아침부터",

"직장 상사랑",

"직장 상사랑",

"여자친구랑",

"하루종일",

"한밤중에",

"한밤중에",

"버스 안에서",

"버스 안에서",

"오늘 저녁",

"꿈속에서",

"꿈속에서",

"회사에서",

"점심시간에",

"지나가던 강아지랑",

"눈 뜨자마자",

"미친듯이"

];

//두번째 초성

var _cho2 = [

"치맥먹고",

"치맥먹고",

"여유롭게",

"아무도 모르게",

"아무도 모르게",

"TV보다",

"술마시다",

"시끄럽게",

"시끄럽게",

"야식먹고",

"야식먹고",

"누워서",

"삼겹살 굽다가",

"삼겹살 굽다가",

"볼일보다가",

"손잡고",

"처음보는 사람과",

"낮잠을 자다가",

"운동하고"

];

//세번쨰 초성

var _cho3 = [

"복근이 생긴다",

"복근이 생긴다",

"모발이 굵어진다",

"심장이 튼튼해진다",

"심장이 튼튼해진다",

"천리안이 된다",

"방귀를 시원하게 뀐다",

"피곤이 사라진다",

"피곤이 사라진다",

"회춘한다",

"회춘한다",

"심신이 안정된다",

"다이어트에 성공한다",

"다이어트에 성공한다",

"허리가 펴진다",

"근육이 생긴다",

"치아가 하애진다",

"어깨가 넓어진다",

"안색이 좋아진다"

];

function init()

{

create();

addEvent();

}

function create()

{

_w = $( window );

_introBox = $( ".intro_box" );

_inputValue = _introBox.find( "input" );

_btnResult = $( ".btn_result" );

_resultBox = $( ".result_box" );

_resultName = _resultBox.find( ".user_name" );

_resultList = _resultBox.find( ".result_list" ).children( "li" );

_btnReset = $( ".btn_reset" );

}

function addEvent()

{

_btnResult.on( "click", btnResultClick );

_btnReset.on( "click", btnResetClick );

}

function getChoHangul( $str ){

var cho = [

"ㄱ",

"ㄲ",

"ㄴ",

"ㄷ",

"ㄸ",

"ㄹ",

"ㅁ",

"ㅂ",

"ㅃ",

"ㅅ",

"ㅆ",

"ㅇ",

"ㅈ",

"ㅉ",

"ㅊ",

"ㅋ",

"ㅌ",

"ㅍ",

"ㅎ"

];

var result = { cho : "", index: [] };

var i = 0;

var len = $str.length;

for( i; i < len; i++ ){

var code = $str.charCodeAt( i ) - 44032;

if( code > -1 && code < 11172 ){

result.cho += cho[ Math.floor ( code / 588 ) ];

result.index.push( Math.floor ( code / 588 ) );

}

}

return result;

}

function btnResultClick( $e )

{

$e.preventDefault();

var result = {};

var userName = _inputValue.val();

//인풋에 공백검사

if( _inputValue.val().replace(/\s/g,"").length <= 1 ){

alert( "입력하지 않았습니다. 이름을 입력해주세요." );

}else{

//이름 가공

userName = getName( userName );

result = getChoHangul( userName );

if( result.cho == "" ){

alert( "올바른 이름을 입력해주세요." );

return;

}

showResult( userName );

showCho( result );

showInfo( result );

}

}

function showResult( $resultValue )

{

_introBox.css( "display", "none" );

_resultBox.css( "display" , "block" );

_resultName.text( $resultValue );

}

//검색한 결과값 가져오기

function showCho( $result )

{

var value0 = "";

var value1 = "";

var value2 = "";

if( $result.index.length == 2 ){

value0 = getCho( "CH01", $result.index[ 0 ] );

value1 = getCho( "CH03", $result.index[ 1 ] );

}else if( $result.index.length == 3 ){

value0 = getCho( "CH01", $result.index[ 0 ] );

value1 = getCho( "CH02", $result.index[ 1 ] );

value2 = getCho( "CH03", $result.index[ 2 ] );

}

_resultBox.find( ".cho0" ).text( value0 );

_resultBox.find( ".cho1" ).text( value1 );

_resultBox.find( ".cho2" ).text( value2 );

}

function getCho( $type, $index )

{

switch( $type )

{

case "CH01" :

return _cho1[ $index ];

break;

case "CH02" :

return _cho2[ $index ];

break;

case "CH03" :

return _cho3[ $index ];

break;

}

}

function getName( $name )

{

var userName = "";

var i = 0;

var len = 3;

for( i; i < len; i ++ ){

userName += $name.substr( i, 1 );

}

return userName;

}

function showInfo( $result )

{

var index = $result.index[ $result.index.length - 1 ];

var list = $( ".result_list" ).children( "li" );

list.removeClass( "on" );

var num = 0;

if( index <= 6 ) num = 0;

else if( index <= 14 ) num = 1;

else num = 2;

list.eq( num ).addClass( "on" );

}

function btnResetClick( $e )

{

$e.preventDefault();

showReset();

}

function showReset()

{

_introBox.css( "display", "block" );

_resultBox.css( "display" , "none" );

_resultName.text( "" );

_inputValue.val( "" );

}

예제샘플

http://ux.adqua.co.kr/ux/ixkfo86/test/choseong/choseong.html