Tic-Tac-Toe Loop

Question

I am making a game of tic-tac toe in javascript. I have laid out some of what I believe to be the basic building blocks:

var board = [
            0, 0, 0,
            0, 0, 0,
            0, 0, 0
            ];
gameOn = true;
player1Move = true;
counter = 0;
player1 = [];
player2 = [];
var ask = console.log(prompt('where would you like to go?'));

var drawBoard = function(){
    console.log("   A " + (board[0]) + "| B " + (board[1]) + "| C " + (board[2]));
    console.log("  ------------- ");
    console.log("   D " + (board[3]) + "| E " + (board[4]) + "| F " + (board[5]));
    console.log("  ------------- ");
    console.log("   G " + (board[6]) + "| H " + (board[7]) + "| I " + (board[8]));
    console.log("  ------------- ");
};

var solutions = [
    (board[0] && board[1] && board[2]) || (board[3] && board[4] && board[5]) ||
    (board[6] && board[7] && board[8]) || (board[0] && board[3] && board[6]) ||
    (board[1] && board[4] && board[7]) || (board[2] && board[5] && board[8]) ||
    (board[0] && board[4] && board[8]) || (board[2] && board[4] && board[6])
];



while (gameOn === true){
// for loop for game logic
    for (var i = 0 ; i < 9; i++){
      if (player1Move === true) {
        player1.push(ask);
        drawBoard();
        player1Move = false;
      } else if (player1Move === false){
        player2.push(ask);
        drawBoard();
        player1Move = true;
      } else if ((player1 || player2) === solutions){
          gameOn = false;
          console.log((player1 || player2) + "wins!");
      } else {
        gameOn = false;
        console.log("Tie Game!");
      }
    }
}

I know that the syntax of my main loop is incorrect. Why can't I do what is currently written? If you had this existing code, what type of loop setup would you use to accomplish this? Sorry if this seems not specific enough, I am just lost in the logic of it all!

With this existing loop all I am trying to do is go through and prompt the 2 users 9 times(because maximum moves = 9) in total for now. Once that works than I will keep adding more game logic into it. Why can't I get the prompt to come up 9 times? The current result is that it prompts me once, prints out the board 9 times and false after all of it.

This just needs to work in a terminal window for now too by the way.

Answer 1

I changed your code as little as possible, but a few things are different, which I am explaining bit by bit.

var board = {
    A: null,
    B: null,
    C: null,
    D: null,
    E: null,
    F: null,
    G: null,
    H: null,
    I: null
};

gameOn = true;
player1Move = true;

var drawBoard = function(){
    console.log("   A " + (board.A || '') + "| B " + (board.B || '') + "| C " + (board.C || ''));
    console.log("  ------------- ");
    console.log("   D " + (board.D || '') + "| E " + (board.E || '') + "| F " + (board.F || ''));
    console.log("  ------------- ");
    console.log("   G " + (board.G || '') + "| H " + (board.H || '') + "| I " + (board.I || ''));
    console.log("  ------------- ");
};

var solutions = function() {
    return (board.A && (board.A == board.B && board.A == board.C))
        || (board.D && (board.D == board.E && board.D == board.F))
        || (board.G && (board.G == board.H && board.G == board.I));
};

drawBoard();
var currentPlayer;

while (gameOn === true){
// for loop for game logic
    for (var i = 0 ; i < 9; i++){
        if (solutions()){
            console.log(currentPlayer + " wins!");
            gameOn = false;
            break;
         }
        //else {
        //    gameOn = false;
        //    console.log("Tie Game!");
        //}
        currentPlayer = 'Player 1';
        if(!player1Move)
            currentPlayer = 'Player 2';

        var ask = prompt(currentPlayer + ': where would you like to go (A or B or C or ..)?');
        if(ask == 'exit') {
            gameOn = false;
            break;
        }

        if (player1Move === true) {
            //player1.push(ask);
            board[ask] = 'X';
            drawBoard();
            player1Move = false;
        } else if (player1Move === false){
            board[ask] = 'O';
            drawBoard();
            player1Move = true;
        }
    }
}

It's not completely finished, but then that's something you can do afterwards, and probably you didn't want me to do it all for you.

This all works in a Chrome console.

There were a couple of basic things that were holding you back:

1. var ask = console.log(prompt('where would you like to go?')); should be var ask = prompt(currentPlayer + ': where would you like to go?'); - your version was filling ask with null.
2. This prompt was also in the wrong place: it needs to be in the loop, and after drawBoard(), so that the player has something to look at.
3. I've changed the board from an array into an object, so that player answers like 'A' refer directly to the object fields. And that way the player arrays could be removed.
4. The solutions() function needs completing, as you can see, and there may be a neater way of doing this.
5. I added the possibility of writing 'exit' in the prompt, otherwise there's no way of exiting the game early.
6. I didn't finish the 'Tie game!' code.