[JS] 숫자야구
숫자야구
사용자에게 숫자 4자리를 입력받아 숫자야구 게임을 하는 코드를 만들어 보았다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="./main.js" defer></script>
<title>numberBaseball</title>
</head>
<body>
<main class="container">
<h1>BASEBALL GAME</h1>
<ul class="chances">
<!-- <li class="chance"> (시도횟수: 1) [[입력값 : 1234]] => Strike: 1, Ball: 2</li> -->
</ul>
<div class="input">
<input type="text">
</div>
</main>
<button class="reset">Reset</button>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container {
background-color: aliceblue;
border: 4px solid black;
border-radius: 20px;
padding: 15px;
width: 500px;
text-align: center;
}
.chances {
width: 100%;
height: 500px;
background-color: white;
border: 1px solid black;
border-radius: 15px;
padding: 10px;
list-style: none;
overflow: auto;
}
.chance {
margin: 10px 0;
}
.reset {
margin-top: 20px;
border: 1px solid lightblue;
background-color: white;
border-radius: 50%;
width: 50px;
height: 50px;
transition: background-color 100ms ease-in;
}
.reset:hover {
background-color: aquamarine;
}
.read-only {
background-color: lightgray;
JavaScript
// [숫자야구]
/*
[수도코드]
---> loop
1. 랜덤한 4자리 숫자 생성 (숫자 중복 x)
2. 사용자에게 값을 입력받는다.
3. 답과 일치하는가?
-> 해당 답과 시도 횟수를 출력한다. -> 중지
-> strike와 ball을 판단하여 알려준다.
--->
*/
const ul = document.querySelector('ul');
let tryCount = 0;
let result = reset();
function reset() {
let temp = [];
while (temp.length < 4) {
let randNumber = String(Math.floor(Math.random() * 10));
if (temp.indexOf(randNumber) === -1) {
temp.push(randNumber);
}
}
const li = document.createElement('li');
li.textContent = '랜덤한 4자리 숫자가 생성됬습니다 !';
li.classList.add('chance');
ul.append(li);
return temp;
}
//[이벤트 핸들러] 입력한 값에 대한 결과 출력
function checkInputValue() {
tryCount++;
const inputValue = document.querySelector('.input input').value;
const splitInput = inputValue.split('');
let strike = 0;
let ball = 0;
splitInput.forEach((el, idx, arr) => {
if (el === result[idx]) {
strike++;
}
else if (result.indexOf(el) !== -1) {
ball++;
};
})
if (strike === 4) {
success(splitInput);
input.readOnly = true;
input.classList.add('read-only')
} else {
fail(splitInput, strike, ball);
}
input.value = '';
}
//success
function success(splitInput) {
const li = document.createElement('li');
li.textContent = `(시도횟수: ${tryCount}) [입력값: ${splitInput.join('')}] 4Strike!! 축하합니다!`;
li.classList.add('chance');
ul.append(li);
}
//fail
function fail(splitInput, strike, ball) {
const li = document.createElement('li');
li.textContent = `(시도횟수: ${tryCount}) [입력값: ${splitInput.join('')}] => Strike: ${strike}, Ball: ${ball}`;
li.classList.add('chance');
ul.append(li);
}
const input = document.querySelector('.input input');
const resetBtn = document.querySelector('.reset');
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
checkInputValue();
}
})
resetBtn.addEventListener('click', () => {
ul.textContent = '';
reset();
})
OUTPUT
사용자에게 숫자 4자리를 입력받아 숫자야구 게임을 하는 코드를 만들어 보았다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="./main.js" defer></script>
<title>numberBaseball</title>
</head>
<body>
<main class="container">
<h1>BASEBALL GAME</h1>
<ul class="chances">
<!-- <li class="chance"> (시도횟수: 1) [[입력값 : 1234]] => Strike: 1, Ball: 2</li> -->
</ul>
<div class="input">
<input type="text">
</div>
</main>
<button class="reset">Reset</button>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container {
background-color: aliceblue;
border: 4px solid black;
border-radius: 20px;
padding: 15px;
width: 500px;
text-align: center;
}
.chances {
width: 100%;
height: 500px;
background-color: white;
border: 1px solid black;
border-radius: 15px;
padding: 10px;
list-style: none;
overflow: auto;
}
.chance {
margin: 10px 0;
}
.reset {
margin-top: 20px;
border: 1px solid lightblue;
background-color: white;
border-radius: 50%;
width: 50px;
height: 50px;
transition: background-color 100ms ease-in;
}
.reset:hover {
background-color: aquamarine;
}
.read-only {
background-color: lightgray;
// [숫자야구]
/*
[수도코드]
---> loop
1. 랜덤한 4자리 숫자 생성 (숫자 중복 x)
2. 사용자에게 값을 입력받는다.
3. 답과 일치하는가?
-> 해당 답과 시도 횟수를 출력한다. -> 중지
-> strike와 ball을 판단하여 알려준다.
--->
*/
const ul = document.querySelector('ul');
let tryCount = 0;
let result = reset();
function reset() {
let temp = [];
while (temp.length < 4) {
let randNumber = String(Math.floor(Math.random() * 10));
if (temp.indexOf(randNumber) === -1) {
temp.push(randNumber);
}
}
const li = document.createElement('li');
li.textContent = '랜덤한 4자리 숫자가 생성됬습니다 !';
li.classList.add('chance');
ul.append(li);
return temp;
}
//[이벤트 핸들러] 입력한 값에 대한 결과 출력
function checkInputValue() {
tryCount++;
const inputValue = document.querySelector('.input input').value;
const splitInput = inputValue.split('');
let strike = 0;
let ball = 0;
splitInput.forEach((el, idx, arr) => {
if (el === result[idx]) {
strike++;
}
else if (result.indexOf(el) !== -1) {
ball++;
};
})
if (strike === 4) {
success(splitInput);
input.readOnly = true;
input.classList.add('read-only')
} else {
fail(splitInput, strike, ball);
}
input.value = '';
}
//success
function success(splitInput) {
const li = document.createElement('li');
li.textContent = `(시도횟수: ${tryCount}) [입력값: ${splitInput.join('')}] 4Strike!! 축하합니다!`;
li.classList.add('chance');
ul.append(li);
}
//fail
function fail(splitInput, strike, ball) {
const li = document.createElement('li');
li.textContent = `(시도횟수: ${tryCount}) [입력값: ${splitInput.join('')}] => Strike: ${strike}, Ball: ${ball}`;
li.classList.add('chance');
ul.append(li);
}
const input = document.querySelector('.input input');
const resetBtn = document.querySelector('.reset');
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
checkInputValue();
}
})
resetBtn.addEventListener('click', () => {
ul.textContent = '';
reset();
})
느낀점
- dom 조작법을 실습할 수 있어서 좋았다.
- 클래스 이름과 변수 이름선정이 어려웠다.
- 코드 가독성이 떨어지는 것같아 리팩토링을 해봐야겠다.
Author And Source
이 문제에 관하여([JS] 숫자야구), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wldns12378/JS-숫자야구저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)