🎮 WDC #17 Tic Tac Toe: The Next Generation

It is just tic tac toe but a little advanced with chat and all

1 Like

Hi All,

Tried making the very basic version of Goblet Tic tac toe-


This is a very basic version, so some bugs may stay, but the main version works… (i suppose). (This is the first time i heard of this version of tic tac toe…not sure if i understood all the rules correctly :sweat_smile:)

So this game has 2 players - 1 Green, the other Red
The bigger pieces can ‘eat up’ the smaller pieces and Red ones can capture Green and vice versa (if they are bigger).
One exception in the game rule is that - The player cannot move the piece what he has already played on the board to somewhere else on the board.
Once a piece is selected, the user has to play it, else he will not be able to use that piece again.

Could you guys give this a try?
Please forgive me if this app takes a bit of time to load… i guess there are ways to shorten up the code.


Looks pretty good! I’m not quite clear on your version… Gobblet usually has 3 piece sizes: small, medium and large. For each player, you have pieces numbered 1 to 6. How do these relate to the piece sizes? I was able to play a 6 on top of a 5… I assumed that wasn’t a legal move.

(Novice here)
Thanku for trying it out!!

Umm…so i followed the game shown in this video-

So basically, each player has 6 pieces from smallest piece to biggest.
G1 is smallest and g6 is the largest ( as I tried to visually show with the size of buttons :sweat_smile:)

The larger pieces can eat up the smaller pieces.
One exception in the game rule is that - The player cannot move the piece what he has already played on the board to somewhere else on the board.
Once a piece is selected, the user has to play it, else he will not be able to use that piece again.

Hope this helps…!

Yes but the pieces each player has are:

small, small, medium, medium, large, large

So I would expect something like:

1 1 2 2 3 3

instead of

1 2 3 4 5 6

I actually have this game at home. :grinning_face_with_smiling_eyes:


1 Like


I got that wrong!!

I ll fix that bug!!
Thanku for pointing it out :sweat_smile::+1:

1 Like

Here is the next version of the Gobblet Tic tac toe with corrections done as pointed out by @tatiang



here are a few screen shots of my version showing player 1 making move “A1” and player 2 responds with move “B8”. you can make a move by tapping on an origin button then tapping on a destination button then pressing “Make Move”. a player can only move a piece of his own color, from his rack or from the board into a blank space or cover (or gobble) the opponent’s piece (other color) of smaller size. i did not implement the “undo” feature - once a piece covers another it overrides that piece. i’m still working on the check for win. (the illustration is not an actual game - i just added a few pieces here and there to test the move validation and board update routine).


This is a whole new level of tic tac toe than what we used to play in the past. This is just amazing!!!


I like how you replicated the concentric circle design.


i couldn’t find any nice-looking set of nested circles in the wingdings font so i settled for those images - and anyway, it’s the size that matters in the game - the graphic is just a hint that there’s something nested (gobbled) inside.


here’s my TicTacToe DisCovery game!

i call it DisCovery because you use a DISC to COVER the other pieces while playing… never mind.


anyway here are the rules.

  1. player 1 always starts, default color is blue. (there is an option in Preferences where Player 1’s color can be changed but i haven’t thoroughly tested that yet).
  2. you make a move by tapping on an origin spot then tap on a destination spot then press “Make Move” button. if you make a mistake in tapping, do it again until you’ve entered the correct end points.
  3. you can only move a piece of your own color, from your rack or from the board.
  4. you can place it on a blank spot or you can place it over an existing piece on the board only if your piece is larger than the target piece and the target piece is of the opponent’s color. once you cover an opponent’s piece, it’s gone - there’s no undo function.
  5. you cannot return a piece from the board back to the rack.
  6. the first player to get 3 pieces of the same color wins. (after a win, allow a couple of seconds for the game to reset)

(i haven’t tested the cases where no more moves can be made or no winner found after all pieces have been played)


i had a lot of aha moments while writing this game.

  1. i use a simple 2-digit scheme to represent a piece, eg. piece 13 is owned by player 1 and it’s largest of the 3 sizes. piece 21 is owned by player 2, the smallest size. a zero on the board means it’s empty. validating moves is done by comparing numbers.
  2. the pieces i use for displaying are plain characters! i found the alt codes from the net and simply entered them into a 3-byte string and i substring into it based on which piece i’m displaying.
  3. in order to display them in different sizes, i set the component’s font size to a function based on the size of the piece.
  4. i use a 3x3 magic square mapped to the 3x3 board to look for pieces of the same color whose weights add up to 15 (see the row of X’s below)

I love these insights! It’s probably my favorite part of WDCs… thanks for sharing them. I think we can all learn from each other. There are so many different ways to program something and you found a really interesting, efficient and logical way to do that.