<!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>업다운 게임</title>
</head>
<body>
<h1>
<button type="button" id="ranBtn">랜덤 숫자 생성 버튼</button>
<button type="button" onclick="reset();">다시하기</button>
</h1>
<!-- 랜덤숫자가 생성되었습니다. 출력 -->
<h3 id="printMsg"></h3>
<h1>
<input type="number" id="myGuess" max="99" min="0">
<button type="button" id="guessBtn">정답!</button>
</h1>
<!-- 정답 숫자 출력 -->
<h3 id="result"></h3>
<script>
let comNum=0;
let max =99;
let min =1;
let cnt=0;
// 버튼 : 컴퓨터 랜덤 숫자
document.getElementById('ranBtn').addEventListener('click',()=>{
comNum = Math.floor(Math.random()*(max-min+1))+min;
document.getElementById('printMsg').innerText = `랜덤 숫자가 생성되었습니다.`
})
// 버튼 : 정답버튼
document.getElementById('guessBtn').addEventListener('click',()=>{
let userNum = Number(document.getElementById('myGuess').value);
if(userNum<=0 || userNum>=100){
alert('잘못된 숫자입력입니다! 0~100사이의 숫자를 입력하세요');
} else if(comNum > userNum){
cnt++;
document.getElementById('result').innerHTML = `Up! <br> 현재 시도 횟수: ${cnt} <br>
<img src="/image/도리.png" alt="">`;
} else if (comNum < userNum){
cnt++;
document.getElementById('result').innerHTML= `Down! <br> 현재 시도 횟수: ${cnt} <br>
<img src="/image/도치.png" alt="">`;
} else {
cnt++;
document.getElementById('result').innerHTML
= `정답입니다! 컴퓨터의 숫자는 ${comNum} 이였습니다! <br> 총 시도횟수는 ${cnt}회입니다! <br>
<img src="/image/축하.png" alt="">`;
}
if(cnt >= 10) {
document.getElementById('result').innerHTML =
`시도횟수를 초과하셨습니다ㅠㅠ 컴퓨터의 숫자는 ${comNum}입니다. <br>
<img src="/image/모구모구.png" alt="">`
}
})
// 버튼 : 다시하기
function reset(){
location.reload();
}
</script>
</body>
</html>
'JS > JS 예시' 카테고리의 다른 글
| [JS] Map 예제 : 과목, 점수를 map에 저장하고 합계,평균 등 출력 (0) | 2023.04.18 |
|---|---|
| [JS] Count버튼 만들기 (더하기버튼누르면 +1/ 뺴기버튼누르면 -1) (0) | 2023.04.18 |
| [JS] 배수 출력 (1~100까지 중 입력한 숫자의 배수) (0) | 2023.04.17 |
| [JS] 구구단 출력 (이중반복문 while) (0) | 2023.04.14 |
| [JS] 제곱 구하기 (while문 이용) (0) | 2023.04.14 |