根據提醒通知添加一個增量

Question

我正在寫一個TicTacToe遊戲，並且我無法添加Win Count來跟蹤X玩家獲勝的次數以及O玩家獲勝的次數。現在，我擁有帶有if語句的JS代碼。如果alert = Winner是X，那麼xWinCount ++，但我不確定這是否正確。感謝任何和所有幫助，我真的很感激它。

HTML代碼：

<div class="container"> 
    <div class="col-md-12 header"> 
    <h1 class="banner">Previous Games</h1> 

    <h1 class="banner">Rules</h1> 

    <h1 class="banner-right">List of Wins</h1> 
    </div> 
    <div class="row"> 
    <div class="col-md-4 nine hidden-xs red"></div> 
    <!--previous game--> 

    <div class="col-md-4 hidden-xs green-bg"> 
     <!--rules + who's turn is it --> 
     <p>Classic Tic-Tac-Toe game.</br> 
     </br> Match three X's or three O's in a line vertically, horizontally or diagonally to win!</p> 
    </div> 
    <div class="col-md-4 hidden-xs blue"> 
     <!-- List of wins --> 
     <div class="win-chart"> 
     <p class="win-chart">X has won:</p> 
     <p id="xWinCount" class="xWinCount win-chart">0</p> 
     <p class="win-chart">time(s)</p> 
     </br> 
     <p class="win-chart">O has won:</p> 
     <p id="oWinCount" class="xWinCount win-chart">0</p> 
     <p class="win-chart">time(s)</p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4 nine hidden-xs red"></div> 
     <div class="col-md-4 nine" id="board"> 
     <div class="col-md-4 innerNine empty borderBottom col-xs-4"></div> 
     <div class="col-md-4 innerNine empty borderBottom borderLeftAndRight col-xs-4"></div> 
     <div class="col-md-4 innerNine empty borderBottom col-xs-4"></div> 
     <div class="col-md-4 innerNine empty col-xs-4"></div> 
     <div class="col-md-4 innerNine empty borderLeftAndRight col-xs-4"></div> 
     <div class="col-md-4 innerNine empty col-xs-4"></div> 
     <div class="col-md-4 innerNine empty borderTop col-xs-4"></div> 
     <div class="col-md-4 innerNine empty borderTop borderLeftAndRight col-xs-4"></div> 
     <div class="col-md-4 innerNine empty borderTop col-xs-4"></div> 
     </div> 
     <div class="col-md-4 hidden-xs"></div> 
     <!--blue not needed --> 
    </div> 
    <div class="row"> 
     <div class="col-md-4 nine red"></div> 
     <div class="col-md-4"> 
     <button id="newGame" class="btn btn-success btn-lg" type="button"><span class="glyphicon glyphicon-repeat"></span>Restart Game </button> 
     <a href=" " button id="newGame" class="btn btn-primary btn-lg" type="button"><span class="glyphicon glyphicon-repeat"></span>Reset Scores</button></a> 
     </div> 
     <div class="col-md-4"> </div> 
     <!--blue not needed --> 
    </div> 
    </div> 

JS代碼：

