숫자야구게임
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>숫자야구</title>
</head>
<body>
<form id="form">
<input type="text" id="input" />
<button>확인</button>
</form>
<div id="logs"></div>
<script>
const $input = document.querySelector("#input");
const $form = document.querySelector("#form");
const $logs = document.querySelector("#logs");
//1단계 임의의 4자리 숫자 생성
let answer = [];
while (answer.length < 4) {
num = Math.floor(Math.random() * 9 + 1);
if (!answer.includes(num)) {
answer.push(num);
}
}
console.log(answer);
//2단계 플레이어가 입력한 4자리 숫자 검증
const tries = [];
const checkInput = function (input) {
if (input.length !== 4) {
alert("4자리의 숫자를 입력해야 합니다.");
return false;
}
if (input.includes("0")) {
alert("숫자 0은 포함될 수 없습니다.");
return false;
}
if (new Set(input).size !== 4) {
alert("중복된 숫자는 입력할 수 없습니다.");
return false;
}
if (tries.includes(input)) {
alert("이미 시도한 값입니다.");
return false;
}
return true;
};
let outCnt = 0;
$form.addEventListener("submit", (event) => {
event.preventDefault();
const value = $input.value;
$input.value = ""; //입력한 글자를 지워주는 센스
if (!checkInput(value)) {
//if문 부정
return; //return문 추가
}
//입력값이 문제가 없는 경우
//1. 홈런인 경우
if (answer.join("") === value) {
$logs.innerHTML += "홈런입니다.<br>";
return;
}
//2. 패배한 경우
if (tries.length >= 9) {
const message = document.createTextNode(
`패배! 정답은 ${answer.join("")}`
);
$logs.appendChild(message);
return;
}
//2-1. 3아웃으로 패배한 경우
//몇 스트라이크 몇 볼인지 검사
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 (ball === 0) {
outCnt += 1;
$logs.append(`${outCnt}아웃입니다`, document.createElement("br"));
if (outCnt === 3) {
$logs.append(
document.createTextNode(`3아웃 패배! 정답은${answer.join("")}`)
);
outCnt = 0;
}
return;
}
$logs.append(
`${value}: ${strike} 스트라이크 ${ball}볼`,
document.createElement("br")
);
tries.push(value);
});
</script>
</body>
</html>
태그요소를 저장한 변수.addEventListener('액션', 콜백함수)
$form.addEventListener('submit', (event)=>{})
console창 사라지는 문제
form을 submit할 때 "새로고침"하는 기본동작이 수행된다.
따라서 변수에 저장된 데이터가 날라간다.
따라서 새로고침을 막기 위해서는 preventDefault()함수를 사용하여 기본동작을 제거한다.
preventDefault()
잠깐지식
document객체는 window객체에 속한다.
event객체는 document객체 속한다.
target객체는 event객체에 속한다.
target객체가 가지고 있는 속성: value, textContext
event.target[0]→ input태그 요소를 가리킴
event.target[1]→ button태그 요소를 가리킴
변수명에 $명과 _를 사용할 수 있다.
set의 자료형은 중복X
$logs.appendChild(message);
→div태그 안에 message를 덧붙인다.
태그를 저장한 변수.innerHTML = '1볼 1스트라이크 <br>홈런</br>';
태그를 저장한 변수.textContent = '오로지 문자열로만 인식'
document.createTextNode('추가할 글자')
→ 별도의 텍스트를 만들겠다.
$logs.append(document.createTextNode('추가할 글자'))
→별도의 텍스트를 현재 $logs(태그변수)에 추가하겠다.
document.createElement("br")
→ br태그를 추가하겠다.
for문과 indexOf()
문자열같은 경우 createElement()를 사용하지 않고,
$logs.append( '문자열', 태그, ..) 할 수 있다.
'렛츠기릿 자바스크립트' 카테고리의 다른 글
로또 만들기 - splice( )★★+태그요소만들기+className추가 +sort() (0) | 2023.01.15 |
---|---|
forEach, map, fill 알아보기 (0) | 2023.01.14 |
렛츠기릿 자바스크립트 8 - 숫자야구게임(for문, indexOf()) (0) | 2023.01.14 |
렛츠기릿 자바스크립트 7 (계산기) -self(연달아 계산) (0) | 2023.01.09 |
렛츠기릿 자바스크립트 7 (계산기) + 고차함수 + if중첩문 제거 (0) | 2023.01.08 |