爲什麼這是一個永無止境的循環？

Question

我想這運行，那麼gameOnAgain跑，然後再回到......但我一直gettng無限循環

這場比賽是應該允許的第一個球員點擊一個div，然後把裏面，然後一個字符繼續下一個玩家。但2輪流在每個之後，遊戲中創建了一個無限循環墜毀我的瀏覽器

function gameOn() { 
    count++; 
    winner(); 
    if (playerOneTurn === true) { 
     $("#top1").on("click", function() { 
      $("#top1").html(`<h2>${symbolp1}</h2>`); 
      cell1 = true; 
      playerTwoTurn = true; 
      playerOneTurn = false; 
      gameOnAgain(); 
     }) 
     $("#top2").on("click", function() { 
      $("#top2").html(`<h2>${symbolp1}</h2>`); 
      cell2 = true; 
      playerTwoTurn = true; 
      playerOneTurn = false; 
      gameOnAgain(); 
     }) 
     $("#top3").on("click", function() { 
      $("#top3").html(`<h2>${symbolp1}</h2>`); 
      cell3 = true; 
      playerTwoTurn = true; 
      playerOneTurn = false; 
      gameOnAgain(); 
     }) 
     $("#middle1").on("click", function() { 
      $("#middle1").html(`<h2>${symbolp1}</h2>`); 
      cell4 = true; 
      playerTwoTurn = true; 
      playerOneTurn = false; 
      gameOnAgain(); 
     }) 
     $("#middle2").on("click", function() { 
      $("#middle2").html(`<h2>${symbolp1}</h2>`); 
      cell5 = true; 
      playerTwoTurn = true; 
      playerOneTurn = false; 
      gameOnAgain(); 
     }) 
     $("#middle3").on("click", function() { 
      $("#middle3").html(`<h2>${symbolp1}</h2>`); 
      cell6 = true; 
      playerTwoTurn = true; 
      playerOneTurn = false; 
      gameOnAgain(); 
     }) 
     $("#bottom1").on("click", function() { 
      $("#bottom1").html(`<h2>${symbolp1}</h2>`); 
      cell8 = true; 
      playerTwoTurn = true; 
      playerOneTurn = false; 
      gameOnAgain(); 
     }) 
     $("#bottom2").on("click", function() { 
      $("#bottom2").html(`<h2>${symbolp1}</h2>`); 
      cell8 = true; 
      playerTwoTurn = true; 
      playerOneTurn = false; 
      gameOnAgain(); 
     }) 
     $("#bottom3").on("click", function() { 
      $("#bottom3").html(`<h2>${symbolp1}</h2>`); 
      cell9 = true; 
      playerTwoTurn = true; 
      playerOneTurn = false; 
      gameOnAgain(); 
     }) 
    } } 

function gameOnAgain() { 
    winner(); 
    if (playerTwoTurn === true) { 
     $("#top1").on("click", function() { 
      $("#top1").html(`<h2>${symbolp2}</h2>`); 

      cell1 = false; 
      playerOneTurn = true; 
      playerTwoTurn = false; 
      gameOn(); 
     }) 
     $("#top2").on("click", function() { 
      $("#top2").html(`<h2>${symbolp2}</h2>`); 

      cell2 = false; 
      playerOneTurn = true; 
      playerTwoTurn = false; 
      gameOn(); 
     }) 
     $("#top3").on("click", function() { 
      $("#top3").html(`<h2>${symbolp2}</h2>`); 

      cell3 = false; 
      playerOneTurn = true; 
      playerTwoTurn = false; 
      gameOn(); 
     }) 
     $("#middle1").on("click", function() { 
      $("#middle1").html(`<h2>${symbolp2}</h2>`); 

      cell4 = false; 
      playerOneTurn = true; 
      playerTwoTurn = false; 
      gameOn(); 
     }) 
     $("#middle2").on("click", function() { 
      $("#middle2").html(`<h2>${symbolp2}</h2>`); 

      cell5 = false; 
      playerOneTurn = true; 
      playerTwoTurn = false; 
      gameOn(); 
     }) 
     $("#middle3").on("click", function() { 
      $("#middle3").html(`<h2>${symbolp2}</h2>`); 

      cell6 = false; 
      playerOneTurn = true; 
      playerTwoTurn = false; 
      gameOn(); 
     }) 
     $("#bottom1").on("click", function() { 
      $("#bottom1").html(`<h2>${symbolp2}</h2>`); 
      cell7 = false; 
      playerOneTurn = true; 
      playerTwoTurn = false; 
      gameOn(); 
     }) 
     $("#bottom2").on("click", function() { 
      $("#bottom2").html(`<h2>${symbolp2}</h2>`); 
      cell8 = false; 
      playerOneTurn = true; 
      playerTwoTurn = false; 
      gameOn(); 
     }) 
     $("#bottom3").on("click", function() { 
      $("#bottom3").html(`<h2>${symbolp2}</h2>`); 
      cell9 = false; 
      playerOneTurn = true; 
      playerTwoTurn = false; 
      gameOn(); 
     }) 
    } } 

Answer 1

，如果你放在所有的代碼在JSBin和共享鏈接這將幫助。

如果遊戲的目標是花費盡可能多的轉動來完成遊戲，您可以將函數包裝在$（document）.ready（function（）{...}）中，通過一個對象維護狀態然後決定遊戲何時結束。

var Game = { 
    current_player: PLAYER_ID, 
      moves: [ { PLAYER_ID: CELL_ID } ] 
} 

在上文中，current_player將是一個整數，1個或2移動時的存儲爲散列過去移動一個數組，與玩家ID作爲鍵和小區作爲值，即{1:2 }。

你會你的HTML從：

<div id="top1"></div> 

喜歡的東西：

<div class="game-cell" data-cell-id="1"></div> 

然後在您的jQuery：

$('div.game-cell').click(function() { 

    // Grab the current player from out 'game' object 
    var player = game.current_player; 

    // Associate the player with their symbol 
    var symbol = "PLAYER_SYMBOL"; 

    // 'this' references the specific div.game-cell that was clicked 
    $(this).html(`<h2>${symbol}</h2>`); 

    // Grab the cell id from the data attribute 
    var cell = $(this).data("cell-id"); 

    // Create an object for the move with the 'player' as the key, and 'cell' as the value 
    var move = { player : cell }; 

    // Store the move in the game object's moves array 
    game.moves.push(move); 

    // Update the current player value for the next player's turn 
    game.current_player == 1 ? game.current_player = 2 : game.current_player = 1; 
}) 

然後，您可以使用您的定製邏輯以確定遊戲對象何時結束。

此外，如果一開始沒有意義，這是很難接受的 - 繼續閱讀和提問。只要記住嘗試並保持代碼乾爽（不重複），因爲隨着代碼庫的增長，它會對您有好處。