[미니프로젝트] Number Baseball

Changyun Go·2021년 10월 13일

JavaScript 미니프로젝트

GitHub

요구사항

게임 시작 버튼 만들기
게임 시작 버튼을 클릭 했을때, 랜덤한 세 자리 숫자 만들기 (사용자에게 보여주진 않는다.)
숫자 입력칸 만들기
사용자가 엔터키를 클릭 했을때, 입력값이 세자리 숫자가 아닌 경우 경고창 띄워주기
사용자가 엔터키를 클릭 했을때, 2단계에서 생성한 숫자와 사용자의 입력값 비교하기
각 자리 별로 비교하고, 같은 자리에 같은 숫자가 몇개 있는지 판별한다. (스트라이크 갯수)
각 자리 별로 비교하고, 다른 자리에 같은 숫자가 몇개 있는지 판별한다. (볼 갯수)
화면에 스트라이크와 볼의 갯수를 표기한다.
사용자가 10회까지 시도할 수 있도록 제한한다.
게임 재시작 버튼을 만들고, 재시작 할 수 있도록 한다.

실행 화면

링크 : https://changyun-go.github.io/Mini-Project/3.%20Number%20Baseball/

Code

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="script.js" type="text/javascript" defer></script>
		<title>Number Baseball</title>
	</head>
	<body>
		<div id="title">⚾Number Baseball</div><br>
		<div class="container">
			<div class="item-1">
				<button id="start-btn" onclick="NumMaker()">START</button><br>
				<input id="num_input" type="number" onkeypress="enter()">
			</div>
			<div class="item-2">
				<div id="score-board"></div>
			</div>
		</div>
		</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');

body{
	margin: 0;
}
#title{
	background-color: red;
	font-family: 'Josefin Sans', sans-serif;
	text-align: center;
	font-size: 70px;
	height: 100px;
	border-bottom: 10px solid black;
}
#start-btn{
  appearance: none;
	font-family: 'Josefin Sans', sans-serif;
	display: block;
	width: 300px;
	height: 300px;
	margin: 70px auto 100px;
	font-size: 60px;
	border-radius: 150px;
	background-color: lightgray;
	box-shadow: 3px 3px 3px black;
	transition-duration: 0.3s;
}
#start-btn:active{
  box-shadow: none;
	margin-left: auto + 5px;
	margin-top: 75px;
}
#num_input{
	visibility: hidden;
	font-family: 'Josefin Sans', sans-serif;
	display: block;
	margin: 0px auto 50px;
	width: 300px;
	font-size: 110px;
	border: 10px solid black;
	border-radius: 20px;
}
#score-board{
	font-family: 'Nanum Brush Script', cursive;
	font-size: 55px;
	color: white;
	margin: 0px 0px 0px 50px;
	padding-top: 25px;
}
.container{
	display: flex;
	flex-direction: row;
}
.item-1{
	flex-basis: 50%;
}
.item-2{
	flex-basis: 50%;
	background-color: green;
	border: 20px solid #8B4513;
	margin-right: 50px;
}

JavaScript

let Number = 0;
let MyNum = 0;
let NumInput = document.querySelector("#num_input");
let ball = 0;
let strike = 0;
let count = 1;
let NewNum = 0;
let i = 0;
let j = 0;

function NumMaker(){
	Number = 0;
	count = 1;
	ball = 0;
	strike = 0;
	document.querySelector("#score-board").textContent = null;
	Number = Math.floor(Math.random() * 10).toString();
	for(i = 0; i < 2; i++){
		NewNum = Math.floor(Math.random() * 10).toString()
		if(Number[i] !== NewNum && Number[i-1] !== NewNum){
			Number += NewNum;
		}
		else{
			i--;
		}
	}
	document.querySelector("#num_input").style.visibility = "visible";
	document.querySelector("#start-btn").textContent = "RESTART";
	NumInput.value = null;
}

function enter(){
	ball = 0;
	strike = 0;
	if(event.keyCode == 13){
		MyNum = NumInput.value;
		if(MyNum.length !== 3){
			alert("세자리 숫자를 입력해주세요!");
		}
		else{
			for(j = 0; j < 3; j++){
				if(Number[j] === MyNum[j]){
					strike++;
				}
				else if(Number.includes(MyNum[j])){
					ball++;
				}
			}
			NumInput.value = null;
			if(strike === 3){
				confirm("WIN🎉\n다시 도전하시겠습니까?");
				NumMaker();
			}
			else if(ball === 0 && strike === 0){
				document.querySelector("#score-board").innerHTML += "<b>"+count+"회</b> &nbsp;&nbsp;"+"OUT &nbsp;&nbsp;"+MyNum+"<br>";
			}
			else{
				document.querySelector("#score-board").innerHTML += "<b>"+count+"회</b> &nbsp;"+ball+"B   &nbsp;"+strike+"S &nbsp;"+MyNum+"<br>";
			}
			count++;
			if(count === 11){
				confirm("LOSE😭\n다시 도전하시겠습니까?");
				NumMaker();
			}
		}
	}
}