為什么這是一個永無止境的循環？

Question

我希望它先運行，然后再運行gameOnAgain，然后再返回...但是我一直在不斷循環

該游戲應允許第一個玩家單擊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。Moves是存儲為哈希值的過去動作的數組，其中玩家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; 
})

然后，您可以使用自定義邏輯來確定游戲對象何時結束游戲。

此外，如果一開始沒有任何意義，那就需要很多東西-繼續閱讀和提問。 只需記住嘗試使代碼保持DRY（不重復），因為隨着代碼庫的增長，代碼將對您有利。