조건
- 0에서 사용자가 지정한 숫자까지의 범위에서 랜덤 한 숫자를 찾으세요. (범위는 0 이상 입력값 이하가 됩니다.)
- 범위에는 음수가 포함될 수 없습니다.
- 실시간으로 범위 값을 업데이트해야 합니다.
- 유저가 숫자를 선택한 후에 게임을 플레이할 수 있습니다.
- 유저에게 게임의 승패를 알려야 합니다.
<!DOCTYPE html>
<html>
<head>
<title>Vanilla Challenge</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Random Number Game</h1>
<h2>Generate a number between 0 and</h2>
<div id="js-numRange">
<form id="num-form">
<input type="number" min="-1" placeholder="숫자 범위 입력"/>
</form>
</div>
<h3>Guess the number : </h3>
<div id="js-userInput">
<form id="clinet-form">
<input type="number" min="-1" placeholder="숫자입력"/>
<button>Play!</button>
</form>
</div>
<div id="js-choiceResult">
<h4></h4>
</div>
<div id="js-result">
<h5><h5>
</div>
<script src="src/index.js"></script>
</body>
</html>
const numForm = document.querySelector("#num-form");
const numInput = document.querySelector("#num-form input");
const clientForm = document.querySelector("#clinet-form");
const clinetInput = document.querySelector("#clinet-form input");
const drawMatch = document.querySelector("#js-choiceResult h4");
const drawResult = document.querySelector("#js-result h5");
//게임 시작을 위한 값 입력
function gameNumberInput(event) {
event.preventDefault(); //새로고침 방지
const gameInputVaule = numInput.value; //입력 값 추출
let findGameValue = 0;
console.log("게임 입력 값:", gameInputVaule);
findGameValue = Math.floor(Math.random() * gameInputVaule); //입력값에 범위 내에서 랜덤 값 뽑기
console.log("랜덤 값:", findGameValue); //정답 값
return findGameValue; //랜덤 값 리턴
}
//클라이언트 입력 값
function clientNumberInput(event) {
event.preventDefault(); //새로고침 방지
console.log("클라이언트 입력 값:", clinetInput.value);
const clientValue = parseInt(clinetInput.value);
return clientValue; //클라이언트 입력값 리턴
}
//main play 버튼 누르면 게임 시작 시작
function playWithmachine(event) {
event.preventDefault();
numberCompared(event);
}
//머신 숫자와 클라이언트 숫자 비교
function numberCompared(event) {
event.preventDefault(); //새로고침 방지
const mNum = gameNumberInput(event); //머신 랜덤 숫자 저장
const cNum = clientNumberInput(event); //클라이언트 입력 숫자 저장
drawMachineAndClientNum(mNum, cNum); //머신랜덤숫자, 클라이언트 입력 HTML로 그려줌
//머신 랜덤 숫자와, 클라이언트 입력 비교
if (mNum === cNum) {
drawResult.innerText = "You Win!";
} else {
drawResult.innerText = "You Lost!";
}
}
//입력 값 그려주는 함수
function drawMachineAndClientNum(mNum, cNum) {
drawMatch.innerText = `You chose: ${cNum}, the machine chose: ${mNum}.`;
}
numForm.addEventListener("submit", gameNumberInput);
clientForm.addEventListener("submit", playWithmachine); //play 버튼 클릭시 playWithmachine() 시작'웹 개발 > 바닐라js' 카테고리의 다른 글
| [드림코딩] 윈도우 사이즈 가져오기 (0) | 2021.09.21 |
|---|---|
| [노마드코더] 바닐라JS 챌린지 - 랜덤 그라데이션 백그라운드 (0) | 2021.09.02 |
| [노마드코더] 바닐라JS 챌린지 - 크리스마스 이브 D-day 계산기 (0) | 2021.09.02 |
| [노마드코더] 바닐라JS 챌린지 - resize발생시 배경화면 색 변경 (0) | 2021.08.27 |
| [노마드코더] 바닐라JS 챌린지 - 마우스 이벤트, 윈도우 사이즈 - 글자 색변 경하기 (0) | 2021.08.27 |
[노마드코더] 바닐라JS 챌린지 - 숫자 입력 게임