一旦滿足一個案例條件，如何在switch語句中更改案例？

Question

我想弄清楚如何在Javascript/jQuery中的案例之間切換。我正在創建一個骰子游戲，玩家需要擲骰子直到完成「階段」。一旦完成「階段」，他們將進入下一個「階段」，任何先前的「階段」都不會干擾當前的「階段」。將會有幾個不同的「階段」，他們從「階段1」開始，到「階段2」，等到最後階段。有什麼辦法可以解決「階段」？我在這裏嘗試了一個switch語句，但沒有成功。如果switch語句不能完成這項工作，會有什麼結果？

//Start of Dice Code 
var die1Array = []; 
var die2Array = []; 
var die3Array = []; 

var die1 = function() { 
    var roll1 = Math.floor(Math.random() * 6) + 1; 
    if(roll1 === 1) { 
     die1Array.push(1); 
    } 
    else if(roll1 === 2) { 
     die1Array.push(2); 
    } 
    else if(roll1 === 3) { 
     die1Array.push(3); 
    } 
    else if(roll1 === 4) { 
     die1Array.push(4); 
    } 
    else if(roll1 === 5) { 
     die1Array.push(5); 
    } 
    else if(roll1 === 6) { 
     die1Array.push(6); 
    } 
}; 

var die2 = function() { 
    var roll2 = Math.floor(Math.random() * 6) + 1; 
    if(roll2 === 1) { 
     die2Array.push(1); 
    } 
    else if(roll2 === 2) { 
     die2Array.push(2); 
    } 
    else if(roll2 === 3) { 
     die2Array.push(3); 
    } 
    else if(roll2 === 4) { 
     die2Array.push(4); 
    } 
    else if(roll2 === 5) { 
     die2Array.push(5); 
    } 
    else if(roll2 === 6) { 
     die2Array.push(6); 
    } 
}; 

var die3 = function() { 
    var roll3 = Math.floor(Math.random() * 6) + 1; 
    if(roll3 === 1) { 
     die3Array.push(1); 
    } 
    else if(roll3 === 2) { 
     die3Array.push(2); 
    } 
    else if(roll3 === 3) { 
     die3Array.push(3); 
    } 
    else if(roll3 === 4) { 
     die3Array.push(4); 
    } 
    else if(roll3 === 5) { 
     die3Array.push(5); 
    } 
    else if(roll3 === 6) { 
     die3Array.push(6); 
    } 
}; 
//End of Dice Code 


var main = function() { 

    $("#roll").on("click", die1); 
    $("#roll").on("click", die2); 
    $("#roll").on("click", die3); 
    $("#roll").on("click", die4); 
    $("#roll").on("click", die5); 
    $("#roll").on("click", die6); 

    //Where I want to switch between cases. 
    //Once Phase 1's condition (the if statement) is met, I want to switch to Phase 2. 
    var lvls = 1; 
    switch(lvls) { 
     case 1: 
      alert("Phase 1"); 
      $("#submit").click(function() { 
       if((die1Array.slice(-1)=="1"||die2Array.slice(-1)=="1"||die3Array.slice(-1)=="1")&&(die1Array.slice(-1)=="2"||die2Array.slice(-1)=="2"||die3Array.slice(-1)=="2")&&(die1Array.slice(-1)=="3"||die2Array.slice(-1)=="3"||die3Array.slice(-1)=="3")) { 
        alert("Completed Phase 1: Straight of 3"); 
        lvls = 2; 
        return lvls; 
       } 
       else { 
        alert("Phase 1: Straight of 3. Not Complete. Try again."); 
       }; 
      }); 
      break; 

     case 2: 
      alert("Phase 2"); 
      //Phase 2's code 
      break; 

     //Additional cases/Phases would go here. 
     default: 
    }; 

}; 


$(document).ready(main); 

Answer 1

在你的die＃功能，你可以只推這些值，而不是，如果其他部分。

var die1 = function() { 
    var roll1 = Math.floor(Math.random() * 6) + 1; 
    die1Array.push(roll1); 
} 

或者更一般：

變種模=函數（dieArray）{ dieArray.push（Math.floor（的Math.random（）* 6）+ 1）; }

使用：

模具（die1Array）; die（die2Array）; （die3Array）; die（die3Array）; ...

您當前的問題swithc是您綁定事件處理函數的情況下。

如果您希望該事件處理程序僅在特定狀態下工作，則應設置狀態變量以保存當前狀態並在處理函數中檢查此變量。

