loading

프로그래밍/JavaScript

[JavaScript] 랜덤난수 생성/예제+랜덤난수맞추기 게임(Math.Random)

침착곰 2022. 3. 27. 22:28
반응형

안녕하세요.

이번 포스팅에서는 JavaScript(자바스크립트)의 랜덤난수를 생성하는 방법 및 예제 +

예제를 응용해서 랜덤난수맞추기 게임을 만들어봤습니다.

 

목차

랜덤난수 생성(Math.Random)
0부터 N까지 랜덤난수 생성
MIN부터 MAX까지 랜덤난수 생성
랜덤난수 맞추기 게임 만들기

 

 

랜덤난수 생성(Math.Random)

자바스크립트에서 랜덤한 난수를 생성하기 위해서는 Math.Random() 함수를 사용합니다.

Math.Random()을 사용하면 0 ~ 1 사이의 난수를 생성합니다.

<script>
var randdom_1 = Math.random();
var randdom_2 = Math.random();
var randdom_3 = Math.random();

document.write(randdom_1 + '<br>');
document.write(randdom_2 + '<br>');
document.write(randdom_3 + '<br>');
</script>

결과

위의 이미지처럼 0부터 1사이의 랜덤한 난수가 생성된 것을 볼 수 있습니다.

 

 

0부터 N까지 랜덤난수 생성

0부터 N까지 랜덤난수를 생성하는 방법에 대해서 알아보겠습니다.

0부터 100까지 생성하는 예제입니다. Math.random()에서 101을 곱하고 소수점 이하를 버려줍니다.

<script>
var randdom_1 = Math.floor(Math.random() * 101);
var randdom_2 = Math.floor(Math.random() * 101);
var randdom_3 = Math.floor(Math.random() * 101);

document.write('첫번째 랜덤난수 : ' + randdom_1 + '<br>');
document.write('두번째 랜덤난수 : ' + randdom_2 + '<br>');
document.write('세번째 랜덤난수 : ' + randdom_3 + '<br>');
</script>

결과

0부터 100사이의 랜덤한 난수가 생성된 것을 볼 수 있습니다.

 

 

MIN부터 MAX까지 랜덤난수 생성

MIN값과 MAX값 사이의 랜덤난수를 생성하는 방법입니다.

createRandomNumber(min, max)를 참고바랍니다.

Min, Max값 사이의 랜덤난수를 생성하는 함수입니다.

<script>
function createRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var randdom_1 = createRandomNumber(50, 100);
var randdom_2 = createRandomNumber(0, 25);
var randdom_3 = createRandomNumber(25, 50);

document.write('첫번째 랜덤난수 : ' + randdom_1 + '<br>');
document.write('두번째 랜덤난수 : ' + randdom_2 + '<br>');
document.write('세번째 랜덤난수 : ' + randdom_3 + '<br>');
</script>

결과

MIN부터 MAX사이의 랜덤한 난수가 생성된 것을 볼 수 있습니다.

 

 

랜덤난수 맞추기 게임 만들기

위의 예제를 활용해서 랜덤난수 맞추기 게임을 만들어봤습니다.

초기화면을 간단하게 디자인했습니다.

<body>
    <h1>랜덤 난수 맞추기 게임입니다. 게임을 시작하려면 아래 버튼을 눌러주세요.</h1>
    <button id="btnStart">게임시작</button>
    <input id="randomNumber" type="hidden"></input>    
    <input id="resultCount" type="hidden"></input>
    <div id="gameArea">
    </div>
</body>

화면

 

"게임시작"버튼을 누를경우 랜덤한 난수를 생성하고 숫자를 입력하는 Input컨트롤을 생성합니다.

 // 게임시작 버튼 클릭 이벤트
$("#btnStart").click(function() {
	// 게임영역 초기화
	$("#gameArea").empty();

	// 랜덤난수 부여
	var randomNumber = Math.floor(Math.random() * 101);
    $("#randomNumber").val(randomNumber);

	// 정답카운트 초기화
	$("#resultCount").val("0");

	// 게임 영역 생성
	$("#gameArea").append("<p>1 ~ 100까지 랜덤한 숫자를 생성되었습니다. 숫자를 입력하여 맞춰주세요.</p>");
	$("#gameArea").append("<input type='text' id='txtAnswer'></input>  ");
	$("#gameArea").append("<button id='btnAnswer' onclick='randomAnswerSubmission();'>정답제출</button>");
});

화면

 

마지막으로 "정답제출"버튼을 누를 때의 함수입니다.

