Asynchronous computerTurn/PlayerTurn in TicTacToe

1

I am working on the below (simplified here) and my thinking is to have the computer and player alternate turns, checking for a winner after each turn.

My problem is that the game doesn’t wait for the player turn, it just loops through the computer’s turns and the computer immediately wins. I think this is to do with asynchronous nature of JS but don’t know what to do about it. Can anyone give me some guidance please? Am I approaching this in completely the wrong way?.. I am a noob so expect this is likely!

Thanks,

Tim.

function computerTurn() {
    ...
}

function playerTurn() {
    // wait for a click in an empty square
}

function checkWinner() {
    ...
}


$('document').ready(function() {
    $('#launch').click(function() {

        while (!winner) {
            computerTurn();
            checkWinner()
            playerTurn();
            checkWinner();
        }
    }
    // declare winner here
}
2

Try triggering the whole playerTurn -> checkWinner -> computerTurn business when you click a square on the board, instead of a while-loop.

3

Thanks Kev! That’s much better. Still a lot of spaghetti code, and much to refactor, but at least it’s functional for now.

4

I beat the computer with zero artificial intelligence. I’m proud :slight_smile:

5

This reminds me of a game I made back in university :slight_smile: the first question I would ask is why you are focusing on a functional style? Might be jumping ahead of the curriculum here but I think you could improve the code quality massively by making it more object orientated.

Having a tile object rather than lots of arrays I think would be a great win. It should make it easier to understand and make it much more maintainable.

A tile object would be a great simple one to start with:
Class tile {
constructor() {
this.symbol = null;
}

function ClaimForPlayer() {
this.symbol = playerSymbol;
}

function IsAvailable()
{
return this.symbol === null;
}
}

The point to this change would be that any code using this class would become much simpler and easier to read.

if(tile.IsAvailable()) vs if(availablecells.contains(6))

It might not seem like a big difference but if you keep with the principle throughout it really adds up.

Happy coding!

6

Hi Craig,

I was trying to go with Functional because I’ve been reading/YouTubing a lot about it recently and wanted to see what I could do (it needs a lot of refactoring yet; I can see lots of things that jump out as being wrong and/or requiring drying up. The penny has only recently dropped that OOP and Functional are two styles of doing the same thing. It also seems to be easier to program like this… less ‘this’ and binding and a lot less ‘why the hell doesn’t this work?!’, I found, but hey I’m new so I’m probably wrong :slight_smile:

I’ll take a look at your code, thank you for taking the time to respond. So you would end up creating a tile object as each square is picked, I see. I don’t really understand the benefit over a couple of tiny arrays for this particular game (I do understand the readability part); it seems that OOP would be an increase in complexity for just a little gain whereas a couple of lines of comments would save a lot of time instead. I can see how for more complex information an object would be beneficial to store that information. Like I say, I’m new and aware of that fact, so expect that I can’t grasp the subtleties yet.

Thanks again,

Tim.