[JS] 숫자야구

Chipmunk_jeong·2021년 4월 28일

자바스크립트실습

목록 보기

3/4

숫자야구

사용자에게 숫자 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();
})