これは決して終わりのないループですか？

Question

は、私は、これはその後、gameOnAgainは再び、その後、実行するを実行したい...しかし、私はゲームが最初のプレイヤーは、div要素をクリックし、その後、内側に文字を配置することができるようになっている無限ループ

をgettng保ちます次のプレイヤーに行く。しかし、それぞれに2ターン後、ゲームはあなたがJSBinですべてのコードを配置し、リンクを共有する場合、それは助けたでしょう

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

私のブラウザをクラッシュし、無限ループを作成します。

ゲームの目的がゲームを完了するのに必要な回数だけ行うのであれば、$（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> 

のようなものに：あなたのjQueryで次に

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

：

$('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（繰り返しはしない）にしておいてください。