$(document).ready(function() { 

    var circleOrEx = "o"; // who gets first turn, right now circle goes first 
    var isGameInProgress = true; // when the document loads, the tictactoe board is an active game 
    var winningCombos = { // the game board is a series of nine square boxes, but since this is an array, the values for earch box is 0 to 8. these values outline the winning combinations starting from each possible square on the board. the board is writen out like this: 

     // 0 | 1 | 2 
     // --------- 
     // 3 | 4 | 5 
     // --------- 
     // 6 | 7 | 8 

    0: [ //0 is key (winning combinations starting from the top left square) 
     [1, 2], //if the user enters in three of the same values across the top three squares, they win 
     [3, 6], //if the user enters in three of the same values down the far left column, they win 
     [4, 8] //if the user enters in three of the same values diagonally from the top left to bottom      right, they win 
    ], 
    1: [ //(winning combinations starting from the top middle square) 
     [0, 2], //if the user enters in three of the same values across the top three squares, they win 
     [4, 7] //if the user enters in three of the same values down the middle column, they win 

    ],  //there are no diagonal winning combinations for values 1, 3, 5, 7 

    2: [ //(winning combinations starting from the top right square) 
     [0, 1], //if the user enters in three of the same values across the top three squares, they win 
     [5, 8], //if the user enters in three of the same values down the far right column, they win 
     [4, 6] //if the user enters in three of the same values diagonally from the top right to bottom      left, they win 
    ], 
    3: [ //(winning combinations starting at the middle square on the far left column) 
     [0, 6], //if the user enters in three of the same values down the far left column, they win 
     [4, 5] //if the user enters in three of the same values across the middle row, they win 
    ], 
    4: [ //(winning combinations starting at the center square) 
     [1, 8], //BUG IN THE CODE, this should not be a winning combination 
     [2, 6], //if the user enters in three of the same values diagonally from the top right to bottom      left, they win 
     [1, 7], //if the user enters in three of the same values down the middle column, they win 
     [3, 5] // if the user enters in three of the same values across the middle row, they win 
    ], 
    5: [ //(winning combinations starting from the middle square in the far right column) 
     [2, 8], //if the user enters in three of the same values down the far right column, they win 
     [3, 4] // if the user enters in three of the same values across the middle row, they win 
    ], 
    6: [ //(winning combinations starting from the bottom left square) 
     [0, 3], //if the user enters in three of the same values down the far left column, they win 
     [2, 4], //if the user enters in three of the same values diagonally from the top left to bottom      right, they win 
     [7, 8] //if the user enters in three of the same values across the bottom three squares, they win 
    ], 
    7: [ //(winning combinations starting from the bottom middle square) 
     [1, 4],//if the user enters in three of the same values down the middle column, they win 
     [6, 8] //if the user enters in three of the same values across the bottom three squares, they win 
    ], 
    8: [ //(winning combinations starting from the bottom right square) 
     [0, 4], //if the user enters in three of the same values diagonally from the bottom right to the top    left, they win 
     [2, 5], //if the user enters in three of the same values down the far right column, they win 
     [6, 7] //if the user enters in three of the same values across the bottom three squares, they win 
    ] 
    }; 

    // when the user clicks on the board, the function runs, and the game is in progress 
    $("#board").find("div").on("click", function() { 

    if (isGameInProgress && $(this).hasClass("empty")) { /// within the #board remove the empty class and add either an X or an O value to the square when it is is clicked 
     $(this).removeClass("empty").append("<span class='" + circleOrEx + "'>" + circleOrEx + "</span"); //allows user to input X or O value in the square 

     checkIfWon($(this).index(), circleOrEx); //function determines the turn cycle of the game 

     if (circleOrEx === "o") { // if O has played their turn, run code on line 68 
     circleOrEx = "x"; // now it is X's turn 
     } else { 
     circleOrEx = "o"; // X has played their turn, now it is circle's turn 
     } 
    } 

    }); 

    // once you click the button with the 'newGame' id, run the function 
    $("#newGame").on("click", function() { 

    var boardSquares = $("#board").find("div"); //boardSquares now becomes every div element within #board, which is each of the nine blank squares that make up the tic tac toe game 
    var firstEmptyMemorySquare = $(".container").find(".nine").filter(function() { //returns a value for firstEmptyMemorySquare if the function passes these requirements place the #board within the class nine that is in the containter. (once the game clicking the refresh button, place the previous board in an empty section of the page) 
     return $.trim($(this).text()) === "" && $(this).children().length === 0; 
    }).not("#board").first(); 

    if (firstEmptyMemorySquare.length == 1) { //placing a previously played game in an EmptyMemorySquare 
     firstEmptyMemorySquare.html($("#board").html()); 
    } else { 
     $(".container").find(".nine").not("#board").empty(); 
     $(".container").find(".nine").first().html($("#board").html()); 
    } 

    //deletes anything in the empty class to games that are in progress, which allows user to enter X's or O's in the boardSquares 
    boardSquares.each(function() { 
     $(this).addClass("empty").empty(); 
    }) 
    isGameInProgress = true; 
    }) 

    //checks if a player won. chosenSquare is the final value in a winning combination; the possible values for the chosenSquare parameter is [0] - [8] 
    function checkIfWon(chosenSquare) { 

    var mulitArr = winningCombos[chosenSquare]; 
    var playerWon; 

    for (var i = 0; i < mulitArr.length; i++) { //the nested loop provides the length of the multidimensional array 
     playerWon = true; 
     for (var j = 0; j < mulitArr[i].length; j++) { //value of j starts at zero so the user must enter three values within a winning combination. If j initially starts at 1 user only needs to match two of the same values within a winning combination. If j => 2 the user only needs to match one value of a winning combination (which would be any square on the board) 
     if (!$("#board").find("div").eq(mulitArr[i][j]).find("span").hasClass(circleOrEx)) { //Explain this condition 
      playerWon = false; 
     } 
     } 

     if (playerWon) { //remaining lines affect the board when a player enters a winning combination 

     for (var j = 0; j < mulitArr[i].length; j++) { 
      $("#board").find("div").eq(mulitArr[i][j]).find("." + circleOrEx).addClass("green"); //makes the first two inputs of the winning comination the color green 
     } 
     $("#board").find("div").eq(chosenSquare).find("." + circleOrEx).addClass("green"); //makes the last   input of the winning combination (chosenSquare) the color green 
     alert("Winner is " + circleOrEx.toUpperCase() + "!"); //alert "Winner is X" or "Winner is O" 
var xWinCount = 0; 
    var xWinCount = 0; 
     if (playerWon = Ex){ 
      document.getElementById('xWinCount'); 
      var xWin = xWinCount.innerHTML; 
      xWinin++; 
      xWinCount.innerHTML = x-win; 
      } 
     else{ 
     document.getElementById('oWinCount'); 
     var oWin = oWinCount.innerHTML; 
     oWin++; 
     oWinCount.innerHTML = o-win; 
     } 
     isGameInProgress = false; //since a player has won, the game is no longer in progress 
     return false; //this exits the loop 
     } 
    } 


    } 
}) 

