본문 바로가기

js

[js]룰렛 만들기

  let timer=null;
  $("#roulette_btn").click(function () {
    if($(this).hasClass("off")){
      alert("룰렛을 돌릴수 없습니다.");
    }else{
      if(timer) return;
      rouletteStart()
      timer = setTimeout(()=>{
        timer=null
      },3500)
    }
  })
// 연속 돌리기 막기 위함

  let rouletteStart = () => {
    rouletteBoard.css("transform",`rotate(-30deg)`)
    $("#winning_ment").hide();
    $("#roulette_btn").addClass("off")
		
    let rotate = 360 * 5; // 회전 횟수
    let trunDeg;
    let resultText;
    let result = Math.floor(Math.random()*1000);
    // 당첨 확률 0.1%까지 쪼개기
		
    if(result<5) {trunDeg = winningNum(300,360); resultText="10코인";}
    if(5<=result && result<30) {trunDeg = winningNum(240,300); resultText="5코인";}
    if(30<=result && result<60) {trunDeg = winningNum(180,240); resultText=" 3코인";}
    if(60<=result && result<100) {trunDeg = winningNum(120,180); resultText=" 2코인";}
    if(100<=result && result<500) {trunDeg = winningNum(60,120); resultText=" 1코인";}
    if(500<=result) {trunDeg = winningNum(0,60);}

    setTimeout(()=>{
      rouletteBoard.css("transform",`rotate(${trunDeg+rotate}deg)`)
      setTimeout(()=>{
        $("#winning_ment").show();
        if(500<=result){
          $("#winning_ment .text").text(`아쉽지만 꽝이에요. 다음에 기회를 노려보세요!`)
        }else{
          $("#winning_ment .text").text(`축하합니다! ${resultText}에 당첨되셨습니다.`)

        }
      },3200)
    },100)
  }

  let winningNum = (min,max) => {
    return Math.floor(Math.random() * ( (max-2) - (min+2) + 1)) + (min+2);
  }
  // 랜덤 숫자 출력
  // 당첨 룰렛 사이 애매한 공간 안생긱게 하기 위해 minmax에서 각각 플마2씩해줌

  roulettAble()

 

 

See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen.

'js' 카테고리의 다른 글

[js]animation transform rotate 사용안됨  (0) 2025.07.01
[js]ios 구분 애플 구분  (1) 2025.06.04
[js]카운트다운 버튼 만들기 countdown button  (0) 2024.12.12
[js]chart.js 각종 속성  (0) 2024.08.22
[js]FullCalendar.js  (0) 2024.08.14

top