[javascript]플러그인 없이 슬롯 머신 만들기

HTML

<div class="slot">
    <div class="coffee-machine">
      <img src="./img/top.png">
      <p class="txt"></p>
          <ul class="slots">
                <li class="slots__reel"></li>
                <li class="slots__reel"></li>
                <li class="slots__reel"></li>
          </ul>
      <a id="spin-cta">시작!</a>
      <div class="bottom">
        <img src="./img/bottom.png">
      </div>
    </div>
</div>

<div class="apply_wrap" style="display:none;">
<!--내용-->
</div>

CSS

.slot{background-image: url(./img/bg.jpg);    min-height: 440px;   max-height: 860px;  text-align: center;  max-width: 640px;  min-width: 320px;  overflow: hidden;  margin: 0 auto;  background-size: cover;}

    .slots img{width: 100%; height: auto;}
    .coffee-machine {
      width: 90%;
      margin: 0 auto;
      text-align: center;
    }

    #spin-cta {
      background: linear-gradient( #31cdb0, #3551a4);
      border: 1px solid #000;
      border-radius: 5px;
      box-sizing: border-box;
      display: block;
      width: 30%;
      margin: 0px auto;
      margin-top: 30px;
      padding: 5px;
      font-family: Open Sans, Arial, San-serif;
      font-weight: bold;
      font-size: 24px;
      color: #fff;
      text-transform: uppercase;
      text-shadow: 1px 1px 1px #000;
      cursor: pointer;
      border:none;
    }
    #spin-cta:active {
      background: #00e600;
      position: relative;
      top: 3px;
      left: 3px;
    }

    .txt {
      font-family: Open Sans, Arial, San-serif;
      font-size: 1.5em;
    }
    .txt .winner {
      background: limegreen;
      border: 3px dotted #000;
      border-radius: 10px;
      font-weight: bold;
      padding: 10px 40px;
    }
    .txt .loser {
      background: #ff0000;
      border: 3px dotted #000;
      border-radius: 10px;
      color: #fff;
      font-weight: bold;
      padding: 10px 40px;
    }

    .slots {
      background: #b5bdc8;
      /* Old browsers */
      background: -moz-linear-gradient(top, #ff91a9 0%, #ff5c96 36%, #ff759f 100%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #ff91a9 0%, #ff5c96 36%, #ff759f 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, #ff91a9 0%, #ff5c96 36%, #ff759f 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      font-size: 100px;
      font-family: Arial, Helvetica, Sans-serif;
      overflow: hidden;
      width: 100%;
      max-height: 19%;
      border: 1px solid black;
      display: flex;
      justify-content: space-around;
      margin: 0;
      border-radius:10px;		
      padding: 0 10px;
    }


    .slots .slots__reel {
      position: relative;
      background: #efefef;
      border: 3px solid #666;
      flex-grow: 1;
      width: 100%;
      text-align: center;
      display: inline-block;
      overflow: hidden;
      border-radius: 10px;
      padding: 5px 10px;
      box-sizing: border-box;
      margin: 10px;
    }
    .slots .slots__reel .items {
      position: relative;
      top: -47px;
      padding: 0px;
    }
    .slots .slots__reel .items li {
      font-size: 19px;
      font-family: impact;
      height: 120px;
      margin-top: 54px;
      list-style: none;
      position: relative;
      z-index: 1;
    }

JS

var coffeeMachine = (function() {

  var maxTime = 2000, // time measured in milliseconds
    height = 310, // height of reels
    speeds = [], // reel arry speed
    r = [], // reel arry values
    reelArry = [
      ['./img/sse.png', './img/01.png', './img/02.png'],
      ['./img/sse.png', './img/01.png', './img/02.png'],
      ['./img/sse.png', './img/01.png', './img/02.png']
    ],
    slotReels, txt, begin;

  function init() {
    slotReels = document.querySelectorAll('.slots__reel');
    for (i = 0; i < slotReels.length; i++) {
      slotReels[i].innerHTML = '<ul class="items"><li><img src="' + reelArry[i].join('"></li><li><img src="') + '"></li></ul><ul class="items"><li><img src="' + reelArry[i].join('"></li><li><img src="') + '"></li></ul>';
      console.log(slotReels.innerHTML);
    }

    txt = document.querySelector('.txt');

    document.querySelector('#spin-cta').addEventListener('click', daMagic);
  }

  function daMagic() {
    if (begin !== undefined) {
      return;
    }

    for (var i = 0; i < 3; ++i) {
     // speeds[i] = Math.random() + .5;
      speeds[i] =  Math.random()*2;
      r[i] = ( 1 * 3 | 0) * height / 3;

    }

    txt.innerHTML = '';
    animate();
  }

  function animate(now) {
    if (!begin) {
      begin = now;
    }

    var t = now - begin || 0;

    for (var i = 0; i < 3; ++i) {
      slotReels[i].scrollTop = (speeds[i] / maxTime / 2 * (maxTime - t) * (maxTime - t) + r[i]) % height | 0;
      // console.log(slotReels[i]);
    }

    if (t < maxTime) {
      requestAnimationFrame(animate); // animate callback
      // console.log('animate?');
    } else {
      begin = undefined;
      checkWinner();
      // console.log('check');
    }

  }

  function checkWinner() {
    if (r[0] === r[1] && r[1] === r[2]) {
     alert('축하합니다!');
        $('.slot').fadeOut()
        $('body').css('background-color', '#fff');;
        $('.apply_wrap').fadeIn();
    } 
  }

  return {
    init: init
  }

})();

coffeeMachine.init();

당첨되게 하기(같은 상품으로)

 

 

Coffee Slot Machine

https://codepen.io/seoyeon-00/pen/wvjbYmK   참고(랜덤일 경우)