<소스코드>
<html>
<body>
<div id="wrapper">
<h1>숫자 맞추기 게임</h1>
<form action="">
<label><input type="text" id="try" autocomplete="off" autofocus></label>
<button id="check" onclick="finding()">확인</button>
<button id="reset" onclick="window.location.reload()">다시</button>
</form>
<div id="display" class="output"></div>
<div id="counter" class="footer"></div>
</div>
</body><js>
var count = 0;
var randomNumber = Math.floor(Math.random() * 100) + 1;//1부터 100사이의 무작위 수
document.querySelector("#try").onkeypress = function (e) { //키보드 클릭해서 함수 실행
if (e.keyCode == 13) { // enter 키인지 체크
finding(); // 함수 실행
return false; // keypress일 때 브라우저가 할 기본 동작 취소
}
}
function finding() {
var userNum = document.querySelector("#try").value;
if (userNum >= 1 && userNum <= 100) {
if (randomNumber > userNum) {
document.querySelector("#display").innerHTML = "UP!";
} else if (randomNumber < userNum) {
document.querySelector("#display").innerHTML = "DOWN!";
} else {
document.querySelector("#display").innerHTML = "<span style='color:tomato'>맞혔습니다!</span>";
}
document.querySelector("#try").value = "";
count++;
document.querySelector("#counter").innerHTML = `시도 횟수: ${count}회`;
} else {
alert(`1과 100사이의 숫자를 입력하세요.`);
}
}
<실행화면>
※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.
'Javascript > Javascript 기본' 카테고리의 다른 글
| 기념일 계산기 (0) | 2020.07.24 |
|---|---|
| 객체 (0) | 2020.07.23 |
| 함수와 이벤트 (0) | 2020.07.23 |
| 제어문 (0) | 2020.07.12 |
| 나이 계산 프로그램 / 할인 가격 계산 프로그램 (0) | 2020.07.04 |
댓글