⭐ UI
💻 Stack
JavaScript, CSS, HTML
💻 기능
- 랜덤번호가 지정된다.
- 사용자는 인풋칸안에 1~50 숫자를 입력할수있다.
- 숫자입력 후 Go버튼을 누르면 게임이 시작된다.
- 사용자의 숫자와 랜덤숫자를 비교후 up, down을 알려준다.
- 만약에 사용자가 랜덤번호를 맞추면 "Clear"가 뜨면서 게임은 끝나고 Go버튼을 더이상누를수없다.
- 사용자가 인풋칸에 1미만 50초과인 숫자를 입력하면 알려주고 기회는 깍이지않는다.
- 이미 입력한 숫자를 또 입력하면, 알려준 후 기회를 깍지않는다.
- eset 버튼을 누르면 게임이 리셋된다.
- 5번의 기회를 다쓰면 게임이 끝나고 Go버튼을 더이상누를수없다.
💻 코드
💥 index.html
<title>up & down Game</title>
<link
href="https://fonts.googleapis.com/css2?family=Bungee+Spice&family=DM+Sans:wght@400;700&family=Lato&family=Mulish&family=Noto+Sans+KR:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game-box">
<h1 class="game-title">Up & Down Game</h1>
<div id="result-area">1부터 50까지의 숫자를 입력하세요</div>
<div id="chance-area">남은 기회: 5번!</div>
<div id="form">
<input id="user-input" type="text" placeholder="1부터 50까지의 숫자를 입력하세요">
<div class="btns">
<button id="play-button">Go!</button>
<button id="reset-button">Reset</button>
</div>
</div>
</div>
<script src="main.js"></script>
</body>게임스러운 타이틀 모양을 내기위해 구글 폰트를 이용했다. 구글폰트 링크는 title태그밑에 걸어주고 자바스크립트파일은 body의 마지막줄에 걸어줬다. 토이프로젝트이므로 구조는 매우 간단하게 만들었다.
💥 main.js
<script>
let computerNum=0;
let userNum=document.getElementById("user-input");
let playButton=document.getElementById("play-button");
let resetButton=document.getElementById("reset-button");
let resultArea=document.getElementById("result-area");
let chance = 5;
let chanceArea=document.getElementById("chance-area");
let gameOver=false;
let history=[];
chanceArea.innerHTML=`남은 기회:${chance}`;
userNum.addEventListener("focus",()=>{userNum.value=""})
playButton.addEventListener("click",playGame)
resetButton.addEventListener("click",reset)
</script>필요한 초기값과 이벤트를 적어줬다.
함수는 크게 3개가 필요하다고 보면된다.
- 랜덤번호는 받아내는 함수
- 게임을 진행하는 함수
- 리셋시키는 함수
먼저 이 게임은 컴퓨터와 진행한다. 컴퓨터가 임의의 숫자를 고르면 사용자가 그것을 맞춰야한다. 그럴려면 컴퓨터에서 랜덤번호를 불러와야한다. randomNum함수를 자세히 보자.
<script>
function randomNum(){
computerNum=Math.floor(Math.random()*50)+1; //random함수는 소수로나오므로 100을 곱한다. 1을 더하는 이유는 예로 0.003일때 0으로나오는것을 방지하기위해!
console.log("랜덤번호", computerNum)
}
</script>번호를 랜덤으로 받아내는 함수인 random을 사용했다. 그렇지만 이 함수는 소수자리까지 나온다. 이 함수는 0 이상 1 미만의 구간에서 랜덤으로 숫자를 뽑아낸다. 뽑아진 수를 정수, 그리고 50이하로 만들어야하므로 50을 곱하고 여기에 소숫점을 버리는 floor함수를 사용해줬다. 0이되는 것을 방지하기위해 1을 더해주면 1~50의 램덤숫자를 받아올 수 있다.
랜덤 함수를 받아왔으니 게임을 진행하는 함수를 만들어야한다.
<script>
function playGame(){
let userValue=userNum.value
if(userValue<1 && userValue>50){
resultArea.textContent="1에서 50까지의 숫자를 입력해주세요"
return;
}
if(history.includes(userValue)){
resultArea.textContent="이미 입력한 값입니다."
return;
}
chance--;
chanceArea.textContent=`남은 기회: ${chance}번`;
console.log("기회?",chance);
history.push(userValue);
console.log("입력값",history);
if(userValue>computerNum){
resultArea.textContent="Down!";
}else if(userValue<computerNum){
resultArea.textContent="Up!";
}else{
resultArea.textContent="Clear!";
chanceArea.innerHTML="reset버튼을 눌러주세요";
playButton.disabled=true;
}
if(chance == 0){
resultArea.textContent="fail ㅜ.ㅜ";
chanceArea.innerHTML="reset버튼을 눌러주세요"
playButton.disabled=true;
gameOver = true;
}
if(gameOver == true){
resultArea.textContent="fail ㅜ.ㅜ";
chanceArea.innerHTML="reset버튼을 눌러주세요"
playButton.disabled=true;
}
}
</script>먼저 사용자의 숫자가 1~50을 벗어날때나 이미 입력한 값을 넣었을때 알려주고 함수는 더 진행못하도록 return을 넣어줬다. 그리고 한번 입력했을때마다 기회(chance)는 1씩 차감된다. 사용자가 한 게임에서 입력했던 값을 history배열에 넣어준다. (push) 그리고 게임을 진행할때 입력한 값에 중복있는지확인해야한다.(includes)
이후 랜덤숫자랑 입력숫자 비교는 if문에 조건을 걸어주었고 기회를 다쓰면 게임이 중지되도록해야한다. gameOver의 초기값은 false였으므로 true로 바꿔주고 gameOver이 true일시에 실패를 알리고 Go버튼을 더이상 누를 수없도록(disables)한다.
게임이 끝나면 리셋으로 첨으로부터 돌려놔야한다. 마지막으로 reset함수를 살펴보자.
<script>
function reset(){
userNum.value="";
resultArea.textContent="1에서 50까지의 숫자를 입력해주세요";
chanceArea.innerHTML="남은 기회: 5번";
randomNum();
playButton.disabled = false;
gameOver = false;
chance = 5;
history = [];
}
</script>게임을 진행하면서 바뀌었던 정보들을 초기값으로 돌려놨다. Go버튼의 disabled을 다시 false로 바꾸고 입력한 값들이 담긴 history 배열을 다시 빈값으로 만들고 chance도 다시 5를 넣어줬다.
이렇게 필요한 함수들을 만들고 살펴보았다. 이렇게 진행하면 간단한 업다운게임이 완성된다.
⭐ 마무리
사실 이 토이프로젝트를 두 달전에 완성했었다. 하지만 최근에 복습도하고 블로그도 올릴겸 다시 처음부터 만들어보았는데 내것으로 만든 느낌이 들었다. 이전에 했던 프로젝트들을 복습겸 한번더 만드는것도 정말 좋은 공부방법인 것같다.
