숫자 맞추기 실습을 선생님 코드로 알아보다.
선생님 코드에 내가 생각한 사용자의 편의를 더한 코드이다.
<!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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Do+Hyeon:400" rel="stylesheet">
<style>
body{
background: url("https://media.istockphoto.com/photos/clear-blue-sky-as-a-background-wallpaper-pastel-sky-wallpaper-picture-id608634136?k=20&m=608634136&s=170667a&w=0&h=QqB80Ci9iSHOw0OjdM1fNbEeDrSvHG7-YuXNf_TcQnE=");
background-repeat: no-repeat;
background-size: cover;
text-align: center;
height: 100vh;
font-family: "do hyeon";
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 25px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
#result-area,
#chance-area {
font-size: 1.5em;
}
#user-input {
width: 300px;
height: 50px;
font-size: 1.5em;
text-align: center;
margin-top: 10px;
outline: 0;
border: 0;
border-radius: 10px;
}
#btn-area{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>숫자 맞추기 게임</h1>
<div id="result-area">결과값이 여기 나옵니다!</div>
<div id="chance-area">남은 기회:5번</div>
<input type="text" id="user-input" placeholder="숫자를 입력하세요.">
<div id="btn-area">
<button id="play-button" class="btn btn-success">확인</button>
<button id="reset-button" class="btn btn-danger">초기화</button>
</div>
</div>
<!-- JavaScript -->
<script>
/*
[숫자 맞추기 게임]
1.랜덤숫자 생성하기
2.유저는 숫자를 입력 후 확인버튼을 누른다.
3.유저가 입력한 값과 랜덤값을 비교한 후 결과를 웹 페이지에 출력한다.
3-1.유저가 입력한 값 === 랜덤숫자 -> "정답입니다!👍"
3-2.유저가 입력한 값 > 랜덤숫자 -> "입력한 숫자보다 작은 수입니다..🤣"
3-3.유저가 입력한 값 < 랜덤숫자 -> "입력한 숫자보다 큰 수입니다..🤣"
4.5번의 기회를 모두 소진하면 게임이 끝난다.(확인버튼은 비활성화)
ex) "게임이 종료되었습니다..😵" 출력
5.초기화버튼을 누르면 게임이 리셋된다.
6.유저가 1~100 범위에 포함되지 않는 숫자를 입력하면 기회횟수는 감소하지 않는다.
ex) "1~100 범위에 포함되지 않는 숫자입니다. 다시 입력해주세요. " 출력
7.유저가 이미 입력한 숫자를 또 입력하면 기회횟수는 감소하지 않는다.
* 배열에 이전 값을 저장하도록 구현해야 한다.
ex) "10은 한 번 입력했던 숫자입니다. 다른 숫자를 입력해주세요." 출력
*/
let computerNum = parseInt(Math.random()*100)+1;
let userInput = document.getElementById("user-input");
let playButton = document.getElementById("play-button");
let resultArea = document.getElementById("result-area");
let chanceArea = document.getElementById("chance-area");
let resetButton = document.getElementById("reset-button");
let chance = 5; //횟수를 저장하는 변수
let history = []; //이전에 입력한 숫자를 저장하는 배열
console.log("랜덤숫자", computerNum);
//확인버튼 클릭 시, 유저가 입력한 값과 랜덤숫자를 비교하는 기능 구현
playButton.addEventListener("click", ()=>{
//input요소의 value속성값은 문자열이기 때문에 숫자로 변환을 해야 한다!
let userNum = parseInt(userInput.value);
// 1~100 범위를 벗어나는 숫자를 입력했을 때, 메시지와 함께 아래 코드가 실행되지 않도록
// return문을 넣어줘야 한다!
if(userNum > 100 || userNum < 1){
resultArea.innerText = "1~100 범위에 포함되지 않는 숫자입니다. 다시 입력해주세요😕";
return;
}
// 이미 입력한 숫자인지 판단한 후 결과를 웹 페이지에 출력해야 한다!
// 배열에 데이터가 있을 경우 -> true
if(history.includes(userNum)){
resultArea.innerText = `${userNum}는(은) 한 번 입력했던 숫자입니다. 다른 숫자를 입력해주세요.`;
return;
}
//비교한 결과값은 웹 페이지에 출력해야 한다!
if(userNum === computerNum){
resultArea.innerText = `${userNum}정답입니다👍`; // ${userNum}추가
playButton.disabled = true;
}else if(userNum > computerNum){
resultArea.innerText = `${userNum}보다 작은 수 입니다..🤣`; // ${userNum}추가
userInput.value = "" // 추가
}else{
resultArea.innerText = `${userNum}보다 큰 수 입니다..🤣`; // ${userNum}추가
userInput.value = "" // 추가
}
//이전에 입력했던 숫자를 history 배열에 저장한다.
history.push(userNum);
console.log(history);
//기회를 1씩 차감한 후 남은 기회를 웹 페이지에 출력한다.
chance-=1;
chanceArea.innerText = `남은 기회:${chance}번`;
//기회가 모두 소진된 경우, 결과값을 웹 페이지에 출력한다.
if(chance == 0){
resultArea.innerText = "게임이 종료되었습니다..😵";
playButton.disabled = true;
}
}); //end playButton
//초기화버튼을 눌렀을 때, 처음 본 화면으로 초기화되도록 구현
//초기화해야 할 데이터 : 랜덤숫자, 남은기회, 버튼활성화, 결과메시지영역
resetButton.addEventListener("click", ()=>{
chanceArea.innerText = `남은 기회:5번`;
resultArea.innerText = "결과값이 여기 나옵니다!";
computerNum = parseInt(Math.random()*100)+1;
playButton.disabled = false;
history = [];
chance = 5;
userInput.value = "" // 추가
console.log("랜덤숫자", computerNum); // 추가
}); //end resetButton
</script>
</body>
</html>
1. 변수 선언 및 DOM으로 가져오기
let computerNum = parseInt(Math.random()*100)+1;
let userInput = document.getElementById("user-input");
let playButton = document.getElementById("play-button");
let resultArea = document.getElementById("result-area");
let chanceArea = document.getElementById("chance-area");
let resetButton = document.getElementById("reset-button");
let chance = 5; //횟수를 저장하는 변수
let history = []; //이전에 입력한 숫자를 저장하는 배열
console.log("랜덤숫자", computerNum);HTML문서에 있는 요소들을 id를 통해 DOM으로 접근해서 각각 변수에 보관한다. 남은 기회를 의미하는 chance 변수,
이전에 입력한 숫자를 기록해서 중복 입력을 방지하게 할 history 배열을 선언한다.
2. 확인 버튼 기능 활성화 및 숫자 비교하기
playButton.addEventListener("click", ()=>{
//input요소의 value속성값은 문자열이기 때문에 숫자로 변환을 해야 한다!
let userNum = parseInt(userInput.value);
if(userNum === computerNum){
resultArea.innerText = `${userNum}정답입니다👍`; // ${userNum}추가
playButton.disabled = true;
}else if(userNum > computerNum){
resultArea.innerText = `${userNum}보다 작은 수 입니다..🤣`; // ${userNum}추가
userInput.value = "" // 추가
}else{
resultArea.innerText = `${userNum}보다 큰 수 입니다..🤣`; // ${userNum}추가
userInput.value = "" // 추가
}
//이전에 입력했던 숫자를 history 배열에 저장한다.
history.push(userNum);
console.log(history);
//기회를 1씩 차감한 후 남은 기회를 웹 페이지에 출력한다.
chance-=1;
chanceArea.innerText = `남은 기회:${chance}번`;
}이벤트 리스너로 클릭 시 실행할 함수를 써준다. 두 수를 비교하는 조건문을 작성해 준다. 두 수를 비교하기 전에 우리가 입력받을 때는 숫자로 보이지만 사실 이것은 문자형이다. 두 수를 비교하기 전에 문자형을 숫자형으로 변환해 주는 과정이 필요하다.
사용자의 편의성을 위해 결과창에 입력했던 수를 출력해 준다. 틀렸을 시 다시 입력할 수 있게 입력창의 숫자를 자동으로 없애준다. history 배열에 입력한 수를 저장한다. 남은 기회를 1씩 감소시켜 준다.
3. 기회가 0이 되는 순간 게임 종료, 확인 버튼 비활성화
//기회가 모두 소진된 경우, 결과값을 웹 페이지에 출력한다.
if (chance == 0) {
resultArea.innerText = "게임이 종료되었습니다..😵";
playButton.disabled = true;
}남은 기회를 의미하는 변수 chance 가 0이면 결과 텍스트가 게임이 종료되었습니다가 출력되게 한다. 확인 버튼 태그에 속성값을 설정해 주는 방법으로. disabled = true를 해서 확인 버튼이 비활성화되도록 한다.
남은 기회가 0이 되는 경우는 최후의 경우이기 때문에 확인 버튼 함수의 가장 아래 부분에 적어야 한다.
4. 초기화 버튼 기능 활성화
//초기화버튼을 눌렀을 때, 처음 본 화면으로 초기화되도록 구현
//초기화해야 할 데이터 : 랜덤숫자, 남은기회, 버튼활성화, 결과메시지영역
resetButton.addEventListener("click", () => {
chanceArea.innerText = `남은 기회:5번`;
resultArea.innerText = "결과값이 여기 나옵니다!";
computerNum = parseInt(Math.random() * 100) + 1; // 새로운 난수 생성
playButton.disabled = false; // 확인 버튼 활성화
history = []; // 이전에 입력했던 숫자 초기화
chance = 5; // 남은 기회를 데이터상으로 카운터하는 변수 초기화
}); //end resetButton초기화 버튼에 이벤트 리스너를 걸어서 클릭을 감지하게 해 준다. 클릭했을 때 실행 될 함수를 작성해야 한다.
일단 초기화 버튼을 눌렀을 때 일어나야 할 것들을 작성해 보겠다.
- 랜덤 숫자를 다시 1개 생성해야 한다.
- 결과 텍스트가 "결괏값이 여기 나옵니다!"로 초기화
- 남은 기회 텍스트 5번으로 초기화, 데이터 상으로 존재하는 남은 기회도 5로 초기화
- 이전에 입력했던 숫자를 기록하는 history 배열을 빈 배열로 초기화
5. 1 <= userNum <= 100를 벗어나는 입력 값일 때
// 1~100 범위를 벗어나는 숫자를 입력했을 때, 메시지와 함께 아래 코드가 실행되지 않도록
// return문을 넣어줘야 한다!
if (userNum > 100 || userNum < 1) {
resultArea.innerText = "1~100 범위에 포함되지 않는 숫자입니다. 다시 입력해주세요😕";
return;
}우리가 작성하는 것도 함수이니까 중간에 return으로 멈출 수 있다는 것을 알기 전에는 1 <= userNum <= 100을 조건으로 하는 if 안에 숫자를 비교하고, else에 과정 5 코드를 넣었다. 이제는 retrun으로 중간에 함수를 끝낼 수 있다는 걸 알게 되었으니 이 조건문을 두 숫자를 비교하는 조건문 보다 위에 적어야 이 코드를 먼저 만나고, 입력값이 범위 안의 수인 것을 확인하면 두 수를 비교할 것이다. 범위 밖의 수를 입력하면 남은 기회는 줄어들지 않으므로 chance를 1 감소하는 코드보다 위에 있어야 한다. 따라서 이 코드는 입력 값이 가장 먼저 만나야 할 코드이다.
6. 중복 입력 방지 기능
// 이미 입력한 숫자인지 판단한 후 결과를 웹 페이지에 출력해야 한다!
// 배열에 데이터가 있을 경우 -> true
if (history.includes(userNum)) {
resultArea.innerText = `${userNum}는(은) 한 번 입력했던 숫자입니다. 다른 숫자를 입력해주세요.`;
return;
}두 수를 비교 한 뒤 입력값을 배열에 넣는 과정이 필요하다. 비교를 했다는 것은 범위 안의 숫자라는 것이다. 따라서 범위 안의 수인지 확인하는 코드 밑에 적어야 한다. 그리고 중복된 수면 비교조차 안할 거니까 비교하는 코드보단 위에 있어야 한다.
그리고 범위 안인지 확인하는 코드와 같이 중복되면 실행을 멈출거니까 return을 넣어준다.
- 함수 도중에 if문에서 return으로 함수를 종료할 수 있다.
- DOM 과정은 전역범위에서 한번에 하면 번거롭지 않다.
- 조건문을 복잡하게 짜려고 하지말고, 이렇게 해도 다른 과정에 영향을 끼치는지 안끼치는지 확인하면 편하다.
'Front-End > 3. JavaScript 실전' 카테고리의 다른 글
| [JS] 객체 - key 값에 대괄호를 씌우는 이유 (4) | 2023.11.22 |
|---|---|
| [JS] Ex15_To do List.html (0) | 2023.06.21 |
| [JS] Ex14_숫자맞추기 실습.html (실패한 코드.ver) (0) | 2023.06.20 |
| [JS] Ex13_DOM스타일.html (0) | 2023.06.20 |
| [JS] Ex12_DOM속성실습.html (0) | 2023.06.20 |