var main = function() { 
    var diceState = 1; 

    $("#submit").click(function() { 
      if (diceState === 1) { 
       // do something 
      } 
     }); 

    switch(lvls) { 
    case 1: 
      diceState = 1; 
      break; 

    case 2: 
     diceState = 2; 
     break; 
    } 

你有另外一個問題是，你在主函數設置的lvls 1的值，所以你將有隻有1例，lvls的其他變化將沒有任何效果可言，即使你再次打電話主。

如果你打電話超過一個時間主更多，那麼你有你時間可持續綁定事件的onsubmit這個問題，所以每次提交表單時，函數處理程序被調用多次。

您應該將開關語句移入其他函數中，將狀態變量作爲參數傳遞，並在每次要更改狀態時調用。

所以這裏一個例子：

// Should be in same scope of the function 
// or an attribute of an object to be passed by reference. 
var diceState; 

var changeState = function (state) { 
    switch(state) { 
    case 1: 
     diceState = 1; 
     break; 
    .... 
    default: 
     throw new Error("State " + state + " not supported"); 
    } 
} 

，並使用默認情況下處理突發值，一個很好的做法。

這裏就介紹如何改變你的主要功能一個建議：

var main = function() { 

    var lvls; 

    $("#roll").on("click", die1); 
    $("#roll").on("click", die2); 
    $("#roll").on("click", die3); 
    $("#roll").on("click", die4); 
    $("#roll").on("click", die5); 
    $("#roll").on("click", die6); 

    var changeState = function (state) { 
     switch(state) { 
     case 1: 
      alert("Phase 1"); 
      lvls = state; 
      break; 

     case 2: 
      alert("Phase 2"); 
      //Phase 2's code 
      lvls = state; 
      break; 

     //Additional cases/Phases would go here. 
     default: 
     }; 
    } 

    // bind the event handler 
    $("#submit").click(function() { 
if((die1Array.slice(-1)=="1"||die2Array.slice(-1)=="1"||die3Array.slice(-1)=="1")&&(die1Array.slice(-1)=="2"||die2Array.slice(-1)=="2"||die3Array.slice(-1)=="2")&&(die1Array.slice(-1)=="3"||die2Array.slice(-1)=="3"||die3Array.slice(-1)=="3")) { 
       alert("Completed Phase 1: Straight of 3"); 
       changeState(2); 

       // you could not return the vaue here! 
       // return lvls; 
      } 
      else { 
       alert("Phase 1: Straight of 3. Not Complete. Try again."); 
      }; 
     }); 

    changeState(1); 

}; 

Answer 2

解決你的問題之前，我想提一提你的if/else語句：

if(roll1 === 1) { 
    die1Array.push(1); 
} 
else if(roll1 === 2) { 
    die1Array.push(2); 
} 

如果你打算把的roll1價值爲die1Array不管值是什麼，爲什麼你每次都檢查它嗎？只需做一個die1Array.push(roll1);並稱之爲一天。

我不認爲你甚至想要在這裏的switch語句。你希望通過switch語句實現什麼？

你的代碼的邏輯基本上是這樣的：

var main = function() { 
    // onclick stuff 
    lvls = 1 
    switch(lvls){} 
} 

這將立即進入此開關語句的1硬值，你立即強制在它之前，因此總是打尚屬首例。

這個邏輯似乎更適合調用各種函數。可能是phaseTwo(){...}的函數，但switch語句主要用於檢查某個特定點的項目狀態，而不是用於跟蹤一段時間的狀態。

Answer 3

下面是一些工作ES6代碼可能對你有用。

它定義了數組中每個階段的名稱和驗證函數。 roll函數幾次執行5個骰子（可以是任意數字）的隨機生成，以便給出一些動畫，然後回調，提供每個骰子的值。

然後使用全局變量lvl查找並執行正確的驗證功能。如果通過，lvl遞增：

const dieFaces = [null,'⚀','⚁','⚂','⚃','⚄','⚅']; 
 
const DICE_COUNT = 5; 
 
var lvl = 0; 
 
var phases = [ 
 
    { 
 
     descr: 'Phase 1: Pair', 
 
     test: function (counts) { 
 
      return counts.some(count => count > 1); 
 
     } 
 
    }, 
 
    { 
 
     descr: 'Phase 2: Three of a Kind', 
 
     test: function (counts) { 
 
      return counts.some(count => count > 2); 
 
     } 
 
    }, 
 
    { 
 
     descr: 'Phase 3: Full House', 
 
     test: function (counts) { 
 
      return counts.some(count => count > 2) && 
 
        counts.filter(count => count > 1).length > 1; 
 
     } 
 
    }, 
 
    { 
 
     descr: 'Phase 4: Small Straight', 
 
     test: function (counts) { 
 
      return counts.map(count => count>0).join('').indexOf('1111') > -1; 
 
     } 
 
    }, 
 
    { 
 
     descr: 'Phase 5: Large Straight', 
 
     test: function (counts) { 
 
      return counts.map(count => count>0).join('').indexOf('11111') > -1; 
 
     } 
 
    }, 
 
    { 
 
     descr: 'Phase 6: Four of a Kind', 
 
     test: function (counts) { 
 
      return counts.some(count => count > 3); 
 
     } 
 
    } 
 
]; 
 

 
function roll(callback, rolling = 20) { 
 
    let faces = []; 
 
    let dice = []; 
 
    for (let i = 0; i < DICE_COUNT; i++) { 
 
     let die = Math.floor(Math.random() * 6) + 1; 
 
     dice.push(die); 
 
     faces.push(dieFaces[die]); 
 
    } 
 
    $('#dice').html(faces.join(' ')); 
 
    if (!rolling) return callback(dice); 
 
    setTimeout(roll.bind(null, callback, rolling-1), 50); 
 
} 
 

 
$("#roll").on("click", function() { 
 
    $('#result').text(""); 
 
    roll(function (dice) { 
 
     var acc = dice.map(die => 0); 
 
     dice.forEach(die => ++acc[die]); 
 
     if (phases[lvl].test(acc)) { 
 
      $('#result').text("Completed " + phases[lvl].descr); 
 
      lvl++; 
 
      $('#phase').text(phases[lvl].descr); 
 
     } else { 
 
      $('#result').text("Try again"); 
 
     } 
 
    }); 
 
}); 
 

 
$('#phase').text(phases[0].descr);

#dice { font-size: 40px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="phase"></div> 
 
<button id="roll">Roll</button> 
 
<div id="dice"></div> 
 
<div id="result"></div>