<!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] day12_classEx (클래스, 생성자함수, 리터럴객체 사용) (0) | 2023.04.19 |
---|---|
[JS] day12_classEx (클래스, 생성자함수, 리터럴객체 사용) (0) | 2023.04.19 |
[JS] day10_regular_expression_정규표현식 (파일명검색) (0) | 2023.04.18 |
[JS] day10_array_Method_배열순환탐색 메서드 (0) | 2023.04.18 |
[JS] day10_array_interation (0) | 2023.04.18 |