Question

在这个井字游戏中，为什么没有显示最后一个玩家的最后一步？所以，当游戏到最后一回合时，方块上什么也没有显示，没有 O 也没有 X。有什么问题？

代码如下：

这是 HTML 代码：

<div id="tictactoe" align="center"></div>
        <div align="center">
            <span id='turn'>Turn of Player X</span>
        </div>

这是CSS代码：

table {
    border-collapse:collapse;
}

td {
    background-color: black;
    border: 3px solid white;
    font-size:60px;
    color:#ffffff;
    border-radius: 10px 10px 10px 10px;
}

这是 JavaScript 代码：

    var N_SIZE = 3,
        EMPTY = "&nbsp;",
        boxes = [],
        turn = "X",
        score,
        moves;

    /*
     * Initializes the Tic Tac Toe board and starts the game.
     */
    function init() {
        var board = document.createElement('table');
    board.setAttribute("border", 1);
    board.setAttribute("cellspacing", 0);
    
        var identifier = 1;
        for (var i = 0; i < N_SIZE; i++) {
            var row = document.createElement('tr');
            board.appendChild(row);
            for (var j = 0; j < N_SIZE; j++) {
        var cell = document.createElement('td');
        cell.setAttribute('height', 50);
        cell.setAttribute('width', 50);
        cell.setAttribute('align', 'center');
        cell.setAttribute('valign', 'center');
                cell.classList.add('col' + j,'row' + i);
                if (i == j) {
                    cell.classList.add('diagonal0');
                }
                if (j == N_SIZE - i - 1) {
                    cell.classList.add('diagonal1');
                }
                cell.identifier = identifier;
                cell.addEventListener("click", set);
                row.appendChild(cell);
                boxes.push(cell);
                identifier += identifier;
            }
        }

        document.getElementById("tictactoe").appendChild(board);
        startNewGame();
    }

    /*
     * New game
     */
    function startNewGame() {
        score = {
            "X": 0,
            "O": 0
        };
        moves = 0;
        turn = "X";
        boxes.forEach(function (square) {
            square.innerHTML = EMPTY;
        });
    }

    /*
     * Check if a win or not
     */
    function win(clicked) {
        // Get all cell classes
        var memberOf = clicked.className.split(/\s+/);
        for (var i = 0; i < memberOf.length; i++) {
            var testClass = '.' + memberOf[i];
      var items = contains('#tictactoe ' + testClass, turn);
            // winning condition: turn == N_SIZE
            if (items.length == N_SIZE) {
                return true;
            }
        }
        return false;
    }

function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return [].filter.call(elements, function(element){
    return RegExp(text).test(element.textContent);
  });
}

    /*
     * Sets clicked square and also updates the turn.
     */
    function set() {
        if (this.innerHTML !== EMPTY) {
            return;
        }
        this.innerHTML = turn;
        moves += 1;
        score[turn] += this.identifier;
        if (win(this)) {
            alert('Winner: Player ' + turn);
            startNewGame();
        } else if (moves === N_SIZE * N_SIZE) {
            alert("Draw");
            startNewGame();
        } else {
            turn = turn === "X" ? "O" : "X";
            document.getElementById('turn').textContent = 'Turn of Player ' + turn;
        }
    }

    init();

这是链接：https://codepen.io/sp2012/pen/gOmXqOO

谢谢。

Answer 1

在开始新游戏之前在 set() 中使用超时： setTimeout(...,0)

也许看看这个：

var N_SIZE = 3,
  EMPTY = "&nbsp;",
  boxes = [],
  turn = "X",
  score,
  moves;

/*
 * Initializes the Tic Tac Toe board and starts the game.
 */
function init() {
  var board = document.createElement('table');
  board.setAttribute("border", 1);
  board.setAttribute("cellspacing", 0);

  var identifier = 1;
  for (var i = 0; i < N_SIZE; i++) {
    var row = document.createElement('tr');
    board.appendChild(row);
    for (var j = 0; j < N_SIZE; j++) {
      var cell = document.createElement('td');
      cell.setAttribute('height', 50);
      cell.setAttribute('width', 50);
      cell.setAttribute('align', 'center');
      cell.setAttribute('valign', 'center');
      cell.classList.add('col' + j, 'row' + i);
      if (i == j) {
        cell.classList.add('diagonal0');
      }
      if (j == N_SIZE - i - 1) {
        cell.classList.add('diagonal1');
      }
      cell.identifier = identifier;
      cell.addEventListener("click", set);
      row.appendChild(cell);
      boxes.push(cell);
      identifier += identifier;
    }
  }

  document.getElementById("tictactoe").appendChild(board);
  startNewGame();
}

/*
 * New game
 */
function startNewGame() {
  score = {
    "X": 0,
    "O": 0
  };
  moves = 0;
  turn = "X";
  boxes.forEach(function(square) {
    square.innerHTML = EMPTY;
  });
}

/*
 * Check if a win or not
 */
function win(clicked) {
  // Get all cell classes
  var memberOf = clicked.className.split(/\s+/);
  for (var i = 0; i < memberOf.length; i++) {
    var testClass = '.' + memberOf[i];
    var items = contains('#tictactoe ' + testClass, turn);
    // winning condition: turn == N_SIZE
    if (items.length == N_SIZE) {
      return true;
    }
  }
  return false;
}

function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return [].filter.call(elements, function(element) {
    return RegExp(text).test(element.textContent);
  });
}

/*
 * Sets clicked square and also updates the turn.
 */
function set() {
  if (this.innerHTML !== EMPTY) {
    return;
  }
  this.innerHTML = turn;
  moves += 1;
  score[turn] += this.identifier;
  if (win(this)) {
    setTimeout(()=>{
      if (confirm('Winner: Player ' + turn))
        startNewGame();
    }, 0)
  } else if (moves === N_SIZE * N_SIZE) {
    setTimeout(()=>{
      if (confirm('Winner: Player ' + turn))
        startNewGame();
    }, 0)
  } else {
    turn = turn === "X" ? "O" : "X";
    document.getElementById('turn').textContent = 'Turn of Player ' + turn;
  }
}

init();

table {
  border-collapse: collapse;
}

td {
  background-color: black;
  border: 3px solid white;
  font-size: 60px;
  color: #ffffff;
  border-radius: 10px 10px 10px 10px;
}

<div id="tictactoe" align="center"></div>
<div align="center">
  <span id='turn'>Turn of Player X</span>
</div>

Answer 2

当您检查玩家是否赢得比赛时，重新渲染不会立即发生。当警报弹出时，executiuon 停止并在您单击 OK 后立即开始新游戏。您可以使用 setTimeout 的小技巧在重新渲染发生后显示警报

if (win(this)) {
    setTimeout(function() {
      alert('Winner: Player ' + turn);
      startNewGame();
    }, 0);
} else if (moves === N_SIZE * N_SIZE) {
    setTimeout(function() {
       alert("Draw");
       startNewGame();
    }, 0);
}

在这个井字游戏中，为什么没有显示最后一个玩家玩的最后一步？

2 个答案: