길고 길었던 숫자야구
숫자야구란
참고 사이트: https://namu.wiki/w/숫자야구
옛날 중고등학교 시절에 종이와 펜만 있으면 가볍게 즐겼던 게임을 코딩을 하려하니..빙글빙글 돌기만 했다.
문법과 기본적인 것들을 다룰 줄 알았지만 유독 약했던 구현시키는 부분을 중점으로 공부를 진행했었다. 특히 제로초 강의를 들으면서 순서도를 그리는 방법과 잘게 쪼개는 부분들을 중점으로 설명을 해주셔서 그 부분을 집중적으로 공부를 했다.
const startForm = document.querySelector(".startForm"),
randomNum = document.querySelector(".randomNum"),
form = document.querySelector(".form"),
input = document.querySelector(".input"),
logs = document.querySelector(".logs");
let tries = [];
const numbers = [];
for (let i = 0; i < 9; i++) {
numbers.push(i + 1);
}
const answer = [];
for (let i = 0; i < 3; i++) {
const index = Math.floor(Math.random() * numbers.length);
answer.push(numbers[index]);
numbers.splice(index, 1);
}
function handleRandomNum(event) {
event.preventDefault();
randomNum.textContent = answer.join("");
randomNum.className = "active";
startForm.removeEventListener("click", handleRandomNum);
}
function checkInput(input) {
if (input.length !== 3) {
return alert("세 글자 이상 입력해주세요.");
}
if (new Set(input).size !== 3) {
return alert("중복된 값이 있습니다. 다시 입력해 주세요.");
}
if (tries.includes(input)) {
return alert("이미 입력하신 값입니다. 다시 입력해주세요.");
}
return true;
}
function handleClick(e) {
e.preventDefault();
const value = input.value;
input.value = "";
if (!checkInput(value)) {
return;
}
if (answer.join("") === value) {
logs.append(`홈런입니다`, document.createElement(`br`));
form.removeEventListener("submit", handleClick);
return;
}
if (tries.length >= 9) {
logs.append(
`10번초과 정답은 ${answer.join("")}`,
document.createElement(`br`)
);
form.removeEventListener("submit", handleClick);
return;
}
let strike = 0;
let ball = 0;
for (let i = 0; i < answer.length; i++) {
const index = value.indexOf(answer[i]);
if (index > -1) {
if (index === i) {
strike += 1;
} else {
ball += 1;
}
}
}
if (strike === 0 && ball === 0) {
logs.append(`${value}:아웃.`, document.createElement(`br`));
} else {
logs.append(
`${value}: 스트라이크:${strike} ball:${ball}`,
document.createElement(`br`)
);
}
tries.push(value);
}
function init() {
startForm.addEventListener("click", handleRandomNum);
form.addEventListener("submit", handleClick);
}
init();
숫자야구는 숫자 3개가 랜덤으로 나와서 사용자가 값을 입력했을 때, 같은 위치의 입력같이 갔다면 strike, 값은 같지만 위치가 다르면 ball 만약 세개 다 맞다면 홈런이고 세개 다 맞지 않다면 아웃이나와야 했다. 그리고 10번 초과를 하면 정답과 함께 답이 나와야했다.
그래서 처음에 number와 answer을 구하는 부분들을 배열로 구하고 join이라는 함수를 이용해 스트링으로 바꿔주고 정답을 찾게끔해주었다.
gamestart를 누르면 정답이 나오는데 그 부분을 검은 화면으로 가려주었다. 그래서 사용자가 gamestart를 누르고 값을 입력하고 그 입력한 값에 따라 strike, ball, out, homerun, 10번 초과 등이 나오게 해주었다.
가장 난감했던 부분은 글이 나오게 해주는 부분이였다. 모든 부분을 처음에는 textcontent로 해주다가. 10회까지 내가 입력한 값까지 포함시키려면 내가 입력한 값이 계속 아래부분에 나오게 해주어야했다. 그러나 textcontent는 값을 덮어버리기 때문에 쓸 수 없었고, append를 이용해서 요소 끝부분에 추가를 해주었다. 그러면 내가 입력한 값이 계속해서 아래에 추가가 되서 내가 입력한 값을 계속 볼 수 있게끔 구현시켰다.
보완해야될 점은
재시작같은 경우는 html의 특성상 버튼을 누르면 새로고침이 된다. 그러기에 아무때나 누르면 새로고침이 되서 다시 시작하게 된다.
또한 게임스타트를 누르지 않고 값을 입력해도 게임이 돌아간다. 게임스타트 -> 값을 입력이 아닌 값만 입력해도 게임이 시작 되기 때문에 그 부분을 수정해줘야 된다.
그래도 값이 잘 나오고, strike 와 ball 부분이 잘 나오기 때문에 그 부분이 매우 만족스럽지만 수정해야될 부분은 또 다른 숙제다.