개발_자
2024. 6. 17. 12:35
숫자 기억 게임(4)
본격 함수 만들기 ! (3)
시도 횟수와 힌트 만드는 것을 목표로 어떻게 돌아갈지 적어보았다.
시작버튼 클릭 시 시도 횟수 3으로 초기화
제출버튼 클릭 시 시도 횟수 하나씩 감소
시도 횟수 0이 되면 게임 끝
<script>
// 입력된 값과 저장된 값(난수) 비교 (시도 횟수가 0보다 클 경우)
if (attemptsLeft > 0) {
if (Number(value) === Number(save)) {
// 값이 같을 경우
document.getElementById("answer").innerText = "정답입니다~!!";
document.getElementById("attempt").innerText = "";
document.getElementById("submit").disabled = true; //제출버튼 비활성화
document.getElementById("inputN").disabled = true; //인풋 비활성화
} else {
if (Number(value) > Number(save)) {
//입력한 값이 더 클 경우
document.getElementById("answer").innerText =
value + " 오답입니다. DOWN!";
document.getElementById("attempt").innerText =
"기회 " + attemptsLeft + "번 남았습니다.";
} else {
//입력한 값이 더 작을 경우
document.getElementById("answer").innerText =
value + " 오답입니다. UP!";
document.getElementById("attempt").innerText =
"기회 " + attemptsLeft + "번 남았습니다.";
}
}
} else {
//시도(남은) 횟수가 0일경우
document.getElementById("answer").innerText =
"오답입니다. 정답은 " + save + "!!";
document.getElementById("submit").disabled = true; //제출버튼 비활성화
document.getElementById("inputN").disabled = true; //인풋 비활성화
document.getElementById("attempt").innerText = "아쉽지만 다음 기회에..";
}
}
</script>
난수가 `2720`이 나왔다 가정하고
인풋에 `27190`을 입력하면
바보가 업을 하란다
그래서 입력한 값과 저장한 값에 `Number()`를 붙였다
<script>
// ||:논리or연산자, 숫자가 아니'거나' 비어 있는데 제출버튼을 눌렀을 경우
if (isNaN(value) || value === "") {
document.getElementById("answer").innerText =
"유효한 숫자를 입력하세요.";
document.getElementById("attempt").innerText =
"기회 " + attemptsLeft + "번 남았습니다.";
if (attemptsLeft === 0) {
// 시도(남은) 횟수가 0일 경우
document.getElementById("answer").innerText =
"오답입니다. 정답은 " + save + "!!";
document.getElementById("attempt").innerText =
"아쉽지만 다음 기회에..";
document.getElementById("submit").disabled = true; //제출버튼 비활성화
document.getElementById("inputN").disabled = true;
}
return; //함수 종료
}
</script>
인풋에 `ㅇㄹㅇㄹ`이나 빈 값을 입력하면
이 바보가 또 업을 하란다
그래서 값을 비교하기 전,
논리or연산자를 사용하여 `if`문을 하나 더 만들었다
<script>
document.getElementById("submit").disabled = true;
document.getElementById("inputN").disabled = true;
</script>
인풋과 제출을 비활성화시켜 바로 시작버튼을 클릭하게끔 만들었다
<script>
inputElement.value = ""; // input 넣은 값을 빈문자열로
</script>인풋에 입력한 값 일일이 지우는 그런 귀찮음..
시작버튼과 제출버튼 클릭시
바로바로 지워지게끔 빈문자열을 넣었다.
그렇게 완성된 숫자 기억 게임
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>숫자 기억 게임</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap");
* {
font-family: "Noto Sans KR", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
body {
background-color: #f0f0f0;
}
.card {
background-color: white;
width: 370px;
height: 180px;
margin: 100px auto;
padding: 35px 20px 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border: 2px solid white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.box {
display: flex;
gap: 10px;
height: 30px;
width: 85%;
justify-content: space-between;
margin-top: 103px;
}
.box button {
width: 50px;
margin-left: 4px;
height: 30px;
}
h1 {
position: absolute;
margin-top: 8px;
}
h2 {
position: absolute;
margin-top: 60px;
color: rgb(182, 16, 16);
}
h3 {
position: absolute;
margin-top: 64px;
color: rgb(182, 16, 16);
}
p {
position: absolute;
padding-top: 122px;
color: rgb(182, 181, 181);
font-size: 14px;
}
</style>
</head>
<body>
<div class="card">
<h1>숫자 기억 게임</h1>
<h2 id="number"></h2>
<div class="box">
<input
type="text"
id="inputN"
placeholder="숫자를 입력하세요"
maxlength="4"
/>
<div>
<button id="start">시작</button>
<button id="submit">제출</button>
</div>
</div>
<h3 id="answer"></h3>
<p id="attempt">3초 안에 숫자를 기억해라!</p>
</div>
</body>
<script>
// 초기 시도 횟수 선언
let attemptsLeft;
// 함수 밖 변수 선언(막 부르기 편하라고) -> {범위(중괄호)에 구애받지 않고 변수를 사용할 수 있도록 하기 위함} 공부 키워드: 전역변수와 멤버변수
let save;
let numberElement;
document.getElementById("submit").disabled = true;
document.getElementById("inputN").disabled = true;
// 시작버튼 클릭 시 remember함수 작동
const start = document.getElementById("start");
start.addEventListener("click", remember);
// 제출버튼 클릭 시 check함수 작동
const submit = document.getElementById("submit");
submit.addEventListener("click", check);
function remember() {
document.getElementById("answer").innerText = ""; // 시작버튼 클릭 시 "answer"사라짐
document.getElementById("attempt").innerText = "기회는 3번 주어집니다.";
document.getElementById("inputN").disabled = false;
document.getElementById("submit").disabled = false; // 제출버튼 활성화
attemptsLeft = 3; // 시도 횟수 3으로 초기화
// <h2>에 난수 설정
numberElement = document.getElementById("number");
numberElement.innerText = Math.floor(Math.random() * 9000 + 1000);
// 난수 저장
save = numberElement.innerText;
//숫자 3초 뒤 숨기기
setTimeout(function () {
numberElement.innerText = ""; //빈문자열을 넣어 숫자 사라짐
}, 3000); //3초 설정
document.getElementById("inputN").value = ""; // 인풋에 입력한 값 빈문자열로
}
function check() {
numberElement.innerText = ""; //제출버튼 클릭 시 numberElement 사라짐
attemptsLeft--; //제출버튼 클릭 시 횟수 감소
let inputElement = document.getElementById("inputN");
let value = inputElement.value; // 입력 요소의 값을 가져옴
// ||:논리or연산자, 숫자가 아니'거나' 비어 있는데 제출버튼을 눌렀을 경우
if (isNaN(value) || value === "") {
document.getElementById("answer").innerText =
"유효한 숫자를 입력하세요.";
document.getElementById("attempt").innerText =
"기회 " + attemptsLeft + "번 남았습니다.";
if (attemptsLeft === 0) {
// 시도(남은) 횟수가 0일 경우
document.getElementById("answer").innerText =
"오답입니다. 정답은 " + save + "!!";
document.getElementById("attempt").innerText =
"아쉽지만 다음 기회에..";
document.getElementById("submit").disabled = true; //제출버튼 비활성화
document.getElementById("inputN").disabled = true;
}
inputElement.value = "";
return; //함수 종료
}
// 입력된 값과 저장된 값(난수) 비교 (시도 횟수가 0보다 클 경우)
if (attemptsLeft > 0) {
if (Number(value) === Number(save)) {
// 값이 같을 경우
document.getElementById("answer").innerText = "정답입니다~!!";
document.getElementById("attempt").innerText = "";
document.getElementById("submit").disabled = true; //제출버튼 비활성화
document.getElementById("inputN").disabled = true; //인풋 비활성화
} else {
if (Number(value) > Number(save)) {
//입력한 값이 더 클 경우
document.getElementById("answer").innerText =
value + " 오답입니다. DOWN!";
document.getElementById("attempt").innerText =
"기회 " + attemptsLeft + "번 남았습니다.";
} else {
//입력한 값이 더 작을 경우
document.getElementById("answer").innerText =
value + " 오답입니다. UP!";
document.getElementById("attempt").innerText =
"기회 " + attemptsLeft + "번 남았습니다.";
}
}
} else {
//시도(남은) 횟수가 0일경우
document.getElementById("answer").innerText =
"오답입니다. 정답은 " + save + "!!";
document.getElementById("submit").disabled = true; //제출버튼 비활성화
document.getElementById("inputN").disabled = true; //인풋 비활성화
document.getElementById("attempt").innerText = "아쉽지만 다음 기회에..";
}
inputElement.value = ""; // input 넣은 값을 빈문자열로
}
</script>
</html>
다음엔 타이머도 ..?
