Question

I am making a tic tac toe game. Someone already taught me how to get the winner declared and stop further play.

There are two persistent problems. The first is that when the wins are straight across, the counters add 1 to the x wins and 2 to the o wins. The second issue is that I can’t get the game to call a draw. I have tried else if without results.

Here is the whole js and the game can be seen at: http://jvonhausen.com/final/p19/

jQuery(function() {

    $('#start').click(clear_squares);

    $('.square').click(function () {    
        square_stuff(this);
    });

});

var player_x = true; 
var complete = false; 
var winner = '';
var x_wins = 0;
var o_wins = 0;
var draw = 0;

function clear_squares () {
    localStorage.setItem('x_count', x_wins); 
    localStorage.setItem('o_count', o_wins); 
    localStorage.setItem('draw_count', draw); 

    $('.square').html(''); 

    player_x = true;
    $('#output').html('turn: x');

    complete = false; //allows for new game
}


function square_stuff (square) {
    if (!complete) {
        if ($(square).html() == '') {       
            if (player_x == true) {
                $(square).html('x');
                player_x = false;               
            } else {            
                $(square).html('o');
                player_x = true;                
            }
        }
    }   
    check_squares();
}

function check_squares () {
    complete = true;
    var values = new Array(); 
    var winner = '';

    $('.square').each(function () {     
        values.push( $(this).html());
        if ($(this).html() == '') complete = false;
        if ( !winner && values[0] == values[1] && values[1] == values[2] ) winner = values[0];
        if ( !winner && values[3] == values[4] && values[4] == values[5] ) winner = values[4];
        if ( !winner && values[6] == values[7] && values[7] == values[8] ) winner = values[7];
        if ( !winner && values[0] == values[3] && values[3] == values[6] ) winner = values[3];
        if ( !winner && values[1] == values[4] && values[4] == values[7] ) winner = values[1];
        if ( !winner && values[2] == values[5] && values[5] == values[8] ) winner = values[5];
        if ( !winner && values[0] == values[4] && values[4] == values[8] ) winner = values[8];
        if ( !winner && values[2] == values[4] && values[4] == values[6] ) winner = values[2];      
        if (winner) {           
            complete = true;
            $('#output').html('winner: ' + winner);
            if ($(this).html() == 'x') {
                localStorage.setItem('x_count', x_wins); 
                x_wins++;
                $('#wins_x').val(x_wins);
            } 
            if ($(this).html() == 'o') {
                localStorage.setItem('o_count', o_wins); 
                o_wins++;
                $('#wins_o').val(o_wins);
            }
            if (winner == '' && complete == true) { 
                $('#output').html('no winner');
                localStorage.setItem('draw_count', draw); 
                draw++;
                $('#draws').val(draw);
            }   
        }                   
        if (winner == '' && complete == false) {    
            if (player_x == true) {     
                $('#output').html('turn: x');
            } else {        
                $('#output').html('turn: o');
            }       
        }
    });

}

Answer 1

You are not breaking out of you “each” loop once you detect a winner. I think this will work:

$('.square').each(function () {  
    if (winner) {
       return;
    }   
    values.push( $(this).html());
    ....

Alternatively, this is just cleaner:

function check_squares () {
complete = true;
var values = []; // better way to declare an empty array
var winner = '';

// build the values array first
$('.square').each(function () {     
    values.push( $(this).html());
}

// then just check for a winner once... 
if ( !winner && values[0] == values[1] && values[1] == values[2] ) winner = values[0];
....

And the reason why your code isn’t detecting a draw is because your check for draw is occuring inside the “if (winner)” block.

   if (winner) {           
        complete = true;
        ....

        // the clause will never get executed, because winner must have already been set to have made it this far
        // so winner == '' will aways be false
        if (winner == '') { 
            $('#output').html('no winner');