Fun with States

States facilitate interactions inside ProtoShare and routinely handle pop-ups, carousels, tabbed panels and more. I recently created an interactive Tic-Tac-Toe game using a novel combination of States. Here’s a link to an exported copy of the design where you can see and play the game in action.

The design uses 10 states, 9 to manage each of the values for each of the squares in the game and 1 to manage which player’s turn it is.  Each square in the game has a blank value, an X value and O value along with corresponding  X images and O images. The game starts with X being the default player and when any of the squares is clicked, that square’s X image becomes visible. Upon click, the state that manages whose turn it is changes to O for the O player.

All of the states that manage whether a square is blank, an X or O remain on the same value until the end of the game. In order to mark the winner, there are line components that become visible only when certain States have certain values active. For example, for X to win by having a full X row across the top row, each of those squares’ active State value must be X. If that is the case, the line component and the winning message at the bottom of the game field becomes visible.


Tic Tac Toe game created with States


Have you created unique designs using States? Share an exported design in the comments below or send us an email, we’d love to see!

This entry was posted in Blog, ProtoShare Tips & Tricks. Bookmark the permalink.

Previous post:
Next post:

Leave a Reply

Your email address will not be published. Required fields are marked *