Question

在宣布获胜者之后，有没有办法可以杀死/打破我的tic tac toe board上的用户输入？在发送了谁获胜的警报之后，我尝试在isFull（）函数中使用break，但它仍然会接受表格中的用户输入。

这是一个显示正在运行的链接： https://jsfiddle.net/n1kn1vLh/2/

function TicTacToe() {
  this.board = [
    [0, 0, 0],
    [0, 0, 0],
    [0, 0, 0]
  ];
  this.showhtml = toHTML;
  this.player2 = "O";
  this.player1 = "X";
  this.turn = "";
}

function toHTML() {
  var player = '';
  var displayplayer = document.getElementById("displayMessage");
  var htmlStr = '';
  var gametable = document.getElementById("tictable");
  var cell = '';
  for (var i = 0; i < this.board.length; i++) {
    htmlStr += '<tr>';
    for (var j = 0; j < this.board[i].length; j++) {
      if (this.board[i][j] == 0) {
        this.board[i][j] = cell;
        htmlStr += ("<td data-i=\"" + i + "\" data-j=\"" + j + "\">" +     this.board[i][j] + "</td>");
      } 
      gametable.addEventListener("click", clickHandler, false);
    }
    htmlStr += '</tr>';
  }
  gametable.innerHTML = htmlStr;
  if (this.turn == this.player1 || this.turn == "") {
    player += ("<p>It is " + this.player1 + "'s turn.</p>");
    displayplayer.innerHTML = player;
    return this.turn = "X";
  }   else {
    player += ("<p>It is " + this.player2 + "'s turn.</p>");
    displayplayer.innerHTML = player;
    return this.turn = "O";

  }

  function clickHandler(event)
  {
    if (tic.turn == tic.player1) {
      if (event.target.innerHTML == ''){ 
        event.target.innerHTML = tic.turn;
        tic.board[event.target.dataset.i][event.target.dataset.j] = tic.turn;
        tic.turn = tic.player2;
        document.getElementById("displayMessage").innerHTML = "<p>It is " +   tic.turn + "'s turn.</p>";
        isFull();
        return tic.turn;
      } else {
        alert('Invalid Move! Try again.');
      }
    } else {
      if (event.target.innerHTML == '') {
        event.target.innerHTML = tic.turn;
        tic.board[event.target.dataset.i][event.target.dataset.j] = tic.turn;
        tic.turn = tic.player1;
        document.getElementById("displayMessage").innerHTML = "<p>It is " + tic.turn + "'s turn.</p>";
        isFull();
        return tic.turn;
      } else {
        alert('Invalid Move! Try again.');
      }
    }

  }

  function isFull() {
    for (var i = 0; i < tic.board.length; i++) {

      if(tic.board[i][0] == tic.board[i][1] && tic.board[i][0]==tic.board[i][2] && tic.board[i][0]!=0){
        alert(tic.board[i][0]+" Wins");
        return;
      }
    }
    for (var i = 0; i < tic.board.length; i++) {

      if(tic.board[0][i] == tic.board[1][i] && tic.board[0][i]==tic.board[2][i]  && tic.board[0][i]!=0){
        alert(tic.board[0][i]+" Wins");
        return;
      }
    }

    if(tic.board[0][0]==tic.board[1][1] && tic.board[0][0] == tic.board[2][2]  && tic.board[0][0]!=0){
      alert(tic.board[0][0]+" Wins");
      return;
    }

    if(tic.board[0][2]==tic.board[1][1] && tic.board[0][2] == tic.board[2][0]  && tic.board[2][0]!=0){
      alert(tic.board[1][1]+" Wins");
      return;
    }

  }
}


tic = new TicTacToe();
tic.showhtml();

Answer 1

您可以在有人获胜时删除eventListener：

function isFull() {
    for (var i = 0; i < tic.board.length; i++) {
      if(tic.board[i][0] == tic.board[i][1] && tic.board[i][0]==tic.board[i][2] && tic.board[i][0]!=0){
        alert(tic.board[i][0]+" Wins");
        document.getElementById("tictable").removeEventListener('click', clickHandler);
        return;
      }
  }

  for (var i = 0; i < tic.board.length; i++) {
      if(tic.board[0][i] == tic.board[1][i] && tic.board[0][i]==tic.board[2][i]  && tic.board[0][i]!=0){
        alert(tic.board[0][i]+" Wins");
        document.getElementById("tictable").removeEventListener('click', clickHandler);
        return;
      }
  }

  if(tic.board[0][0]==tic.board[1][1] && tic.board[0][0] == tic.board[2][2]  && tic.board[0][0]!=0){
    alert(tic.board[0][0]+" Wins");
    document.getElementById("tictable").removeEventListener('click', clickHandler);
    return;
  }

  if(tic.board[0][2]==tic.board[1][1] && tic.board[0][2] == tic.board[2][0]  && tic.board[2][0]!=0){
    alert(tic.board[1][1]+" Wins");
    document.getElementById("tictable").removeEventListener('click', clickHandler);
    return;
  }
}

Answer 2

在isFull（）

中添加以下内容

document.getElementById('user input').disabled = true;

在某一点之后忽略用户输入

2 个答案: