2020. 1. 9. 17:10ㆍJAVASCRIPT
실행: https://codepen.io/ffuqgvsz/pen/eYmrYLW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>야구게임</title>
</head>
<body>
<h1>숫자 4자리를 입력하시오. 기회가 4번 남았습니다.</h1>
<form>
<!-- 최대 글자4 -->
<input type="text" maxlength="4" />
<button>확인</button>
<button class="reset">다시 풀기</button>
</form>
<script>
var h1 = document.querySelector("h1");
var form = document.querySelector("form");
var input = form.querySelector("input");
var resetBtn = form.querySelector(".reset");
var numArray; // 1~9 숫자 배열 변수
var randomArray; // 랜덤 숫자 4개 담을 배열 변수
var count; // 카운트 변수
var chance; // 기회 변수
function getNumber() {
numArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
randomArray = [];
count = 0;
chance = 4;
for (var i = 0; i < 4; i++) {
//splice(a,b) -> a번 배열부터 b개 배열을 추출하는 함수
//floor 소수점 아래를 무조건 버린다.
//랜덤으로 나온 배열[0]을 randomArray배열에 담는다.
var randomNum = numArray.splice(
Math.floor(Math.random() * (9 - i)),
1
)[0];
randomArray.push(randomNum);
}
}
getNumber();
console.log(randomArray);
form.addEventListener("submit", function(e) {
e.preventDefault();
var array = input.value;
count++;
chance--;
//join() -> 배열 > 문자열로 변환시키는 함수
if (array === randomArray.join("")) {
//정답이 맞을경우
h1.innerText = "정답 입니다!";
input.value = "";
input.focus;
getNumber();
} else {
//정답이 틀릴경우
//split() -> 문자 > 배열로 변환시키는 함수
var answerArray = array.split("");
var strike = 0;
var ball = 0;
for (var i = 0; i < 4; i++) {
if (Number(answerArray[i]) === randomArray[i]) {
//같은 자리의 숫자일 때
strike++;
} else if (randomArray.indexOf(Number(answerArray[i])) > -1) {
//자리는 다르지만 숫자가 포함될 때
ball++;
}
}
if (count > 3) {
//기회가 4번 이상
h1.innerText = `기회를 모두 소진했습니다. 정답은 ${randomArray}입니다.`;
input.value = "";
input.focus;
getNumber();
} else {
//기회가 3번 이하
h1.innerText = `${strike}Strike , ${ball}Ball 입니다. 기회가 ${chance}번 남았습니다.`;
input.value = "";
input.focus;
console.log(chance);
}
}
});
function reset() {
numArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
randomArray = [];
for (var i = 0; i < 4; i++) {
var randomNum = numArray.splice(
Math.floor(Math.random() * (9 - i)),
1
)[0];
randomArray.push(randomNum);
}
h1.innerText = "숫자 4자리를 입력하시오. 기회가 4번 남았습니다.";
console.log(randomArray);
}
resetBtn.addEventListener("click", function(e) {
e.preventDefault();
reset();
input.value = "";
input.focus();
count = 0;
chance = 4;
});
</script>
</body>
</html>
'JAVASCRIPT' 카테고리의 다른 글
| jQuery를 이용한 탭 메뉴 기능 (0) | 2020.01.12 |
|---|---|
| JS를 이용한 가위바위보 게임 (0) | 2020.01.10 |
| 동기와 비동기 (0) | 2020.01.09 |
| 클로저의 의미와 사용하는 이유 (2) | 2020.01.07 |
| $(function(){})를 사용하는 의미와 이유 (0) | 2020.01.07 |