[css+javascript] 룰렛

생각보다 이벤트 페이지에서 많이 사용되는 룰렛을 jQuery가 아닌 javascript로만 구현해 보고 싶어졌다.

jQuery를 사용한다면 코딩 몇줄로 구현되어 웬만한 브라우저에 지원되겠지만....

 

구글 검색 '룰렛'

이벤트 페이지는 그래픽/디자인이 많이 들어가기 때문에 대체로 이미지를 활용하게 된다.

 

[작업 플로우]

1. 최소 돌림판, 지시화살표, 버튼 의 엘리먼트가 필요

2. 지시화살표는 상단에 고정

3. 버튼을 클릭시 -> 몇바퀴 360도 회전하다가 멈춤

4. 멈추는 대상은 랜덤이여야함 

5. 돌림판은 이미지, 지시화살표는 css로 처리

 

1. start / stop

클래스 이름을 잘못지었으나, 수정하기 귀찮으니 그대로 진행. 

부모객체 div.rouletter의 크기를 400 x 400 으로 정하고, 돌림판의 크기를 350 x 350으로 하여 중간에 위치하게 했다.

버튼을 클릭해서 start로 만든다음 돌림판을 stop누를때까지 회전을 시킬꺼라 keyframe을 사용해주자.

 

<div class="rouletter">
    <div class="rouletter-bg"><div class="rouletter-wacu"></div></div>
    <div class="rouletter-arrow"></div>
    <button class="rouletter-btn">start</button>
</div>

