랜덤 숫자 롤링 후 앞자리부터 맞추는 숫자 롤링 카운터 만들기 | HTML, Javascript, jQuery

랜덤 숫자 n번 롤링 후 앞자리부터 맞추는 숫자 롤링 카운터 만들기 - 숫자 롤링 카운터 (3)

---

 

각 자릿수가 랜덤 숫자로 n번 롤링 후 첫 번째 자리부터 맞추는 롤링을 구현해 보겠습니다.

 

Environment

• HTML
• Javascript

Thirdparty

• jQuery

---

구현

▪️퍼블리싱

숫자가 표시될 요소를 생성합니다.

<div id="cnt"></div>

 

▪️기능

변수 정의

사용할 변수를 정의합니다.

const jqEl = $("#cnt");	// 숫자 표시할 요소
const targetNum = 128374838;	// 표시할 타겟 숫자
const strNum = targetNum.toString(); // 타겟 숫자의 string 타입
const targetNumLen = strNum.length; // 타겟 숫자 자릿수

const LOOP_RANDOM_CNT = 5;
let str = new Array(targetNumLen).fill("0");
let idx = 0;
let loopCnt = 0;

• LOOP_RANDOM_CNT
  랜덤 롤링할 횟수
• str
  최종 표시할 데이터, 0으로 초기화된 타겟 숫자 자릿수 길이의 배열 선언
  (각 자리에 표시할 데이터 참고)
• idx
  현재 맞추는 자릿수
  (0 ~ targetNumLen - 1)
• loopCnt
  랜덤 생성한 횟수
  자릿수 변경시마다 초기화됨

 

각 자릿수 랜덤 숫자 생성

현재 맞추는 자릿수부터 끝자리까지 랜덤 숫자를 생성하여 최종 표시할 데이터 배열 str에 저장합니다.

for (let i = idx; i < targetNumLen; i += 1) {
  str[i] = Math.floor(Math.random() * 10);
}

str을 화면에 랜더링 후 랜덤 생성한 횟수를 증가하고 원하는 시간만큼 대기합니다.

jqEl.text(str.join(""));
loopCnt += 1; // 랜덤 생성 횟수 업데이트  
await sleep(30); // 30 millisecond sleep처리

동일한 작업을 반복해야 하므로 무한루프 블록 내부에 선언해 줍니다.

while (true) {
	// 생략
}

 

랜덤 롤링 후 해당 자릿수 타겟 숫자로 설정

랜덤 롤링할 횟수 LOOP_RANDOM_CNT가 모두 끝난 상태라면

1. 타겟 숫자의 해당 자릿수로 고정
2. 랜덤 횟수 변수를 초기화
3. 현재 맞추는 자릿수 다음 자릿수로 증가

합니다.

랜덤 숫자 생성 시 랜덤 롤링 횟수가 끝났는지 확인하여 해당 자릿수 숫자로 고정합니다.

for (let i = idx; i < targetNumLen; i += 1) {
    let n; // str에 저장할 변수

    if (loopCnt == LOOP_RANDOM_CNT) {
        // 랜덤 횟수 끝났다면 타겟 숫자의 해당 자릿수 고정
        n = strNum[i];
        loopCnt = 0;    // 랜덤 횟수 초기화
        idx += 1; // 현재 맞추는 자릿수 업데이트
    } else {
    	n = Math.floor(Math.random() * 10);
    }

    // 데이터 저장
    str[i] = n;
}

 

타겟 숫자 완성시 종료

현재 무한루프 내부에 종료 조건이 없으므로 타겟 숫자가 완성되어도 멈추지 않습니다.

• 타겟 숫자가 완성되거나
• 현재 맞추는 자릿수 idx가 타겟 숫자 자릿수보다 크다면

종료시키는 조건을 추가합니다.

while (true) {
    // breakpoint
    if ( Number(str.join("")) == targetNum || idx >= targetNumLen ) {
    	break;
    }

    // 생략
}

---

완성❗

전체 소스 보기

const jqEl = $(selector);
const targetNum = Number(jqEl.data("num"));
const strNum = targetNum.toString();

// 숫자 길이
const targetNumLen = strNum.length;

const LOOP_RANDOM_CNT = 5;
let str = new Array(targetNumLen).fill("0");
let idx = 0;    // 현재 맞추는 자릿수
let loopCnt = 0;    // 랜덤 롤링 횟수
while (true) {
    // break point
    if (idx >= targetNumLen || Number(str.join("")) == targetNum) {
    	break;
    }

    for (let i = idx; i < targetNumLen; i += 1) {
        let n;
        if (loopCnt == LOOP_RANDOM_CNT) {
            n = strNum[i];
            loopCnt = 0;    // 랜덤횟수 초기화
            idx += 1;
        } else {
        	n = Math.floor(Math.random() * 10);
        }

        str[i] = n;
    }

    loopCnt += 1;
    jqEl.text(
    	Number(str.join(""))
    	.toLocaleString(navigator.language, {minimumIntegerDigits: targetNumLen,})
    );
    
    await sleep(30);
}