CODEWITHSUNDEEP
javascripttic-tac-toe
vaspv
vaspv

Reputation: 25

Tic Tac Toe in Javascript - winners issue

I'm experimenting with a Javascript Tic-Tac-Toe game. It works fine in all aspects except for one sequence and am not sure why this error happens.

The basic structure is that each tile sends an ID number and onclick ,the tile gets the x/o, the overall pattern is recorded and free squares inserted into the free array. Since this is human vs AI, at each click of active (selected ID - x or o), the value is set to the tile and the inactive value is automatically placed in a free tile.

My JSFiddle is here: https://jsfiddle.net/vaspv/Lqoct19a/18/

The JS code is below:

var aid = "x"; //the selection variable
var iid = "o"; // the inactive variable
var live = []; //live rendering of patterns
var free = []; // shows the free boxes in zero array 
var squaresFilled = 0;

live = ["f", "f", "f", "f", "f", "f", "f", "f", "f"];
wins = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];

function setval(bno) {

checkfree();

//if cell is free, enter active id, check for winning combinations and update free array
if (live[bno - 1] == "f") {

document.getElementById("c" + bno).innerHTML = aid;
document.getElementById("c" + bno).style.color = 'skyblue';
live.splice(bno - 1, 1, aid);
squaresFilled++;
checkfree();

// if cell is free and total squares are less than or equal to 8, auto set the inactive variable. this is done to ensure that on 9th turn there is no waiting for auto set. Check for winning combinations of inactive variable and update free array


if (squaresFilled < 9) {
  var fid = free[0];
  var fidd = fid + 1;
  document.getElementById("c" + fidd).innerHTML = iid;
  live.splice(fidd - 1, 1, iid);
  squaresFilled++;
  myResulty(live[fidd - 1]);
}
checkfree();
myResult(live[bno - 1]);

//document.getElementById("test1").innerHTML = free + " / " + live;   This statement is only there to uncomment and add to p text to see arrays unfolding

} else alert("cell is already filled");

} // end of setval function

function myReload() {
location.reload(true);
}

// allows user selection of active id. if blank, value is x.

function seto() {
  aid = "o";
 iid = "x";
 document.getElementById("buttono").style.color = 'skyblue';
 document.getElementById("buttonx").style.color = 'coral';
}

function setx() {
  aid = "x";
  iid = "o";
 document.getElementById("buttonx").style.color = 'skyblue';
document.getElementById("buttono").style.color = 'coral';
}

//resets and inserts free tiles in array

function checkfree() {
free = [];
for (var i = 0; i < 9; i++)
 if (live[i] == "f")
  free.push(i);
 }

// winners using active id
function myResult(wid) {
 for (var a = 0; a < 9; a++) {
 if (live[wins[a][0]] == wid &&
  live[wins[a][1]] == wid &&
  live[wins[a][2]] == wid) {
  alert("The Winner is " + wid);
  myReload();
    }
  }
}

// winners using inactive id

function myResulty(wido) {
  for (var b = 0; b < 9; b++) {
    if (live[wins[b][0]] == wido &&
      live[wins[b][1]] == wido &&
      live[wins[b][2]] == wido) {
      alert("The Winner is " + wido);
      myReload();
    }
  }
}

The issue I am having is that when i insert 3x in the side columns, the winner is not declared immediately. To replicate, in your first three turns, enter X in tiles 3,6 and 9. There is no notification for winner is x. Now enter two x values in tile 7 and 8. This now gives two winning notifications.

Not sure why?? Any ideas? Thanks!

Upvotes: 2

Views: 183

Answers (1)

Gabriel
Gabriel

Reputation: 2190

You have an error that is stopping myResult.

for (var a = 0; a < 9; a++) {
    if (live[wins[a][0]] == wid &&
                  ^a goes up to 8 but wins has 7 elements

Upvotes: 1

Related Questions