baseball

카테고리 없음
baseball

yooky 2022. 1. 20. 13:53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#res {
	display: inline-block;
	vertical-align: top;
	width: 300px;
	height: 300px;
	border: 1px solid #444444;
	overflow-y: auto;
	font-size: 0pt;
}

#res div {
	font-size: 14pt;
}

#num {
	height: 30px;
	width: 238px;
	vertical-align: middle;
}

[type="button"] {
	width: 50px;
	height: 36px;
	vertical-align: middle;
}

.game_over {
	color: red;
	font-weight: bold;
}

.game_success {
	color: blue;
	font-weight: bold;
}
</style>
<script type="text/javascript">
var com = "";
var round = 0;
set();

function checkG(obj) {
	var num = document.getElementById("num");
	
	obj.disabled = true; // 누른버튼 비활성화
	
	num.value += obj.value; // 숫자누적
		
	if(num.value.length == 3) { // 3개의 버튼이 눌러졌을 때
		round++;
		
		var o = 0;
		var b = 0;
		var s = 0;
		
		for(var i = 0 ; i < num.value.length ; i++) {
			if(com.indexOf(num.value[i]) == -1) {
				o++;
			} else if(com.indexOf(num.value[i]) == i) {
				s++;
			} else {
				b++;
			}
		}
		
		var t = round + "회 - 입력값 : " + num.value + " [" 
			  + s + "S " + b + "B " + o + "O" + "]";
		
		if(s != 3 && round == 9) {
			var html = "<div class=\"game_over\">" + t + "</div>";
			document.getElementById("res").innerHTML += html;
			num.disabled = true;
			btnDisabled();
		} else if(s != 3) {
			var html = "<div>" + t + "</div>";
			document.getElementById("res").innerHTML += html;
			btnUndisabled();
		} else {
			var html = "<div class=\"game_success\">" + t + "</div>";
			document.getElementById("res").innerHTML += html;
			num.disabled = true;
			btnDisabled();
		}
		
		num.value = "";
	} 
}

// 버튼활성화
function btnUndisabled() {
	for(var i = 1 ; i < 10 ; i++) {
		document.getElementById("btn" + i).disabled = false;
	}
}

// 버튼비활성화
function btnDisabled() {
	for(var i = 1 ; i < 10 ; i++) {
		document.getElementById("btn" + i).disabled = true;
	}
}

function set() { // 중복없이 숫자뽑기
	com = "";
	
	for(var i = 0 ; i < 3 ; i++) {
		var a = Math.floor(Math.random() * 9) + 1;
		
		if(com.indexOf(a) == -1) {
			com += a;
		} else {
			i--;
		}
	}
	
	console.log(com);
}

// 초기화
function newG() {
	set();
	document.getElementById("res").innerHTML = "";
	round = 0;
	document.getElementById("num").disabled = false;
	btnUndisabled();
}
</script>
</head>
<body>
<h3>숫자야구</h3>
<input type="text" id="num" maxlength="3"
	   placeholder="1~9까지 숫자 3개를 입력하시오." readonly="readonly" />
<input type="button" value="리셋" onclick="newG();" /><br/>
<input type="button" id="btn1" value="1" onclick="checkG(this);" />
<input type="button" id="btn2" value="2" onclick="checkG(this);" />
<input type="button" id="btn3" value="3" onclick="checkG(this);" />
<input type="button" id="btn4" value="4" onclick="checkG(this);" />
<input type="button" id="btn5" value="5" onclick="checkG(this);" /><br/>
<input type="button" id="btn6" value="6" onclick="checkG(this);" />
<input type="button" id="btn7" value="7" onclick="checkG(this);" />
<input type="button" id="btn8" value="8" onclick="checkG(this);" />
<input type="button" id="btn9" value="9" onclick="checkG(this);" />
<br/>
<div id="res"></div>
</body>
</html>