.rouletter{
	position: relative;
    width:400px;
    height:400px;
}
.rouletter-bg{
	position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:350px;
    height:350px;
    border-radius:350px;
	overflow:hidden;
}
.rouletter-wacu{
    width:100%;height:100%;
	background:#f5f5f2 url('https://m.lifeplanet.co.kr:444/commons/slink/administrator/openInnovation/img/MO)%20360%ED%94%8C%EB%9E%98%EB%8B%9B_%EB%A3%B0%EB%A0%9B%ED%8C%90_476x476_201026.png') no-repeat;
    background-size:100%;
    transform-origin: center;
}
.rouletter-arrow{
	position: absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:1px;
    height:1px;
    border-right:10px solid transparent;
    border-left:10px solid transparent;
    border-top:40px solid red;
    border-bottom:0px solid transparent;
}
.rouletter-btn{
	position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:80px;
    height:80px;
    border-radius:80px;
    background:#fff;
    border-image: linear-gradient(to right, #fbfcb9be, #ffcdf3aa, #65d3ffaa);
    border: 2px solid;
}

// 돌림판 회전 애니메이션
.on{
    animation-name: ani;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;  
    animation-iteration-count: infinite;
}

@keyframes ani{
    0% { 
        transform: rotate(0deg); 
    	transition-timing-function: ease-out;
    }
    100%{ 
        transform: rotate(360deg); 
    }
}

 

애니메이션은 클래스명 on에 담아놓고, javascript로 명령해주자.

 

var rouletter = {
	// 부여할 숫자 랜덤으로 하기
    random:function(){
        min = Math.ceil(0);
        max = Math.floor(5);
        return Math.floor(Math.random() * (max - min)) + min;      
    },
    // start 버튼
    start:function(){
    	var btn = document.querySelector('.rouletter-btn');
        var panel = document.querySelector('.rouletter-wacu');
        
        panel.classList.add('on');
        btn.innerText = 'stop';
    },
    // stop 버튼
    stop:function(){
        var btn = document.querySelector('.rouletter-btn');
    	var panel = document.querySelector('.rouletter-wacu');
        // 돌림판 형태가 6개로 분할되어있어 필요한 각도를 array로 만들었다.
        // 후에 length로 for문으로 돌려서 array처리로 변경하면 보다 동적으로 대처할수 있겠다.
        var deg = [60,120,180,240,300,360];
        
        panel.style.transform = 'rotate('+ deg[rouletter.random()] +'deg)';
        panel.classList.remove('on');
        btn.innerText = 'start';
    }
}
                                 
document.addEventListener('click',function(e){
    var target = e.target
    if( target.tagName === 'BUTTON'){
        target.innerText === 'start' 
            ? rouletter.start() : rouletter.stop();
    }
})

< preview >

 

 

 

2. start

 

start/stop 상태에서 버튼한번 클릭으로 결과 도출하는 상태도 만들어보자.

그리고 돌림판을 몇바퀴 회전시키다가 멈춤처리를 할것이라 css에서 keyframe을 사용하지 않고 js에서 처리 할것이다.

var rolLength = 6;

var rolette = {
	rRandom :function(){
      var min = Math.ceil(0);
      var max = Math.floor(rolLength-1);
      return Math.floor(Math.random() * (max - min)) + min;
    },
	rRotate:function(){
    	var panel = document.querySelector(".rouletter-wacu");
        var deg = [];
        for (var i = 1, len = rolLength; i <= len; i++) {
          deg.push((360 / len) * i);
        }

        var baseDeg = 7200; //20바퀴회전
        var stopDeg = baseDeg + deg[rolette.rRandom()]; // + 부여된 랜덤숫자에 해당하는각도
        panel.animate(
          //keyframe
          [
            { transform: "rotate(0deg)" },
            { transform: "rotate(" + stopDeg + "deg)" }
          ],
          // animation option
          {
            fill: "forwards",
            duration: 7000,
            easing: "ease-out"
          }
        );
    }
}


document.addEventListener("click", function (e) {
  var target = e.target;
  if (target.tagName === "BUTTON") {
    rolette.rRotate();
  }
});

 

<preview>

 

위 코드는 최신브라우저에서만 가능하다. 

ie 자체는 아예 무시된 경우인데, 아무래도 cross 처리 되는 룰렛도 만들어야겠다.

 

 

3. 보안된 룰렛

IE 꺼저라

하.. 그나마 두루두루 쓸수 있는 코드로 변경하면서 좀 보안해보자.

  1. 위에 코드들은 회전하는 동안 클릭을 할 수 있기때문에 동작중 클릭막기.

  2. css에서는 이미지에 transition옵션을 추가해주고 element.animate()의 대체요소로 setInterval() 활용,

    > transition-timing-function: ease-in-out;
    > transition: 2s;

 

var rolLength = 6;

const rRandom = () => {
  var min = Math.ceil(0);
  var max = Math.floor(rolLength - 1);
  return Math.floor(Math.random() * (max - min)) + min;
};

const rRotate = () => {
  var panel = document.querySelector(".rouletter-wacu");
  var btn = document.querySelector(".rouletter-btn");
  var deg = [];
  for (var i = 1, len = rolLength; i <= len; i++) {
    deg.push((360 / len) * i);
  }

  var num = 0; //회전을 시킬 횟수
  var ani = setInterval(() => {
    num++; //인터벌 수치만큼 증가
    panel.style.transform = "rotate(" + 360 * num + "deg)";
    // 버튼 이벤트 막기
    btn.disabled = true; //button,input
    btn.style.pointerEvents = "none"; //a 태그
	
    // 횟수 50에 다달았을때,
    if (num === 50) {
      clearInterval(ani); //회전 삭제
      panel.style.transform = "rotate(" + deg[rRandom()] + "deg)"; //랜덤숫자로 멈춤
    } 
  }, 50);
};

document.addEventListener("click", function (e) {
  var target = e.target;
  if (target.tagName === "BUTTON") {
    rRotate();
	
    // transition-timing-function 를 ease-in-out로 적용 햇기때문에 잔여초 이후 버튼활성화
    setTimeout(() => {
      target.disabled = false;
      target.style.pointerEvents = "auto";
      console.log("이벤트가 끝남");
    }, 5500);
  }
});

 

<preview>

 

 

 

4. 최종

결과 팝업까지 띄어야 프론트에서 할수있는 부분을 다 한거 같다.

랜덤숫자 부분은 사은품 갯수가 한정되어 있고 디비에 데이터도 저장해야 하기 때문에 관련해서는 백엔드에서 예외, 중복 처리 및 데이터 처리를 해야 할것이다.

 

* html

<!DOCTYPE html>
<html>
  <head>
    <title>룰렛</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>

    <script src="src/roulette.js"></script>
  </body>
</html>

 

*css

.rouletter {
  position: relative;
  width: 400px;
  height: 400px;
}
.rouletter-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  border-radius: 350px;
  overflow: hidden;
}
.rouletter-wacu {
  width: 100%;
  height: 100%;
  background: #f5f5f2
    url("https://m.lifeplanet.co.kr:444/commons/slink/administrator/openInnovation/img/MO)%20360%ED%94%8C%EB%9E%98%EB%8B%9B_%EB%A3%B0%EB%A0%9B%ED%8C%90_476x476_201026.png")
    no-repeat;
  background-size: 100%;
  transform-origin: center;
  transition-timing-function: ease-in-out;
  transition: 2s;
}
.rouletter-arrow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 1px;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 40px solid red;
  border-bottom: 0px solid transparent;
}
.rouletter-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 80px;
  background: #fff;
  border-image: linear-gradient(to right, #fbfcb9be, #ffcdf3aa, #65d3ffaa);
  border: 2px solid;
}

