Tic-Tac-Toe - Part 1

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

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.

Comments

0
Dan2153 2,264 rep

Good game! Thank you!

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

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

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

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

Thursday, October 25, 2012 at 4:46:03 AM
0
piatoraya 1,981 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
1
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
2
blackhornet 115.6k rep

They are linked from this thread.

http://www.scirra.com/forum/topic51891.html

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

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

Thanks for sharing

Thursday, February 13, 2014 at 8:57:21 AM
1
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
0
AbelaNET 14.7k rep

Thanks for sharing

Friday, March 25, 2016 at 9:34:02 PM
0
abdalghani 8,348 rep

How can i make it for one player ?

Saturday, May 28, 2016 at 12:51:48 PM
0
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
0
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
0
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

Leave a comment

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