Tic-Tac-Toe - Part 1

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

Winner Logic

Now we need to add our Winner logic. First add the Audio component and two of the freeby sounds: GameOver1.wav and OooScary1.wav.

Select the Left-Click-On-Tile event (#6), Add new Sub-event. We need to cycle through each of the elements in the Winners array. We actually get the length/height of the array from the array itself, and subtract one since our array starts counting at zero, not one.

Before we continue, we need three local variables, to make our logic a bit easier to deal with.
Right-click our new event and Add local variables for: CurrentA, CurrentB, CurrentC
Now we dig into our arrays, cross indexing Winners to CurrentPlay. All we are doing is getting those three indexes into the set that defines the three squares that define a winner. Remember, there are 8 sets of 3.

CurrentPlay.At(Winners.At(0,loopindex("y"),0), Winners.At(0,loopindex("y"),1))
CurrentPlay.At(Winners.At(1,loopindex("y"),0), Winners.At(1,loopindex("y"),1))
CurrentPlay.At(Winners.At(2,loopindex("y"),0), Winners.At(2,loopindex("y"),1))

I’ll explain this:
We get the loopindex, which is 0 to 7, this is our Y index. We’re hard coding the X index to 0, 1, 2. So starting at y=0, we’re just getting:
Winners(0,0,0) which equals 0, & Winners(0,0,1) which equals 0.
These are now our indices into the CurrentPlay Array, that is CurrentPlay(0,0), which is either 0, for no player, 1 for X, 2 for O.
In other words, we are just extracting the three values specified by the Winners array so we can compare them to see if they are all the same (and not blank), which is what we’ll do next.
Add a new sub-event and add the System condition: Compare two values. Compare CurrentA to CurrentB. Add extra conditions to do the same for B & C, and make sure any of those are not zero (blank).

If all those conditions are met, then we have a winner!
Mark the game as done. Set the index of the WinnersMark animation frame to loopindex("y"). Make WinnersMarks visible. Play the GameOver1 sound.

If you run right now, you will see a win is marked, and the game stops working, until you press the Restart button.
Add a new sub-event to see if the winner is X, Else, winner is O.
We just have one more case to deal with – when nobody wins.

Add a new event after (12), check that we aren’t flagged as done yet. Loop through our CurrentPlay array to see if all elements are not blank. We use Add to a local variable to count the non-blank squares. If we count 9 non-zero elements then we’ve got a ‘cats-game’ and nobody wins. Turn on the ‘C’ animation frame, making it visible, and set GameDone=1. Play the GameOver1 and OoScary1 sounds. Set our state text to "No winner".

Download the sample file from the Tutorial Downloads section, to the left: TicTacToe-Part1-B.capx
We now have a complete two player game. Part 2 of the tutorial will add a JavaScript AI to play against.

Check out Part 2

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!


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 134.0k 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 134.0k 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 40.7k 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.8k rep

Thanks for sharing

Friday, March 25, 2016 at 9:34:02 PM
abdalghani 8,546 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 134.0k 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.