老虎机多次旋转

Question

我正在使用这款plugin制作一台简单的老虎机，工作正常。但是，我想要做的是，在显示结果后，从用户输入创建另一个旋转基础。我试着用循环但没有运气。

希望你帮帮我。

谢谢。

SAMPLE CODE

$(document).ready(function(){

  var machine1 = $('#machine1').slotMachine();
  var machine2 = $('#machine2').slotMachine();
  var machine3 = $('#machine3').slotMachine();
  var machine4 = $('#machine4').slotMachine();
  var machine5 = $('#machine5').slotMachine();

  var arrResult = [];

function onComplete(active){
  arrResult.push(this.active);
  if (arrResult.length === 5) {
      var output = arrResult.join('');
  }
}
  $('button').click(function() {
    result = [];
    machine1.shuffle(10, onComplete);
    machine2.shuffle(15, onComplete);
    machine3.shuffle(20, onComplete);
    machine4.shuffle(25, onComplete);
    machine5.shuffle(30, onComplete);
  });
  });

Answer 1

它有点粗糙，但是通过在每个成功的槽辊的末端减少辊子然后如果剩余的辊子> 0则运行槽，则它起作用。

rolls--;
if(rolls > 0){
  setTimeout(function(){ 
    machine1.shuffle(10, onComplete);
    machine2.shuffle(15, onComplete);
    machine3.shuffle(20, onComplete);
    machine4.shuffle(25, onComplete);
    machine5.shuffle(30, onComplete);
  }, 1500);
}

Updated code pen demo

Answer 2

我已经设置了一个codesandbox来做你想做的事情。

分解我的解决方案：

1. 在mount上，将id为“machine”的div转换为老虎机
2. 有一个按钮来触发老虎机的旋转
3. 有一个输入元素来接受旋转老虎机的次数
4. 清除按钮以清除结果

所以说你在文本输入中输入2，然后点击随机播放。我们将调用带有回调的slotmachine.shuffle()，它将存储当前结果，然后再次旋转老虎机，如果the number of times to shuffle > 0

想法是随机播放，跟踪结果，然后以编程方式再次调用shuffle并继续重复该过程多次。