Question

我遇到了奇怪的情况。我正在JS中构建一个漂亮的小Tic-Tac-Toe游戏，我无法弄清楚为什么count变量在我第二次init（）时不会重置。

第一场比赛运作良好;即使var count在init（）中重置，第二个游戏计数也不会重置为0。

游戏规则：游戏以X开头并且应始终以X开头。您会注意到第二个游戏以O开头。

有人想看看吗？小提琴：http://jsfiddle.net/1ommcdxg/

var board;
var gameBoard;
var winners = [ 
                [0,1,2],
                [3,4,5],
                [6,7,8],
                [0,3,6],
                [1,4,7],
                [2,5,8],
                [0,4,8],
                [2,4,6]
];
var count;

var checkWin = function (a) {

    for (var i = 0; i < winners.length; i++) {

        if (gameBoard[winners[i][0]] === a && 
            gameBoard[winners[i][1]] === a && 
            gameBoard[winners[i][2]] === a) 
        {
            return a;
        };

    };

};

var gamePlay = function (ev) {

    console.log(ev);

    ev = ev || window.event; // browser compatibility
    var target = ev.target || ev.srcElement; //browser c...
    var choice = target.id; //sets a variable from the id
    choice = parseInt(choice.substring(1,2));

    // console.log(target);
    // console.log(choice);

    console.log("in gameplay " + count);

    if (count < 9) {

        if (count % 2 === 0) {

            target.innerHTML = "X";
            target.className = target.className + " x";
            gameBoard[choice] = "x";
            if (checkWin(gameBoard[choice])) {
                alert("X wins!");
                init();
            };

        } else {
            target.innerHTML = "O";
            target.className = target.className + " o";
            gameBoard[choice] = "o";
            if (checkWin(gameBoard[choice])) {
                alert("O wins!");
                init();
            };
        };

    } else {
        console.log("no more turns!");
    };

    count++;

};

var init = function () {

    gameBoard = new Array();
    xPlayer = [];
    oPlayer = [];
    count = 0;

    board = document.getElementById("board");

    if (board.hasChildNodes()) {
        board.removeChild(board.firstChild);
    };

    var b = document.createElement("b");
    board.appendChild(b);

    for (var i = 0; i < 9; i++) {
        var el = document.createElement("div");
        el.className = "square";
        el.id = "t" + i;
        b.appendChild(el);
        console.log(el);
        el.addEventListener('click', gamePlay);
    };

    console.log(count);

};

init();

Answer 1

Felix Kling是对的，因为gamePlay函数结束时有count ++，所以在init（）之后调用它。

您可以在调用init（）后立即从gamePlay函数返回，以解决此问题。

＆＃13;

var board;
  var gameBoard;
  var winners = [
  				[0,1,2],
  				[3,4,5],
  				[6,7,8],
  				[0,3,6],
  				[1,4,7],
  				[2,5,8],
  				[0,4,8],
  				[2,4,6]
  ];
  var count;

  var checkWin = function (a) {

  	for (var i = 0; i < winners.length; i++) {

  		if (gameBoard[winners[i][0]] === a &&
  			gameBoard[winners[i][1]] === a &&
  			gameBoard[winners[i][2]] === a)
  		{
  			return a;
  		};

  	};

  };

  var gamePlay = function (ev) {

  	console.log(ev);

  	ev = ev || window.event; // browser compatibility
  	var target = ev.target || ev.srcElement; //browser c...
  	var choice = target.id; //sets a variable from the id
  	choice = parseInt(choice.substring(1,2));

  	// console.log(target);
  	// console.log(choice);

  	console.log("in gameplay " + count);

  	if (count < 9) {

  		if (count % 2 === 0) {

  			target.innerHTML = "X";
  			target.className = target.className + " x";
  			gameBoard[choice] = "x";
  			if (checkWin(gameBoard[choice])) {
  				alert("X wins!");
  				init();
 				return;
  			};

  		} else {
  			target.innerHTML = "O";
  			target.className = target.className + " o";
  			gameBoard[choice] = "o";
  			if (checkWin(gameBoard[choice])) {
  				alert("O wins!");
  				init();
 				return;
  			};
  		};

  	} else {
  		console.log("no more turns!");
  	};

  	count++;

  };

  var init = function () {

  	gameBoard = new Array();
  	xPlayer = [];
  	oPlayer = [];
  	count = 0;

  	board = document.getElementById("board");

  	if (board.hasChildNodes()) {
  		board.removeChild(board.firstChild);
  	};

  	var b = document.createElement("b");
  	board.appendChild(b);

  	for (var i = 0; i < 9; i++) {
  		var el = document.createElement("div");
  		el.className = "square";
  		el.id = "t" + i;
  		b.appendChild(el);
  		console.log(el);
  		el.addEventListener('click', gamePlay);
  	};

  	console.log(count);

  };

  init();