// 정답제출 함수
function randomAnswerSubmission() {
	var randomValue = $("#randomNumber").val();     // 랜덤난수
	var txtAnswer = $("#txtAnswer").val();          // 입력한 정답
	var resultCount = $("#resultCount").val();

	// 정답
	if(randomValue == txtAnswer) {
		$("#gameArea").append("<p>정답은 " + randomValue + "입니다. " + resultCount + "번만에 정답을 맞췄습니다.</p>");                
	} 
	// 오답(작은 수 입력)
	else if (Number(randomValue) > Number(txtAnswer)) {
		resultCount = Number(resultCount) + 1;
		$("#resultCount").val(String(resultCount));
		$("#gameArea").append("<p>정답은" + txtAnswer + "보다 큰 수 입니다.</p>");   
	} 
	// 오답(큰 수 입력)
	else if (Number(randomValue) < Number(txtAnswer)) {
		resultCount = Number(resultCount) + 1;
		$("#resultCount").val(String(resultCount));
		$("#gameArea").append("<p>정답은" + txtAnswer + "보다 작은 수 입니다.</p>");  
	}
}

화면

랜덤 난수 맞추기 게임을 직접 플레이해봤습니다. ㅎ

아래는 전체코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>랜덤난수맞추기게임</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function() {
            // 게임시작 버튼 클릭 이벤트
            $("#btnStart").click(function() {
                // 게임영역 초기화
                $("#gameArea").empty();

                // 랜덤난수 부여
                var randomNumber = Math.floor(Math.random() * 101);
                $("#randomNumber").val(randomNumber);

                // 정답카운트 초기화
                $("#resultCount").val("0");

                // 게임 영역 생성
                $("#gameArea").append("<p>1 ~ 100까지 랜덤한 숫자를 생성되었습니다. 숫자를 입력하여 맞춰주세요.</p>");
                $("#gameArea").append("<input type='text' id='txtAnswer'></input>  ");
                $("#gameArea").append("<button id='btnAnswer' onclick='randomAnswerSubmission();'>정답제출</button>");
            });
        });

        // 정답제출 함수
        function randomAnswerSubmission() {
            var randomValue = $("#randomNumber").val();     // 랜덤난수
            var txtAnswer = $("#txtAnswer").val();          // 입력한 정답
            var resultCount = $("#resultCount").val();

            // 정답
            if(randomValue == txtAnswer) {
                $("#gameArea").append("<p>정답은 " + randomValue + "입니다. " + resultCount + "번만에 정답을 맞췄습니다.</p>");                
            } 
            // 오답(작은 수 입력)
            else if (Number(randomValue) > Number(txtAnswer)) {
                resultCount = Number(resultCount) + 1;
                $("#resultCount").val(String(resultCount));
                $("#gameArea").append("<p>정답은" + txtAnswer + "보다 큰 수 입니다.</p>");   
            } 
            // 오답(큰 수 입력)
            else if (Number(randomValue) < Number(txtAnswer)) {
                resultCount = Number(resultCount) + 1;
                $("#resultCount").val(String(resultCount));
                $("#gameArea").append("<p>정답은" + txtAnswer + "보다 작은 수 입니다.</p>");  
            }
        }
    </script>
</head>
<body>
    <h1>랜덤 난수 맞추기 게임입니다. 게임을 시작하려면 아래 버튼을 눌러주세요.</h1>
    <button id="btnStart">게임시작</button>
    <input id="randomNumber" type="hidden"></input>    
    <input id="resultCount" type="hidden"></input>
    <div id="gameArea">
    </div>
</body>
</html>

 

이상 JavaScript(자바스크립트)의 랜덤난수를 생성하는 방법 및 예제+랜덤난수맞추기 게임을 만드는 방법에 대해서 간단하게 알아봤습니다. 자바스크립트를 공부하는 분들에게 제 포스팅이 도움이 되었으면 좋겠습니다. 이상 포스팅 마치겠습니다!

반응형
그리드형

'프로그래밍 > JavaScript' 카테고리의 다른 글

[JavaScript][jQuery] CSS 속성 호출/추가/변경  (0) 2022.03.27
[JavaScript] HTML요소 선택 - querySelector(), querySelectorAll()  (0) 2022.03.12
[JavaScript] prompt(), confirm(), alert() 사용방법  (2) 2022.03.11
[JavaScript] SVG란?  (1) 2021.10.04
XSS(Cross Site Scripting) Filter 크로스사이트스크립팅 방지처리  (0) 2021.09.01

'프로그래밍/JavaScript'의 다른글

  • 현재글[JavaScript] 랜덤난수 생성/예제+랜덤난수맞추기 게임(Math.Random)

관련글

댓글

티스토리툴바