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（不重复），因为随着代码库的增长，它会让您受益匪浅。

为什么这是一个永无止境的循环？

1 个答案: