我如何限制功能-（老虎機）僅5圈-使用do / while循環

Question

我想用JavaScript用3個數字創建一個老虎機-但是我想在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(); }