Question

我终于让我的游戏工作了...唯一的问题是当我重置页面点击我的重置按钮时它会清除主板但是它不允许我再玩了..我怎么能解决这个问题问题

HTML

<h1>Tic Tac Toe</h1>

<div id="message"> </div>

<button id="reset" > Reset</button>
<div class="console">

   <div id="firstRow">
      <div id="box1" class="box"></div>
      <div id="box2" class="box"></div>
      <div id="box3" class="box"></div>
   </div>


   <div class="secondRow">
      <div id="box4" class="box"></div>
      <div id="box5" class="box"> </div>
      <div id="box6" class="box"> </div>
   </div>


   <div class="thirdRow">
      <div id="box7" class="box"></div>
      <div id="box8" class="box"> </div>
      <div id="box9" class="box"> </div>
   </div>

</div>

  JAVASCRIPT

 var turn = "X";
 var  winner = null; // to change player's turnn at the begin


  var nextMove = function(box) {
    if(winner !== null){
    setMessage(winner +" already won the game");
    clearBox();
   }
    else if(box.innerHTML === ""){
       box.innerHTML = turn;
       switchTurn();
     }

    else {
      setMessage("Choose another box.");

     }
  }

   var startGame = function() {
   for (var i =1; i <= 9; i++) { //clears all my boxes
   clearBox(i);
   }

  setMessage(turn + " gets to start.");
  } 

  var setMessage = function(msg) {
  document.getElementById("message").innerHTML = msg;
  }   



      function switchTurn() {

         if(checkWinner(turn)) {
           setMessage("Congratulations, " + turn + " wins!");
           winner = turn; // whoever wins is gonna start the game
         }

         else if(turn === "X") {
           turn = "O";
           setMessage("It's " + turn + " turn.");
          }

         else {
            turn = "X";
            setMessage("Its " + turn + " turn.");

           }

         }

    function checkWinner(move) {
      var result = false;
      if( checkRow(1, 2, 3, move) ||
          checkRow(4, 5, 6, move) ||
          checkRow(7, 8, 9, move) ||
          checkRow(1, 4, 7, move) ||
          checkRow(2, 5, 8, move) ||
          checkRow(3, 6, 9, move) ||
          checkRow(1, 5, 9, move) ||
          checkRow(3, 5, 7, move)) {

        result = true;
      }

      return result;

    }

    function checkRow(a, b, c, move) {
      var result = false;
      if(getBox(a) === move && getBox(b) === move && getBox(c) === move) {
        result = true;
      }

      return result;
    }

    function getBox(number) {
      return document.getElementById("box" + number).innerHTML;

    }

    function clearBox(number) {
      return document.getElementById("box" + number).innerHTML = "";
    }


 var btnReset = document.getElementById('reset');

  btnReset.addEventListener('click', function() {
      startGame();

   });

 var consoleDiv = document.getElementsByClassName("console")[0];

  consoleDiv.addEventListener("click", function(event) {
    // event.target === the box to go in
   nextMove(event.target);
   var hasWon = checkWinner();


});

 startGame();

Answer 1

从nextMove功能中删除clearBox();，并将winner = null;添加到btnReset.addEventListener('click', function() {功能。

一旦玩家赢了，赢家永远不会被设置为空，因此总有一个赢家，因为你检查winner !== null，在下面你会调用clearBox()然后调用该函数而不是必需参数，它会破坏你的程序。

重置按钮并清除板

1 个答案: