javascript - X's Replaces O's -

javascript - X's Replaces O's -

i'm making tic tac toe game , im trying prepare bug have now.

when play game , click on o's changes x how can prepare this?

i thought like: if (turn == 0 && ('td') == "") { doesn't work

var newgame = function () { $('td').one('click', function (event) { if (turn == 0) { $(this).text(human); boardcheck(); checkwin(); turn == 1; compmove(); boardcheck(); checkwin(); } }); };

// variables

var human = 'x'; // turn = 0 var computer = 'o'; // turn = 1 var compmove; var turn = 0; // toggles btw 0 , 1 switching turns var boardcheck; // function check value in each cell var a1; // value within each cell var a2; var a3; var b1; var b2; var b3; var c1; var c2; var c3; var checkwin; // function checks board winning combo var xwin = false; // true if x wins var owin = false; // true if o wins var winalert; // function declares winner , restarts game var newgame; var clearboard; // places x or o in box when clicked. toggles. var newgame = function () { $('td').one('click', function (event) { if (turn == 0) { $(this).text(human); boardcheck(); checkwin(); turn == 1; compmove(); boardcheck(); checkwin(); } }); }; // initializes game - maintain after var newgame $(document).ready(function () { newgame(); }); // comp move ai detects if there 2 in row next empty cell , places move there var compmove = function () { if (a1 == "" && ((a3 == "x" && a2 == "x") || (c3 == "x" && b2 == "x") || (c1 == "x" && b1 == "x"))) { $('#a1').text("o"); turn = 0; } else { if (a2 == "" && ((a1 == "x" && a3 == "x") || (c2 == "x" && b2 == "x"))) { $('#a2').text("o"); turn = 0; } else{ if (a3 == "" && ((a1 == "x" && a2 == "x") || (c1 == "x" && b2 == "x") || (c3 == "x" && b3 == "x"))) { $('#a3').text("o"); turn = 0; } else{ if (c3 == "" && ((c1 == "x" && c2 == "x") || (a1 == "x" && b2 == "x") || (a3 == "x" && b3 == "x"))) { $('#c3').text("o"); turn = 0; } else{ if (c1 == "" && ((c3 == "x" && c2 == "x") || (a3 == "x" && b2 == "x") || (a1 == "x" && b1 == "x"))) { $('#c1').text("o"); turn = 0; } else{ if (c2 == "" && ((c3 == "x" && c1 == "x") || (a2 == "x" && b2 == "x"))) { $('#c2').text("o"); turn = 0; } else{ if (b1 == "" && ((b3 == "x" && b2 == "x") || (a1 == "x" && c1 == "x"))) { $('#b1').text("o"); turn = 0; } else{ if (b3 == "" && ((a3 == "x" && c3 == "x") || (b2 == "x" && b1 == "x"))) { $('#b3').text("o"); turn = 0; } else{ if (b2 == "" && ((a3 == "x" && c1 == "x") || (c3 == "x" && a1 == "x") || (b3 == "x" && b1 == "x") || (c2 == "x" && a2 == "x"))) { $('#b2').text("o"); turn = 0; } else{ // if no opp block win, play in 1 of these squares if (b2 == "") { $('#b2').text("o"); turn = 0; } else{ if (a1 == "") { $('#a1').text("o"); turn = 0; } else{ if (c3 == "") { $('#c3').text("o"); turn = 0; } else { if (c2 == "") { $('#c2').text("o"); turn = 0; } else{ if (b1 == "") { $('#b1').text("o"); turn = 0; } } } } } } } } } } } } } } }; // creates function observe in each box after each move boardcheck = function () { a1 = $('#a1').html(); a2 = $('#a2').html(); a3 = $('#a3').html(); b1 = $('#b1').html(); b2 = $('#b2').html(); b3 = $('#b3').html(); c1 = $('#c1').html(); c2 = $('#c2').html(); c3 = $('#c3').html(); }; // creates function observe win or tie checkwin = function () { // checks if x won if ((a1 == a2 && a1 == a3 && (a1 == "x")) || //first row (b1 == b2 && b1 == b3 && (b1 == "x")) || //second row (c1 == c2 && c1 == c3 && (c1 == "x")) || //third row (a1 == b1 && a1 == c1 && (a1 == "x")) || //first column (a2 == b2 && a2 == c2 && (a2 == "x")) || //second column (a3 == b3 && a3 == c3 && (a3 == "x")) || //third column (a1 == b2 && a1 == c3 && (a1 == "x")) || //diagonal 1 (a3 == b2 && a3 == c1 && (a3 == "x")) //diagonal 2 ) { xwin = true; winalert(); } else { // checks if o won if ((a1 == a2 && a1 == a3 && (a1 == "o")) || //first row (b1 == b2 && b1 == b3 && (b1 == "o")) || //second row (c1 == c2 && c1 == c3 && (c1 == "o")) || //third row (a1 == b1 && a1 == c1 && (a1 == "o")) || //first column (a2 == b2 && a2 == c2 && (a2 == "o")) || //second column (a3 == b3 && a3 == c3 && (a3 == "o")) || //third column (a1 == b2 && a1 == c3 && (a1 == "o")) || //diagonal 1 (a3 == b2 && a3 == c1 && (a3 == "o")) //diagonal 2 ) { owin = true; winalert(); } else { // checks tie game if cells filled if (((a1 == "x") || (a1 == "o")) && ((b1 == "x") || (b1 == "o")) && ((c1 == "x") || (c1 == "o")) && ((a2 == "x") || (a2 == "o")) && ((b2 == "x") || (b2 == "o")) && ((c2 == "x") || (c2 == "o")) && ((a3 == "x") || (a3 == "o")) && ((b3 == "x") || (b3 == "o")) && ((c3 == "x") || (c3 == "o"))) { alert("it's tie!"); clearboard(); } } } }; // declares won var winalert = function () { if (xwin == true) { alert("you won!"); clearboard(); // doesn't work } else { if (owin == true) { alert("sorry, lose!"); clearboard(); // doesn't work } } }; // newgame button clears board, restarts game, , resets wins var clearboard = $('#restart').click(function (event) { a1 = $('#a1').text(""); b1 = $('#b1').text(""); c1 = $('#c1').text(""); a2 = $('#a2').text(""); b2 = $('#b2').text(""); c2 = $('#c2').text(""); a3 = $('#a3').text(""); b3 = $('#b3').text(""); c3 = $('#c3').text(""); xwin = false; owin = false; newgame(); window.location.reload(true); // without this, there's bug places multiple 0's on games after first }); // still need fix: // * alert tie game or xwin appears twice // * x's can replace o's // * missed opportunities o win // * never let's human win // * clean logic compmove'

if (turn == 0 && $(this).text() == "") {

javascript jquery tic-tac-toe