Tic-Tac-Toe - Part 1

Favourite 35 favourites
Tutorial written by blackhornetOriginally published on 10th, June 2012 - 11 revisions

Now we get to the fun stuff. Our first event builds up our board, setting up everything for a new game, even clearing everything from a previous game. On the Event sheet, create an On start of layout System event. Next add a global variable: GameDone=0. We need an action to set our Board layout to the SquareTx object. Center our SquareTx object in the window. Center our WinnersMarks sprite/animation, setting the speed to 0, and start with it invisible. We’ll pick the correct frame and make it visible when we have a winner, or a draw. Set our global variable to zero again. Clear WinnerText and LogText.

Next we load the Winners array with a JSON string. Use JSON:Load. This took some experimenting to figure out the correct format, but here it is:
If you read it down, rather than across, you see that each pair in a row identifies a square, and the three in a column build each set of the winner values from above:
1 is (0,0)
2 is (1,0)
3 is (2,0)
Which gives our first winner: {1,2,3}.
Note that winner marks have the same indexing as our Winners array. We’ll take advantage of this later. Arrays start at zero, so we are off-by-one from our notation, but that’s easily dealt with.

Now we actually buildup our board, based on the settings configured in Board. We need two loops to setup our x&y grid of tiles. Select the first event (by clicking on the extreme left of the row) add a sub-event and add a System:For, Set Name="y", Start index=0, Endindex=2. We need to add a second condition to do our x loop. Select the "y" event and add another For condition, Name:"x", Start=0, End=2.

Add action: Board, Physical: Create – Create tile: Tile: Tile. Logic X=loopindex("x"), Logic Y=loopindex("y"), Layer=1. This loops through our board creating tiles for each element.
Add actions to set the Tile’s: Animations:Set speed, Speed=0.

We also need to clear our CurrentPlay array indexed via the x & y loop-indexes. Use Set at XY.

At this point we have the entire board setup, built, and all fixed data set. If you run at this point you finally see something on the board, but we still need some more actions here.

Now we add our second top-level event to check if our game is in play or not. If not, then we don’t want much to happen. Add the event and test if GameDone = 0 (that is, the game is NOT done).

Now we start responding to mouse movements/events.
Add a sub-event: Mouse, Cursor is over object, Select Object: Tile.
Add action: Tile, Animations:Set frame, Frame Number=1.

Select the left most part of the event, Add, Add else.
Add action: Tile, Animations:Set frame, Frame Number=0.
If you run here, you will see that as we mouse over a square, the tile turns white, and as we move off, it turn back to grey.

Select the left most part of the Mouse event, Add, Add comment. Set to: Indicate current square when mouse-over
Now we get ready to play.

Click on left most area of event System/GameDone=0. Add:Add sub-event: Mouse, On object clicked. Mouse button=Left, Click type=Clicked, Object clicked=Tile.
Click on the Mouse condition and Add another condition. Set to Tile:Is visible. What this does is, when a visible tile is clicked, that tile is 'picked'. You can now reference the picked Tile by its object name. It is possible to 'pick' an object via various explicit 'Pick' events. Set the action to make that Tile invisible.

Now click on the event Add sub-event, Board, Instance variable:Is Boolean instance variable set, Instance variable=CurrentTurnIsX.
Using the picked tile’s UID, we reference the Board object, where all of the tiles live, to get its X and Y coordinates, and use that to reference into our CurrentPlay array. On an X, we set the CurrentPlay element to 1. For O, it’s 2. (Remember, 0 (zero) is blank).

We now create a Chess piece on the Board, at the same coordinates, replacing the tile (which we made invisible).
We can now add an Else on the Board:IsCurrentTurnX event and do the same for O. Now add a new blank sub-event on the Mouse event to toggle the Board’s CurrentTurnIsX boolean, and for debugging purposes, dump out the CurrentPlay array to watch internally what is happening.

At this point just add a new event at the very end for the RestartButton, On Click, action: System:Restart layout.

You should now have a usable tic-tac-toe board that shows the current mouse position, alternately places Xs and Os on the board, but doesn’t allow changes to the current piece. When all squares are filled, nothing happens until you press Restart.
Download the sample file from the Tutorial Downloads section, to the left: TicTacToe-Part1-A.capx


Dan2153 2,264 rep

Good game! Thank you!

Tuesday, August 07, 2012 at 3:35:04 PM
Joannesalfa 28.4k rep

Hey, can you reupload the zip? the links are broken :( Thanks!

Wednesday, October 24, 2012 at 9:18:47 AM
blackhornet 159.7k rep

I just tried every link on both parts of the tutorial - they all worked.

Thursday, October 25, 2012 at 4:46:03 AM
piatoraya 2,131 rep

actually, this is very helpful. But can you please add more image to every step? you know, some of visitor are completely new to construct 2, like me. First time I read this, II only got to step 2, import sprite :(

Friday, December 07, 2012 at 10:42:19 AM
Kvist 2,609 rep

Hello, this tutorial seems very interesting, but I'm having trouble with the prerequisites links, I'm getting page not found. Could you reuploaded them or link to a working site?

Friday, January 11, 2013 at 5:59:01 PM
blackhornet 159.7k rep

They are linked from this thread.


They aren't mine, so I have no control over them moving, I'm afraid.

Saturday, January 12, 2013 at 2:20:23 AM
Lordshiva1948 44.3k rep

Thanks for sharing

Thursday, February 13, 2014 at 8:57:21 AM
alto65 425 rep

I do not understand this step,
"We need the next step of loading the animations by importing the frames from the animation window. Delete the first frame, as it is now a duplicate, and delete the last two frames. We keep the gray and the white images. Name this spite: Tile."
What animations?

Wednesday, May 07, 2014 at 9:30:03 PM
AbelaNET 14.9k rep

Thanks for sharing

Friday, March 25, 2016 at 9:34:02 PM
abdalghani 14.3k rep

How can i make it for one player ?

Saturday, May 28, 2016 at 12:51:48 PM
venoxis 1,086 rep

how do you do that without the pluggin since they can't be downloaded anymore?

i can't get the game to check for winner

Saturday, March 25, 2017 at 9:28:52 PM
venoxis 1,086 rep

got trouble to have the game bigger and centered on screen also, game doesn't detect diagonal and vertical win only horizontal

Sunday, March 26, 2017 at 11:36:03 PM
venoxis 1,086 rep

it fail to detect a win if its like this -> /

but it seem to work for the other win condition.

Sunday, March 26, 2017 at 11:54:38 PM
blackhornet 159.7k rep

Links to rexrainbow's plugins updated (they should be a bit more permanent now, since they are on github).

Wednesday, September 20, 2017 at 4:47:28 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.