자바스크립트 타자 연습 게임

var sentence = new Sentence();
 
function Sentence(){
    this.word_data = new Array(
        "안녕하세요.",
        "가까운 무당보다 먼 데 무당이 용하다.",
        "가나다라도 모른다.",
        "사공 배 둘러대듯",
        "사기전에 종짓굽 맞추듯",
        "칼끝의 원쑤",
        "차 치고 포 친다.",
        "차돌에 바람 들면 석돌보다 못하다.",
        "바늘 가는 데 실 간다.",
        "바늘구멍으로 황소바람 들어온다.",
        "다 된 농사에 낫 들고 덤빈다.",
        "다 된 죽에 코 빠졌다.",
        "가난도 비단 가난",
        "가래장부는 본고을 좌수도 몰라본다.",
        "가랑잎이 솔잎더러 바스락거린다고 한다.",
        "고기 새끼 하나 보고 가마솥 부신다.",
        "그 아버지에 그 아들",
        "급하면 바늘허리에 실 매어 쓸까",
        "나 많은 말이 콩 마다할까",
        "나는 새에게 여기 앉아라 저기 앉아라 할 수 없다.",
        "누구네 제사날 기다리다가 사흘 굶은 거지 굶어 죽었다.",
        "눈을 떠도 코 베어 간다.",
        "눈이 아무리 밝아도 제 코는 안 보인다.",
        "달기는 엿집 할머니 손가락이라",
        "달아나는 노루 보고 얻은 토끼를 놓았다.",
        "두 손뼉이 맞아야 소리가 난다.",
        "뒷집 짓고 앞집 뜯어 내란다.",
        "아가리 마구 난 창구멍인가",
        "아는 걸 보니 소강절의 똥구멍에 움막 짓고 살았겠다.",
        "아직 이도 나기 전에 갈비를 뜯는다.",
        "자기 늙은 것은 몰라도 남 자라는 것은 안다.",
        "자식을 낳기보다 부모 되기가 더 어렵다.",
        "자식을 보기엔 아비만 한 눈이 없고 제자를 보기엔 스승만 한 눈이 없다.",
        "잔치는 잘 먹은 놈 잘 차렸다 하고 못 먹은 놈 못 차렸다 한다.",
        "잘 싸우는 장수에게는 내버릴 병사가 없고 글 잘 쓰는 사람에게는 내버릴 글자가 없다.",
        "칼치가 제 꼬리 베 먹는다.",
        "추어주면 엉뎅이 나가는 줄 모른다.",
        "자식 과년하면 부모가 반중매쟁이 된다.",
        "잔치 보러 왔다가 초상 본다.",
    );
 
    this.word = "";
    this.inputWord = "";
    this.timeSecond = 0;
    this.timeInt;
    this.timeFlag = true;
 
    this.wordTrueCnt = 0;
    this.typingSpeed = 0;
 
    this.setting = function(){
        var idx = Math.floor(Math.random(1)*this.word_data.length);
        this.word = this.word_data[idx];
        var wordString = this.obj("wordArea");
        var typingArea = this.obj("typingText");
        var timeArea = this.obj("typingTime");
 
        this.timeFlag = true;
        this.timeInt = window.clearInterval(sentence.timeInt);
        this.timeSecond = 0;
 
        this.wordTrueCnt = 0;
 
        wordString.html(this.word);
        typingArea.val("");
        typingArea.focus();
        timeArea.html(this.timeSecond)
    }
 
    this.obj = function(id){
 
        return $("#" + id);
    }
 
    this.keyUp = function(){
 
        this.chkMiss();
 
        var typingArea = this.obj("typingText"); 
 
        if(this.word.length <= typingArea.val().length){
 
            var wordAccuracy = Math.floor(this.wordTrueCnt / this.word.length*100);
            $("#accuracyText").text(wordAccuracy + "%");
            $("#accuracyDiv").css("width" , wordAccuracy + "%");
 
            var typingSpeed = Math.floor(this.wordTrueCnt / this.timeSecond * 6000);
            $("#typingSpeedText").text(typingSpeed + " 타/분");
            $("#typingSpeed").css("width" , typingSpeed/10 + "%");
 
 
 
            sentence.setting();
        }
    };
 
    this.chkMiss = function(){
        var result = "";
 
 
        var typingArea = this.obj("typingText"); 
        this.inputWord = typingArea.val();
        this.wordTrueCnt = 0;
 
        for(var i=0; i<this.word.length; i++){
 
            var chkWord = this.word.substring(i, i+1);
            var inputChkWord = this.inputWord.substring(i, i+1);
 
            if(chkWord != inputChkWord && i < this.inputWord.length ){
                result += "<font class='wordFalse'>" + chkWord +"</font>";
 
            }else{
 
                result += chkWord;
                this.wordTrueCnt++;
 
            }
        }
 
        var wordString = this.obj("wordArea");
        wordString.html(result); 
 
    };
 
    this.chkTime = function(e){
        if(this.timeFlag){
            this.timeFlag = false;
            this.timeSecond = 0;
            this.timeInt = window.setInterval("sentence.increaseTime()", 10)
        }
    }
 
    this.increaseTime = function(){
        this.timeSecond++;
    }
}
 
 
 
$(document).ready(function(){
    sentence.setting();
})
 
<style>
#wordArea{
    width:100%;
    height:100px;
    border:1px solid gray;
    margin-top:20px;
    font-size:25pt;
    color:navy;
    text-align:center;
    line-height:3em;
    background-color:#E9E9E9;
}
 
#typingArea{
    width:100%;
    border:1px solid gray;
    margin-top:20px;
    margin-bottom:40px;
    text-align:center;
    padding:30px 0;
    background-color:#E9E9E9;
}
 
#typingArea input{
    width:50%;
    height:30px;
    font-size:20pt;
}
 
.wordFalse{color:red;background-color:yellow;}
 
 
 
.accuracyArea tr th{
    border:1px solid gray;
    background-color:#E9E9E9;
}
 
.accuracyArea tr td{
    border:1px solid gray;
    background-color:lightgray;
    height:30px;
}
</style>
 
<div id="wordArea"></div>
<div id="typingArea">
    <input type="text" name="typingText" id="typingText" value="" onkeydown="sentence.chkTime(event)" onkeyup="sentence.chkMiss();" onkeypress="sentence.keyUp()">
</div>
 
 
<table width="100%" border="0" cellpadding="0" cellspacing="3" class="accuracyArea">
    <tr>
        <th width="10%;">정확도</th>
        <td bgcolor="lightgray">
            <div style="width:0;height:100%;background-color:#9BD374;" id="accuracyDiv">&nbsp;</div>
        </td>
        <th id="accuracyText" width="10%"></th>
    </tr>
 
    <tr>
        <th width="10%;">타수</th>
        <td bgcolor="lightgray">
            <div style="width:0;height:100%;background-color:#62BEFF;" id="typingSpeed">&nbsp;</div>
        </td>
        <th id="typingSpeedText" width="10%"></th>
    </tr>
</table>