숫자야구/김수경

Baseball.html

<html>
<head>
<title>ZeroPage</title>
    <link rel="stylesheet" type="text/css" href="Baseball.css" />
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script src="Baseball.js" type="text/javascript"></script>
</head>
<body>
    <div id="container" class="ui-widget">
        <h1>신나는 야구게임!</h1>
        <form onsubmit="return false;">
            세 자리 수 입력 : <input type="text" id="number" maxlength="3"/>
            <input type="submit" id="guess" value="Go!"/><br/>
            <div class="box ui-widget-content ui-corner-all" id="log" readonly="true"></div><br/>
            <input type="button" id="new" value="New Game"/>
            <span class="box ui-widget-content" id="notification">새 게임 시작 버튼을 눌러주세요.</span>
        </form>
    </div>
</body>
</html>

Baseball.js

(function ($, undefined) {
    var isNumber = function(key){
        return ((key >= 48) && (key <= 57)) || ((key >= 96) && (key <= 105));
    }

    var isSpecialKey = function(key){
        return (key === 13) || (key === 8) || (key === 37) || (key === 39) || (key === 46) || (key === 116);
    }
    var makeQuestion = function(){
        var number, index;
        for(index = 0; index < 3; index++){
            do{
                number = makeNumber();
            }while(isIn(number, answer));
            answer[index] = number;
        }
    }

    var isIn = function(number, set){
        for(var i in set){
            if(number === set[i]) return true;
        }
        return false;
    }
    
    var makeNumber = function(){
        return Math.floor(Math.random() * 10);
    }

    var checkNumber = function(number){
        var strike = 0, ball = 0;
        for(var index = 0; index < 3; index++){
            if(isBall(number, index)) ball++;
            if(isStrike(number, index)) strike++;
        }
        printResult(strike, ball);
    }

    var printResult = function(strike, ball){
        var log = $("#log");
        log.append(count + ">>> [" + $("#number").val() + "] ");
        if(strike === 3){
            log.append("Bingo!<br/>");
            endGame();
        }else{
            log.append(strike + " strike, " + ball + " ball.<br/>");
        }
        log.scrollTop(999999999);
    }

    var endGame = function(){
        //$("#number").readonly = "true";
    }

    var isProper = function(input){
        return (input.length === 3)
    }

    var getNumber = function(number, input){
        var index, square;
        for(index = 0; index < 3; index++){
            square = Math.pow(10, 2-index);
            number[index] = Math.floor(input/square);
            input -= number[index]*square;
        }
    }

    var isBall = function(number, index){
        return ((number[index] === answer[(index+1)%3]) || (number[index] === answer[(index+2)%3]));
    }

    var isStrike = function(number, index){
       return number[index] === answer[index];
    }

    $(document).ready(function() {
        $(":button, :submit").button();
        $("#new").click(function (){
            $("#notification").text("새로운 게임이 시작되었습니다.");
            $("#log").html("새 게임 시작>>><br/>");
            //$("#number").readonly = "false";
            answer = [];
            count = 0;
            makeQuestion();
            $("#number").focus();
        });
        $("form").submit(function (){
            var number = [], input = $("#number").val();
            if(isProper(input)){
                count++;
                getNumber(number, input);
                checkNumber(number);
            }
            $("#number").val("");
        });
        $("#number").keydown(function(e){
            if(!(isNumber(e.keyCode) || isSpecialKey(e.keyCode))){
                return false;
            }
        });
        $("#container").dialog({width: "380px", resizable: "false", title: "Linflus"});
    });
}) (jQuery);

Baseball.css

*{
    font-family: 'NanumGothic', '나눔고딕', sans-serif;
    font-size: small;
}
h1 {
    font-family: 'NanumPen', '나눔손글씨 펜', sans-serif;
    font-size: 50px;
    text-align: center;
    color: deepskyblue;
}

.box{
    width: 100%;
}
#notification{
    display: block;
    position: relative;
    top: 13px;
    border-width: 1px 0 0 0;
    padding-top: 2px;
    clear: both;
}

#log{
    height: 100px;
    overflow: auto;
    padding: 2px;
    clear: both;
}

#number{
    width: 40%;
}

#new, #guess{
    float: right;
}

숫자야구, JavaScript/2011년스터디/김수경

숫자야구/김수경 (rev. 1.1)

숫자야구/김수경