2

I am making a tic tac toe based in pure JS however while defining the win conditions for the players i want it to alert the user when the conditions are matched..

When a box is checked if . it is X who plays it turns red and if it is O's turn then blue and it also registers the id of the box element into an array containing all the boxes that are occupied also depending if the box is red or blue it also tags the id along with a 0 , 1 (0 is red 1 is blue)

so the array looks like this (11,0 22,1 33,0) 11 is first row 1st column 0 means red has occupied that spot (red = X)

In the past i have tried array.includes to check if the boxes that are already clicked are in a row or a diagonal and if they are also checked by the same player.. i used an and operator so it checks if 3 in a row are checked by the same player.. so that only if all three in a row are checked it alerts the win. I have stored the boolean value in redwincond bluewincond

function logic(clickedArr) {
    redwinCond = clickedArr.contains(("11,0") && ("22,0") && ("33,0"));

    bluewinCond = clickedArr.contains(("11,1") && ("22,1") && ("33,1"));

    console.log(bluewinCond, redwinCond)

    if (redwinCond === true) {
        alert("Red wins !")
    } else if (bluewinCond === true) {
        alert("Blue wins !")
    } else {

    }    
}

example redwinCond = clickedArr.contains(("11,0") && ("22,0") && ("33,0")); Expected result: after all 3 are checked by the same color alerts user

Result: only when the third box specified (33,0) is clicked it alerts. doesnt check if other 2 are checked also CHECKED

1

3 Answers 3

1

Use every:

["11,0", "22,0", "33,0"].every(s => clickedArr.includes(s));
1

There isn't any method named contains for Array instead of that you can use Array#every method along with Array#includes methods.

 ["11,0", "22,0", "33,0"].every(v => clickedArr.includes(v))

FYI : In your code ("11,0") && ("22,0") && ("33,0") will reults "33,0" since all the other values are truthy.

11
  • @CertainPerformance thanks to that library that cocked it up for the entire internet, we are stuck with this mistake.
    – VLAZ
    Commented Apr 18, 2019 at 5:05
  • But even if I start the game with the (33,0) it will consider it as a win .. even though it is the first turn in the game
    – Kingzel
    Commented Apr 18, 2019 at 5:11
  • @Kingzel : you have to manage that ... check array size or something else Commented Apr 18, 2019 at 5:13
  • @PranavCBalan what array only has 3 values so far it shouldnt be a prolem
    – Kingzel
    Commented Apr 18, 2019 at 5:16
  • @Kingzel : you need to call it only at the end of the game or you have to check win case for blue as well Commented Apr 18, 2019 at 5:18
0

A cleaner way would be to store your board state, instead of every storing every click. It'll make your life a lot simpler. For example, one way to do it would be to store it in nested arrays like this:

var board = [
    ['x', '', 'o'],
    ['x', '', ''],
    ['',  '', '']
];

The top-right square would be accessed like: board[0][2]. You also can iterate the rows and columns in your win checking function instead of having to hardcode every row and column manually.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.