Tic tac toe tutorial?

Anyone know of a tic tac toe tutorial for bubble. I thought I seen one quite sometime ago (year or two), but can’t seem to find it.

Greatly appreciated if you can help.

I’ve seen it all out here, and I don’t remember ever seeing a tutorial for Tic Tac Toe, and searches of the forum and via Google are turning up bupkis. Hmm, maybe we’ll just have to make our own.

1 Like

Hi Mike,

Hope you are having a fantastic day so far!
Great idea I’m on it :slight_smile:

I was on it, too, and I probably came up with the worst implementation ever. That being said, I do have a working Tic Tac Toe game.

I started with an option set called OS Numbers, and it has options of 1 through 9. A 3x3 repeating group shows the grid with a type of content of OS Numbers and a data source of All OS Numbers.

I have 10 custom states at the page (index) level. 9 of the states are labeled 1 through 9, and they have a state type of text. The 10th state is labeled turn, it has a state type of number, and it has a default value of 1.

I have a group in the repeating group that has 2 workflows attached to it. The first workflow looks like this.

The first step in the workflow sets the turn custom state to 2. The next 9 steps look like this, with their custom states and conditions changed to reflect the appropriate numbers, of course.

The other workflow associated with the group is exactly the same except the first step sets the turn custom state to 1, and the next 9 steps set their respective custom states’ values to o instead of x.

Inside the group in the repeating group is an icon that shows x by default. The icon is not visible on page load, and it has 18 conditions, 9 for the x’s and 9 for the o’s.

Finally, the group itself has 9 conditions on it to stop a space from being clicked if the space is already taken.

Anyway, that’s my working Tic Tac Toe game, and I eagerly await the ridicule I might receive (and deserve) because there almost certainly has to be a better way to go about it.

1 Like

Hi @mikeloc ,

You are awesome!

I’ve taken a slightly different approach not finished (tough getting time during the week)

Here is the database structure (Im only using Game Cells at the moment):

Then in Design tab have 9 groups, inside of those groups is a text element.
There are 3 rows and 3 columns

The groups are set to:
Type of content: Game Cell
Data source: Search for Game Cell:first item
with constraints to match what’s in the database (for each cell/group):

This way later I can see if someone wins, loses or ties.

The text element inside of the group has an expression

to get what’s in the database

Then Ive also got 3 conditionals on each text element:

x is for player x, o is for player o and e is for empty (for testing later I’ll remove e).

To start a new game and change all of the squares to empty, I run a workflow on the button (New Game) Make Changes to a thing (Game Cell)
Thing to Change Group Game Cell 1’s Game Cell
Occupied by arbitrary text “e”
Then duplicate this 9 times and change the Group Game Cell 1’s to each cell you have 1 through 9

Now when you create a new game the board is reset to all empty squares.

More to follow I haven’t thought it all the way through Im just throwing spaghetti at the wall to see what sticks (be back soon with part 2).


I just refresh the page. :wink:

1 Like

@adamhholmes this is what happens when you don’t post a Bubble challenge for weeks :grin:


Yeah, it really is Adam’s fault. When left to my own devices, sh*t goes off the rails real quick.

1 Like