이것저것아무거나공부한다 
이것저것 프로젝트한다:: 숫자 맞추기 게임(1)
컴퓨터 공부하는 곳 by 서상진
5
0
0
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>
랜 덤 숫 자 게 임 !1 1!~ !!`
</h1>
<div>
<input type="number" id ="input">
<button id ="enterbtn">
입력확인
</button>
<div id = "logs">
</div>
<div id="description">
</div>
<button style="display:none" id="reloadBtn">
재시작 버튼
</button>
</div>
<script>
let value = Math.floor(Math.random()*100);
console.log(value);
var input = document.querySelector("#input");
var enterbtn = document.querySelector("#enterbtn");
var logs = document.querySelector("#logs");
var descriptions = document.querySelector("#description");
var reloadBtn = document.querySelector("#reloadBtn");
const CorrectFunc = function(){
input.setAttribute("Disabled","");
enterbtn.setAttribute("Disabled","");
reloadBtn.style.display = "inline";
}
const editText = function(){
logs.innerText = logs.innerText+ " " + input.value.toString();
}
const IfFunction = function(){
if(input.value <value){
descriptions.innerText = "너무 작습니다";
}else if(input.value > value){
description.innerText = "너무 큽니다.";
}else if(input.value == value){
description.innerText = "축하드립니다!";
CorrectFunc();
}
}
enterbtn.onclick = function(){
editText();
IfFunction();
input.value = null;
}
reloadBtn.onclick = function(){
location.reload();
}
document.addEventListener("keyup", function(e){
if(e.code ==='Enter'){
enterbtn.onclick();
}
})
</script>
<br />
<br />
<br />
<br />
<br />
</body>
</html>
숫자 만들기 게임을 구현하였다.
텍스트 란에 숫자를 입력하고 enter 키를 누르거나 ‘입력’ 란을 누르면 그 숫자가 제시된 랜덤 숫자와 큰지 다른지 같은지를 판별하고 밑에 어떤 숫자를 입력하였는지 보여준다.
정답을 맞췄다면 재시작 버튼이 나타난다.
- 카테고리
- #기타
댓글 0
추천 포스트
