水果机小游戏制作要点，快来pick你的老虎机吧！

2023-11-03 06:49:37

老虎机，又称吃角子老虎，是一种以旋转滚轮来决定赢或输的游戏，通常是玩老虎机的游戏者投下硬币，然后旋转滚轮，滚轮停止后，依照各种图案组合是否符合预先设定的组合来决定输赢，是种赌博机器。根据界面设计的不同，老虎机可以分为古典老虎机、五轴老虎机、复合老虎机，不同种类的老虎机有不同的计算赔率方式。

那么自己如何制作一个老虎机呢？今天小编就来给大家介绍老虎机小游戏的一些实现要点，快来pick你的老虎机吧！

老虎机的整体外观样式还是比较好写的，对老虎机的外观布局如果有兴趣的话可以直接参考代码，小编就不一一介绍了。文章主要介绍的是老虎机中间三个小格子和机身动画的一些实现要点。（读者想实操的话也可以自己找一张背景图当作老虎机的背景，这里小编只是自己好奇而已所以就用各种基础布局和样式实现…）

现在我们就要做老虎机中间三个小格子的动画了，小编认为这是老虎机的核心部分。

首先我们先定义三个样式类来模拟老虎机的三个格子：

.slot-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.slot-item {
  width: 50px;
  height: 50px;
  margin: 0 10px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 50%;
}

.slot-item-active {
  background-color: #f00;
}

接下来我们用 JavaScript 来模拟老虎机的转动动画：

const slotContainers = document.querySelectorAll('.slot-container');

const slotItems = document.querySelectorAll('.slot-item');

const startButton = document.getElementById('start-button');

let isSpinning = false;

startButton.addEventListener('click', () => {
  if (isSpinning) {
    return;
  }

  isSpinning = true;

  slotContainers.forEach((slotContainer) => {
    const slotItems = slotContainer.querySelectorAll('.slot-item');

    let index = 0;

    const interval = setInterval(() => {
      slotItems[index].classList.remove('slot-item-active');

      index++;

      if (index >= slotItems.length) {
        index = 0;
      }

      slotItems[index].classList.add('slot-item-active');
    }, 100);

    setTimeout(() => {
      clearInterval(interval);

      isSpinning = false;
    }, 3000);
  });
});