＆＃13;

#board {
    	width: 400px;
    }

    .square {
    	width: 100px;
    	height: 100px;
    	border: 2px solid #333;
    	margin: 2px;
    	float: left;
    	text-align: center;
    }

    .x {
    	background-color: blue;
    	color: white;
    }

    .o {
    	background-color: red;
    	color: white;
    }

＆＃13;

<body>
  <h1>Tic Tac Toe</h1>

  <div id="board"></div>

  </body>

＆＃13;

Answer 2

我在您的代码中发现了2个问题：

一旦用户获胜（正在调用init()），您就不会破坏代码执行， count ++ 仍将执行
您需要在点击事件触发器后删除事件监听器，否则您的计数器仍将继续增加但游戏永远不会完成

试试这个代码段：

var board;
var gameBoard;
var winners = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];
var count;
var checkWin = function(a) {
  for (var i = 0; i < winners.length; i++) {
    if (gameBoard[winners[i][0]] === a && gameBoard[winners[i][1]] === a && gameBoard[winners[i][2]] === a) {
      return a;
    }
  }
};
var gamePlay = function(ev) {
  ev = ev || window.event; // browser compatibility
  var target = ev.target || ev.srcElement; //browser c...
  target.removeEventListener('click', gamePlay);
  var choice = target.id; //sets a variable from the id
  choice = parseInt(choice.substring(1, 2));
  console.log("in gameplay " + count);
  if (count < 9) {
    if (count % 2 === 0) {
      target.innerHTML = "X";
      target.className = target.className + " x";
      gameBoard[choice] = "x";
      if (checkWin(gameBoard[choice])) {
        alert("X wins!");
        return init();
      }
    } else {
      target.innerHTML = "O";
      target.className = target.className + " o";
      gameBoard[choice] = "o";
      if (checkWin(gameBoard[choice])) {
        alert("O wins!");
        return init();
      }
    }
  } else {
    console.log("no more turns!");
  }
  count++;
};
var init = function() {
  gameBoard = [];
  xPlayer = [];
  oPlayer = [];
  count = 0;
  board = document.getElementById("board");
  if (board.hasChildNodes()) {
    board.removeChild(board.firstChild);
  }
  var b = document.createElement("b");
  board.appendChild(b);
  for (var i = 0; i < 9; i++) {
    var el = document.createElement("div");
    el.className = "square";
    el.id = "t" + i;
    b.appendChild(el);
    el.addEventListener('click', gamePlay);
  }
  console.log(count);
};
init();

#board {
  width: 400px;
}
.square {
  width: 100px;
  height: 100px;
  border: 2px solid #333;
  margin: 2px;
  float: left;
  text-align: center;
}
.x {
  background-color: blue;
  color: white;
}
.o {
  background-color: red;
  color: white;
}

<h1>Tic Tac Toe</h1>

<div id="board"></div>

重新初始化时，计数变量在javascript中不会重置

2 个答案: