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:
"{""c2array"":true,""size"":[3,8,2],""data"":[
[[0,0],[0,1],[0,2],[0,0],[1,0],[2,0],[0,0],[2,0]],
[
[1,0],[1,1],[1,2],[0,1],[1,1],[2,1],[1,1],[1,1]],
[
[2,0],[2,1],[2,2],[0,2],[1,2],[2,2],[2,2],[0,2]]]}"
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