JavaScript Tic Tac Toe - Finding All Possible Combinations of Numbers within an Array

Question

I am currently writing a basic Tic Tac Toe game (multiplayer, no AI) using web (HTML, CSS, Javascript). The game logic obviously is all within the Javascript. I have a question. The following is my code.

window.onload = function () {
    console.log("Page has loaded");
}
var ctx;
var turn = 0;
var winningCombo = [
    [1, 4, 7],
    [2, 5, 8],
    [3, 6, 9],
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [1, 5, 9],
    [3, 5, 7]
];
var playedComboX = [];
var playedComboO = [];
var filledSquares = [0];
var filled = false;
console.log(winningCombo.length);
var checkWinnerX = function () {
    for(var i = 0; i < winningCombo.length; i++) {
        console.log('Its in the X check winner loop');
        if((winningCombo[i][0] == playedComboX[0]) && (winningCombo[i][1] == playedComboX[1]) && (winningCombo[i][2] == playedComboX[2])) {
            alert("Congrats, you have won!");
            return true;
        }
        return false;
    }
}
var checkWinnerO = function () {
    for(var i = 0; i < winningCombo.length; i++) {
        console.log('Its in the 0 check winner loop');
        if(winningCombo[i][0] == playedComboO[0] && winningCombo[i][1] == playedComboO[1] && winningCombo[i][2] == playedComboO[2]) {
            console.log('It has passed the if statement for X');
            alert("Congrats, you have won!");
            return true;
        }
        return false;
    }
}
var checkWinner = function () {}
var draw = function (squareNumber) {
    console.log('draw has been called');
    var squareID = "square" + squareNumber;
    var squareClicked = document.getElementById(squareID);
    ctx = squareClicked.getContext('2d');
    for(var i = 0; i < filledSquares.length; i++) {
        if(filledSquares[i] == squareNumber) {
            filled = true;
        } else {
            filled = false;
        }
    }
    if(filled == true) {
        alert("Invalid Move! Square is already occupied");
    } else {
        filledSquares.push(squareNumber);
        ctx.beginPath();
        if(turn % 2 == 0) {
            //Drawing a 'X'
            ctx.moveTo(20, 20);
            ctx.lineTo(135, 135);
            ctx.moveTo(135, 20);
            ctx.lineTo(20, 135);
            ctx.lineWidth = 6;
            ctx.stroke();
            turn++;
            playedComboX.push(squareNumber);
            checkWinnerX();
        } else {
            //Drawing a Circle
            ctx.arc(75, 75, 65, 2 * Math.PI, false);
            ctx.lineWidth = 6;
            ctx.stroke();
            turn++;
            playedComboO.push(squareNumber);
            checkWinnerO();
        }
    }
}

Right now, the checkWinner functions only check for exact matches with the array elements within the winningCombo array (ex: if the combination is 3,1,2 instead of 1,2,3 then it won't register). Is there anyway I can check all possible combinations of the 3 numbers in each element? Hope my explanation makes sense, Thanks.

PS: Forgive me if any of the code isn't as well-written as it could me, it's my first time attempting to write a game. But be as critical as you wish!

Update 2:

var checkWinnerX = function () {
    for(var i = 0; i < winningCombo.length; i++) {
        console.log('Its in the X check winner loop');
        if((winningCombo[i][0] == sortedArrayX[0]) && (winningCombo[i][1] == sortedArrayX[1]) && (winningCombo[i][2] == sortedArrayX[2])) {
            alert("Congrats, you have won!");
            return true;
        }
        return false;
    }
}

http://stackoverflow.com/questions/13577484/permutation-need-help-to-code — zerkms, Mar 28 '13 at 00:45

score 1 · Answer 1 · answered Aug 19 '13 at 18:25

i think a better way to do it is:

for(var i = 0; i < winningCombo.length; i++) {
    if ( playedComboO.indexOf(winningCombo[i][0]) >= 0 ) {
        if ( playedComboO.indexOf(winningCombo[i][1]) >= 0 ) {
            if ( playedComboO.indexOf(winningCombo[i][2]) >= 0 ) {
                 //blah blah blah you win whatever
            alert("Congrats, you have won!");
        return true;
            }
       }
    }
}

score 0 · Answer 2 · answered Mar 28 '13 at 00:47

0

Sort the played array before comparing to winningCombo.

playedComboO.sort(function (a, b) {
    return a - b;
});

I think that playedComboO.sort() (and playedComboX.sort()) may also work, but the default sort functionality is by string rather than by number.

answered Mar 28 '13 at 00:47

Explosion Pills

188,624
52
326
405

Okay, thanks for the reply. I looked into the .sort() function, but apparently it will sort it in either ascending or descending order. So how can I get it to check all 3 combinations. Here is something I've added in one of the checkWinner functions, Im not sure how else to implement the sort function. It doesn't work however. – jeet.m Mar 28 '13 at 01:15
@JeetMehta you need to store the result of `.sort` in something – Explosion Pills Mar 28 '13 at 01:16
Okay so what I've done is shown in update 2 above, just created a sorted version of playedComboX and stored it in sortedArrayx, its not working. I apologize if I'm not understanding you correctly. – jeet.m Mar 28 '13 at 01:38

JavaScript Tic Tac Toe - Finding All Possible Combinations of Numbers within an Array

2 Answers2