Answer 1

留意此行document.getElementById('xWinCount');沒有分配給一個變量，似乎要xWinCount = document.getElementById('xWinCount');同爲oWinCount

您將有innerHTML必須保持你當前的分數的元素，是的，以後你可以修改或增加它的VA略。

Answer 2

我打算假設一切正常，直到checkIfWon函數觸發爲止，因爲這是相當多的代碼來通過。

遞增計數應該相當平凡。看看你的代碼，我可以看到幾個問題。

// The first problem is your function. You pass it 2 arguments but it only catches 1 
    // The second argument is what character 'won', so it should look something like this: 
    // function checkIfWon(chosenSquare, winningPlayer) 
    function checkIfWon(chosenSquare) 

    var xWinCount = 0; 
    // playerWon is a boolean. You need to know if the player won, but also which player won. 
    // You should use the variable passed in through the function parameters 
    // if (winningPlayer == "x" && playerWon) 
    if (playerWon = Ex){ 
     // document.getElementById returns an object. 
     // To grab the innerHTML attribute from an object, you can do something like this: 
     // xWinCount = document.getElementById('xWinCount').innerHTML; 
     document.getElementById('xWinCount'); 
     var xWin = xWinCount.innerHTML; 

     // Assuming you get the above code working, 
     // the increment and assignment code should look something like this: 
     // xWinCount++; 
     // document.getElementById('xWinCount').innerHTML = xWinCount; 
     xWinin++; 
     xWinCount.innerHTML = x-win; 
    } 

else語句應該解決上面發佈的相同問題。

這是我的版本，使用jQuery，因爲它更容易一些，它看起來像基於項目中的其他代碼。您應該能夠從該代碼段中找出「其他」部分。

function checkIfWon(chosenSquare, winningPlayer) { 
    if (playerWon) { 
     if (winningPlayer == 'x') { 
      // Grab the current win count 
      var xWinCount = $('#xWinCount').val(); 

      // Increment the count 
      xWinCount++; 

      // Assign the new count 
      $('#xWinCount').val(xWinCount); 
     } 
    } 
}