Search code examples
javascripttic-tac-toe

Need explanation for Javascript TicTacToe-Game


I'm looking for an explanation why this code in Javascript works.

Idea looks as follow:

             *     273                 84
             *        \               /
             *          1 |   2 |   4  = 7
             *       -----+-----+-----
             *          8 |  16 |  32  = 56
             *       -----+-----+-----
             *         64 | 128 | 256  = 448
             *       =================
             *         73   146   292

Every time a player sets his figure, the number of the field is added to his score. The numbers around the field are the wins.

Now there is this checkup:

wins = [7, 56, 448, 73, 146, 292, 273, 84],
win = function (score) {
    var i;
    for (i = 0; i < wins.length; i += 1) {
        if ((wins[i] & score) === wins[i]) {
            return true;
        }
    }
    return false;
},

What I don't understand now: If a player sets a figure in fields (numbers in the fields, order matters) 1,16,4,2, then he has a score of 23. How does the code knows that he has 3 in a row even though he does not have score 7? (which is the row on top) Because the code only compares the score with the wins, and 23 is not a win!


Solution

  • It's not comparing to a number, it's comparing which bits are set. The line wins[i] & score === wins[i] means that it is comparing any common bits between wins[i] and score with wins[i].

    Here's an example using the values you had in your question, 1,16,4,2.

    1 = 1
    2 = 10
    4 = 100
    7 = 111
    16 = 10000
    

    Therefore if you picked all of these fields it is 10111 in binary, comparing that to 7, the common bits that are flipped is 111 (7), so it knows that there is a win because those 3 are are all set.