Checking for more than 2 things in an array with array.includes()

Question

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

Good suggestions below to use every-- here is a link to more detail on what it does and how it works: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… You'll also note it enjoys good browser support. — Alexander Nied
– Alexander Nied, Commented Apr 18, 2019 at 5:13

Jack Bashford · Accepted Answer · 2019-04-18 05:03:24Z

1

Use every:

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

answered Apr 18, 2019 at 5:03

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pranav C Balan · Accepted Answer · 2019-04-18 05:14:56Z

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.

edited Apr 18, 2019 at 5:14

answered Apr 18, 2019 at 5:02

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

11 Comments

VLAZ Over a year ago

@CertainPerformance thanks to that library that cocked it up for the entire internet, we are stuck with this mistake.

Kingzel Over a year ago

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

Pranav C Balan Over a year ago

@Kingzel : you have to manage that ... check array size or something else

Kingzel Over a year ago

@PranavCBalan what array only has 3 values so far it shouldnt be a prolem

Pranav C Balan Over a year ago

@Kingzel : you need to call it only at the end of the game or you have to check win case for blue as well

|

frodo2975 · Accepted Answer · 2019-04-18 05:17:15Z

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.

answered Apr 18, 2019 at 5:17

frodo2975

12k5 gold badges39 silver badges52 bronze badges

Collectives™ on Stack Overflow

Checking for more than 2 things in an array with array.includes()

3 Answers 3

Comments

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related