Emoji slot

by bc_rikko

HTML

<div id="slot"></div>
<button id="start" class="btn btn-start">Start</button>
<button id="stop" class="btn btn-stop">Stop</button>

CSS

#slot {
  margin: 10px;
  width: 60px;
  height: 60px;
  background: url(https://cdx.slack-edge.com/bfaba/img/emoji_2016_06_08/sheet_apple_64_indexed_256colors.png);
}

.btn {
  width: 80px;
  height: 30px;
}

JavaScript

const slot = document.getElementById('slot');
let x = 0;
let y = 0;

let slotTimer = null;

const start = document.getElementById('start');
start.addEventListener('click', () => {
  if (slotTimer !== null) return;
  slotTimer = setInterval(() => {
    slot.style.backgroundPositionX = x + '%';
    slot.style.backgroundPositionY = y + '%';

		if (y < 100) {
      y += 2.5;
    } else {
      y = 0;
      
      if (x < 100) {
        x += 2.5;
      } else {
        x = 0;
      }
    }
  }, 10);
});

const stop = document.getElementById('stop');
stop.addEventListener('click', () => {
  clearInterval(slotTimer);
  slotTimer = null;
});