imported>linflus at 06:53, 4 February 2011

2011-02-04T06:53:04Z

New page

[[jQuery]]를 사용한 ToyProgram

* 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년스터디/김수경]]

숫자야구/김수경 - Revision history

imported>linflus at 06:53, 4 February 2011