Part 1 - Creating a two player tic-tac-toe game.
I’m going to outline the steps & logic here, rather than itemize every single step of the process. There is a lot of indexing into arrays, so I’ll try my best to explain this.
Finished Game
Part 2 will add the AI to play against the computer.
Prerequisites
rexrainbow's Board - Board
rexrainbow's SquareTx - SquareTx
Files
4frame-32x32.gif, background-blue.png, GameOver1.wav, OooScary1.wav, WinnerMarks.gif
Basic Game Play
I’ve placed 4 frames in the first file, but we will selectively choose the appropriate frames per sprite. It was convenient to build them all together. The background I got from a vector site that often offers free vector files (www.vectorstock.com). The marks file I created myself, again compiling all of the various "lines" that mark a win as frames.
Before we begin, a bit of background on the logic. Tic-tac-toe is a 3x3 grid. We can specify this grid as either x columns by y rows, or numbered individually. Most tic-tac-toe algorithms actually use the 1-9 numbered scheme. I’m purposely using both, to make several points. Construct2 indexes arrays via (X,Y,Z). Translating the coordinate systems, we get (using only (X,Y)):
1 is (0,0)
2 is (1,0)
3 is (2,0)
4 is (0,1)
5 is (1,1)
6 is (2,1)
7 is (0,2)
8 is (1,2)
9 is (2,2)
Tic-tac-toe wins can easily be identified with the following sets (again using the 1-9 scheme):
{1,2,3}, {4,5,6}, {7,8,9}, {1,4,7}, {2,5,8}, {3,6,9}, {1,5,9}, {3,5,7}. Eight combinations win.
Each of these identify the three squares needed to win, by a single player, horizontally, vertically, or diagonally. Knowing this, it isn’t hard to detect a winner - you just fill in a CurrentPlay array/grid as each player picks a square, and then check the CurrentPlay grid for each of these combinations, and if one is detected, the game ends, and a winner declared.
Let's start
Create a new project. Name it.
Create 3 more layers. Name them: Background (0), Board (1), Mark (2), DEBUG (3).
Select the Background layer.
Insert a Tiled Background from background-blue.png. Set the Position to: 0,0. Set the size to: 640,480.
Insert a Sprite from file 4frame-32x32.gif. 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.
Insert a second Sprite and load the animations the same as above. Delete everything but the X frame. Name it ChessX. Insert a third Sprite for O.
Insert another sprite, choosing WinnerMarks.gif, and import all of the frames as before. Name: WinnerMarks.
Insert the Board object and the SquareTx object.
Select Board from the Object Types folder in the Projects panel. Set Width=3, Height=3. We need an instance variable, so add: CurrentTurnIsX, Type=Boolean, Initial value=true.
Select SquareTx and set Width = 36, Height=36
Insert: Button – Name: RestartButton, Position: 285, 412, Text: Restart
Insert: Text, Name=WinnerText, Position=220,62, Size: 200,52. Font: Arial, Regular, 20, Color: Choose Other, then Custom, then for Red,Green,Blue: type 255,0,0, and set Horizontal alignment: Center. Set Text: <winnertext>
Insert: Data & Storage: Array, Insert. Rename it to Winners. (Don’t worry about the dimensions. We load this in from a JSON string).
Insert: Data & Storage: Array, Insert. Rename it to CurrentPlay. Width=3, Height=3 (leave Depth=1).
Insert new object: Input: Mouse.
I’ve also got a LogText object, used for debugging the game. This can always be made invisible when you are ready to release the game. Just place it on the right and size as you like. We use this to show the values in the CurrentPlay array to watch the data change. Set Text: <log>.
At this point we have all of our elements. Let’s shift them to the correct layers now by changing the Layer property of each object.
Click on each item in the Objects panel and set it’s Layer property, bottom to top. WinnerText: Mark, WinnerMarks: Mark. TiledBackground: Background, Tile: Board, (skip SquareTx, it isn’t on a layer), RestartButton on Mark, LogText: DEBUG, (skip CurrentPlay), ChessX and ChessO: Board, (and skip Board).
If you press Run at this point you just see a pretty background and a Restart button (and the two text fields). We’re getting to the board layout.