JavaScript - 로또 추첨기

자바스크립트

JavaScript - 로또 추첨기

개발자 동찬 ㅣ 2024. 1. 2. 20:37

1을 만들지 못하는 사람은 2를 만들지 못하며, 나아가 100을 만들지 못한다.

간단한 프로그램을 직접 만들어 나가며 실력을 키울 것이다.

로또 번호 추첨기를 만들 것 이다.

1초마다 1~45의 랜덤한 값을 차례대로 출력하는 로또 추첨기를 프로그래밍 하였다.

1초 마다 실행되는 setTimeout() 메서드를 이용하여 비동기의 개념을 입문하고

JS의 배열 정적 메서드를 활용하여 무작위로 번호를 출력해보는 연습의 시간이 되었다.

HTML, CSS 구성

간단하게 추첨된 로또의 번호를 출력할 div 와 보너스 번호를 출력할 div , 를 구성하고

당첨번호를 동그라미로 출력하여 로또 추첨기 처럼 구성하였다.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>로또추첨기</title>
  <style>
    .ball {
      display: inline-block;
      border: 1px solid black;
      border-radius: 20px;
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 20px;
      text-align: center;
      margin-right: 20px;
    }
  </style>
</head>

<body>
<div id="result">로또 추첨 결과는? </div>
<div id="bonus">보너스 번호: </div>
<script>
</script>
</body>

로또의 번호를 추첨하고 화면의 표시하기 위해 프로그래밍 구성도를 그렸다.

1~45 배열 생성

const candidate = Array(45).fill().map((v,i)=>i+1);
  // 1부터 45까지의 배열 선언 및 초기화
  // fill 사용 이유는 map() 메서드를 사용하기 위해 초기화를 진행 시켜준 것

먼저 1~45의 숫자가 들어 있는 배열 (Array)를 선언 및 초기화 해주었다.

fill() :

map() :

숫자의 순서를 무작위로 변경

  const shuffle = []; //무작위의 숫자를 저장하기 위한 shuffle 배열

while (candidate.length > 0) {
    const random = Math.floor(Math.random() * candidate.length); // 무작위 인덱스 생성
    const spliceArray = candidate.splice(random, 1); // 뽑은 값은 배열에 들어 있음
    const value = spliceArray[0]; // 배열에 들어 있는 값을 꺼내어
    shuffle.push(value); // shuffle 배열에 넣기
  }
  // 배열의 순서를 무작위로 섞어주는 알고리즘

무작위 배열의 요소 7개를 winBall 배열로 지정 후 오름차순 정렬

  const winBalls = shuffle.slice(0,6).sort((a,b)=>a-b);
  const bonus = shuffle[6];

  console.log(winBalls, bonus);

뽑은 winBalls, bonus 를 화면에 출력

코드의 중복을 방지하기 위한 drawBall 함수 구현

  const drawBall = function (i , $parent) {
    const $ball = document.createElement('div');
    $ball.className = "ball";
    $ball.textContent = i;
    $parent.appendChild($ball)
  }

1초당 하나씩 추첨번호를 화면에 표시

  const $result = document.querySelector("#result");

  for (let i = 0; i<6; i++){
  setTimeout(()=>{
    drawBall(winBalls[i],$result);
  },1000*(i+1));
  }
  
  const $bonus = document.querySelector("#bonus");
  setTimeout(()=>{
    drawBall(bonus, $bonus);
  },7000);

여기서 setTimeout 함수를 이용하여 비동기로 구현하였다.

setTimeout(콜백함수, 기준초(ms));

로또 추첨기 전체 소스 코드

const candidate = Array(45).fill().map((v,i)=>i+1);
  // 1부터 45까지의 배열 선언 및 초기화
  // fill 사용 이유는 map() 메서드를 사용하기 위해 초기화를 진행 시켜준 것

  const shuffle = []; //무작위의 숫자를 저장하기 위한 shuffle 배열

while (candidate.length > 0) {
    const random = Math.floor(Math.random() * candidate.length); // 무작위 인덱스 생성
    const spliceArray = candidate.splice(random, 1); // 배열에 자동 저장
    const value = spliceArray[0]; // 배열에 들어 있는 값을 꺼내어
    shuffle.push(value); // shuffle 배열에 넣기
  }
  
  // 배열의 순서를 무작위로 섞어주는 알고리즘

  // for (let i = candidate.length; i > 0; i--){
  //   const random = Math.floor(Math.random()*candidate.length)
  //   const spliceArray = candidate.splice(random,1);
  //   const value = spliceArray[0];
  //   shuffle.push(value);
  // }

  console.log(shuffle);

  const winBalls = shuffle.slice(0,6).sort((a,b)=>a-b);
  const bonus = shuffle[6];

  console.log(winBalls, bonus);

  const drawBall = function (i , $parent) {
    const $ball = document.createElement('div');
    $ball.className = "ball";
    $ball.textContent = i;
    $parent.appendChild($ball)
  }

  const $result = document.querySelector("#result");

  for (let i = 0; i<6; i++){
  setTimeout(()=>{
    drawBall(winBalls[i],$result);
  },1000*(i+1));
  }
  
  const $bonus = document.querySelector("#bonus");
  setTimeout(()=>{
    drawBall(bonus, $bonus);
  },7000);

실제 동작 화면

배운 점

1. 배열 관련 여러 메서드를 이용한 구현

2. setTimeout() 의 기능 및 비동기의 기본 개념 이해

3. 프로그래밍 구성도를 활용한 체계적 프로그래밍 구현

더 배울 점

1. 비동기를 이용한 기능 구현

저작자표시

'자바스크립트' 카테고리의 다른 글

JavaScript - 클래스 (0)	2024.01.02
JavaScript - 배열의 특징과 생성 (0)	2023.12.29
JavaScript - 생성자 함수 (1)	2023.12.28
JavaScript - 객체 (0)	2023.12.28
JavaScript - 함수 (0)	2023.12.26

동찬 코드 일지