All geek questions in one place

Count variable not reset in javascript on reinitialization

I came across a strange situation. I am creating a beautiful little Tic-Tac-Toe game in JS and I cannot understand why the count variable will not reset when I initialize () a second time.

The first game works well; the second game counter does not reset to 0, even if the var counter is reset to init ().

Rules of the game: the game starts with X and should always start with X. You will notice that the second game starts with O.

Would anyone like to take a look? Fiddle: 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();
+4
source share
2 answers

2 questions were found in your code:

  • , (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>
Hide result
0

Felix Kling , - count ++ gamePlay, init().

gamePlay init(), .

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();
#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;
    }
<body>
  <h1>Tic Tac Toe</h1>

  <div id="board"></div>

  </body>
Hide result
+4

Source: https://habr.com/ru/post/1607137/

More articles:


All Articles