Why is tic-tac-toe not working correctly?

  • 0
    When the noughts are winning, a message is not displayed that the noughts won and the cells are not highlighted.
    GitHubPages

    spoiler

    <div class="wrapper">
    		<div class="result" id="result"></div>
    		<div class="game" id="game">
    			<div class="game__field js-game-field"></div>
    			<div class="game__field js-game-field"></div>
    			<div class="game__field js-game-field"></div>
    			<div class="game__field js-game-field"></div>
    			<div class="game__field js-game-field"></div>
    			<div class="game__field js-game-field"></div>
    			<div class="game__field js-game-field"></div>
    			<div class="game__field js-game-field"></div>
    			<div class="game__field js-game-field"></div>
    		</div>
    		<button class="new-game" id="new-game">Новая игра</button>
    	</div>

    let game = document.querySelector('#game'),
    	result = document.querySelector('#result'),
    	btnNewGame = document.querySelector('#new-game'),
    	fields = Array.from(document.querySelectorAll(".js-game-field")),
    	count = 0,
    	zero = `<svg class="zero"><circle r="45" cx="58" cy="58" stroke="red" stroke-width="10" fill="none" stroke-linecap="round"/></svg>`,
    	cross = `<svg class="cross"><line class="cross__first" x1="15" y1="15" x2="100" y2="100" stroke="blue" stroke-width="10" fill="none" stroke-linecap="round"/><line class="cross__last" x1="100" y1="15" x2="15" y2="100" stroke="blue" stroke-width="10" fill="none" stroke-linecap="round"/></svg>`;
    
    function AIPlay() {
    	let emptyFields = fields.filter(el => el.innerHTML === '');
    	let random_index = Math.floor(Math.random() * emptyFields.length);
    
    	setTimeout(() => {
    		if (count !== 9) {
    			emptyFields[random_index].innerHTML = zero;
    			emptyFields[random_index].classList.add('o');
    			let zeroAudio = new Audio('audio/zero.mp3');
    			zeroAudio.play();
    			count++;
    		}
    	}, 1500)
    
    };
    
    function stepCross(target) {
    	target.innerHTML = cross;
    	target.classList.add('x');
    	let crossAudio = new Audio('audio/cross.mp3');
    	crossAudio.play();
    	count++;
    }
    
    function init(e) {
    	stepCross(e.target);
    	AIPlay();
    	win();
    }
    
    function newGame() {
    	count = 0;
    	result.innerText = '';
    	fields.forEach(el => {
    		el.innerHTML = '';
    		el.classList.remove('x', 'o', 'active');
    	});
    	game.addEventListener('click', init);
    }
    
    function win() {
    	let comb = [
    		[0, 1, 2],
    		[3, 4, 5],
    		[6, 7, 8],
    		[0, 3, 6],
    		[1, 4, 7],
    		[2, 5, 8],
    		[0, 4, 8],
    		[2, 4, 6]
    	];
    
    	for (let i = 0; i < comb.length; i++) {
    		if (fields[comb[i][0]].classList.contains('x') && fields[comb[i][1]].classList.contains('x') && fields[comb[i][2]].classList.contains('x')) {
    			setTimeout(() => {
    				fields[comb[i][0]].classList.add('active');
    				fields[comb[i][1]].classList.add('active');
    				fields[comb[i][2]].classList.add('active');
    				result.innerText = 'Выиграли X';
    			}, 1500);
    			game.removeEventListener('click', init);
    		}
    		else if (fields[comb[i][0]].classList.contains('o') && fields[comb[i][1]].classList.contains('o') && fields[comb[i][2]].classList.contains('o')) {
    			setTimeout(() => {
    				fields[comb[i][0]].classList.add('active');
    				fields[comb[i][1]].classList.add('active');
    				fields[comb[i][2]].classList.add('active');
    				result.innerText = 'Выиграли 0';
    			}, 1500);
    			game.removeEventListener('click', init);
    		}
    		else if (count == 9) {
    			setTimeout(() => {
    				result.innerText = 'Ничья';
    				game.removeEventListener('click', init);
    			}, 1500);
    		}
    
    	}
    }
    
    btnNewGame.addEventListener('click', newGame);
    game.addEventListener('click', init);

    JavaScript Anonymous, Oct 4, 2020

  • 1 Answers
  • 0
    Zeros are timed out and the status check is performed immediately. That is, first you check the state of the field, and only then the winning combination appears.
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!