.hidden-input {
  display: none;
}

 

*javascript

var rolLength = 6; // 해당 룰렛 콘텐츠 갯수
var setNum; // 랜덤숫자 담을 변수
var hiddenInput = document.createElement("input");
hiddenInput.className = "hidden-input";

//랜덤숫자부여
const rRandom = () => {
  var min = Math.ceil(0);
  var max = Math.floor(rolLength - 1);
  return Math.floor(Math.random() * (max - min)) + min;
};

const rRotate = () => {
  var panel = document.querySelector(".rouletter-wacu");
  var btn = document.querySelector(".rouletter-btn");
  var deg = [];
  // 룰렛 각도 설정(rolLength = 6)
  for (var i = 1, len = rolLength; i <= len; i++) {
    deg.push((360 / len) * i);
  }
  
  // 랜덤 생성된 숫자를 히든 인풋에 넣기
  var num = 0;
  document.body.append(hiddenInput);
  setNum = hiddenInput.value = rRandom();
	
  // 애니설정
  var ani = setInterval(() => {
    num++;
    panel.style.transform = "rotate(" + 360 * num + "deg)";
    btn.disabled = true; //button,input
    btn.style.pointerEvents = "none"; //a 태그
    
    // 총 50에 다달했을때, 즉 마지막 바퀴를 돌고나서
    if (num === 50) {
      clearInterval(ani);
      panel.style.transform = `rotate(${deg[setNum]}deg)`;
    }
  }, 50);
};

// 정해진 alert띄우기, custom modal등
const rLayerPopup = (num) => {
  switch (num) {
    case 1:
      alert("당첨!! 스타벅스 아메리카노");
      break;
    case 3:
      alert("당첨!! 햄버거 세트 교환권");
      break;
    case 5:
      alert("당첨!! CU 3,000원 상품권");
      break;
    default:
      alert("꽝! 다음기회에");
  }
};

// reset
const rReset = (ele) => {
  setTimeout(() => {
    ele.disabled = false;
    ele.style.pointerEvents = "auto";
    rLayerPopup(setNum);
    hiddenInput.remove();
  }, 5500);
};

// 룰렛 이벤트 클릭 버튼
document.addEventListener("click", function (e) {
  var target = e.target;
  if (target.tagName === "BUTTON") {
    rRotate();
    rReset(target);
  }
});

// roulette default
document.getElementById("app").innerHTML = `
<div class="rouletter">
    <div class="rouletter-bg">
        <div class="rouletter-wacu"></div>
    </div>
    <div class="rouletter-arrow"></div>
    <button class="rouletter-btn">start</button>
</div>
`;

 

<preview>