我怎样才能限制功能-(老虎机播放)仅 5 回合 - 带有 do/while 循环

Question

我想通过javascript创建一个带有3个数字的老虎机 - 但我想在三个数字相等时完成我的函数。我认为如果我用 do/while 来写它会是工作，但我做不到这是我的JS代码：

 function myF() {
  var slotOne = Math.floor(Math.random() * 3) + 1;
  var slotTwo = Math.floor(Math.random() * 3) + 1;
  var slotThree = Math.floor(Math.random() * 3) + 1;
  document.getElementById("slotOne").innerHTML = slotOne;
  document.getElementById("slotTwo").innerHTML = slotTwo;
  document.getElementById("slotThree").innerHTML = slotThree;
  if(slotOne == slotTwo &&  slotTwo == slotThree) {
    document.getElementById("slotOne").style.backgroundColor = "#48bd48";
    document.getElementById("slotTwo").style.backgroundColor = "#48bd48";
    document.getElementById("slotThree").style.backgroundColor = "#48bd48";
    document.getElementById("winner").classList.add("show");
  }
 }

此功能onclick按钮标签的吸引力

Answer 1

添加到注释中，如果您想不运行函数，那么只需使用计数器变量来检查尝试次数：

添加了重置按钮以重置游戏。

var counter = 0;
function myF() {
 if (counter != 5) {
  counter++;
  document.getElementById("slotLeft").innerHTML = "Try count: " + counter;
  var slotOne = Math.floor(Math.random() * 3) + 1;
  var slotTwo = Math.floor(Math.random() * 3) + 1;
  var slotThree = Math.floor(Math.random() * 3) + 1;
  document.getElementById("slotOne").innerHTML = slotOne;
  document.getElementById("slotTwo").innerHTML = slotTwo;
  document.getElementById("slotThree").innerHTML = slotThree;
  if (slotOne == slotTwo && slotTwo == slotThree) {
   document.getElementById("slotOne").style.backgroundColor = "#48bd48";
   document.getElementById("slotTwo").style.backgroundColor = "#48bd48";
   document.getElementById("slotThree").style.backgroundColor = "#48bd48";
   document.getElementById("winner").classList.add("show");
   counter = 5; // Edited this line
  }
 } else {
  console.log('Game over');
 }
}
function myF1(){
  counter = 0;
  document.getElementById("slotOne").innerHTML = "";
  document.getElementById("slotTwo").innerHTML = "";
  document.getElementById("slotThree").innerHTML = "";
}

<button onclick="myF()">Check</button>
<button onclick="myF1()">Restart Game</button>
<div id="slotLeft">
</div>
<div id="slotOne">
</div>
<div id="slotTwo">
</div>
<div id="slotThree">
</div>
<div id="winner">
</div>

Answer 2

 function myF() {
  var slotOneElem = document.getElementById("slotOne");
  var slotTwoElem = document.getElementById("slotTwo");
  var slotThreeElem = document.getElementById("slotThree");
  var generateRand = function() {
    return Math.floor(Math.random() * 3) + 1;
  }
  return (function () {
    var slotOne   = generateRand();
    var slotTwo   = generateRand();
    var slotThree = generateRand();
    
    slotOneElem.innerHTML = slotOne;
    slotTwoElem.innerHTML = slotTwo;
    slotThreeElem.innerHTML = slotThree;
    
    if (slotOne === slotTwo && slotTwo === slotThree) {
      slotOneElem.style.backgroundColor = "#48bd48";
      slotTwoElem.style.backgroundColor = "#48bd48";
      slotThreeElem.style.backgroundColor = "#48bd48";
      document.getElementById("winner").classList.add("show");
      // Here is the win
      return true;
    } 
    
    return false;
  })();
 }
 
 var finished = myF();
 while (!finished) {
  finished = myF();
 }