2017년 7월 26일 수요일

Canvas, List: Tic-Tac-Toe using multiple canvases


This game could have been more easily done using labels in a grid screen arrangement, but I wanted to be able to turn the letters in the splash screen at different angles in a simple animation (can't do that with labels). So this is the result. I learned some things along the way. I am hoping that some of you developers out there will be able to use some of this for your own AI projects.

I would say that the most interesting thing about this project is how to model the game in an AI app. After each play (an X or O) the app must check the rules to see if the player won the game.

I set up a list of component id's for each canvas in the 9-canvas grid. These component id's are used to access each canvas's DrawTextAtAngle tool, Clear, FontSize, PaintColor Width, Height and BackGroundColor. (The For each loop is a good block to read or set these values.)

The canvas components appear in the Components list in positions 1-9, 1-3 being the top row, 4-6 the middle row and 7-9 the bottom row.
In addition, I needed to know what letter was on what canvas in order to determine where an open spot was for a play and to check if a player had won or if the game was a tie,
so I created the Letters list to hold the current letter (X or O) in each canvas, or empty text if it was open.

I created a Combinations nested list which contains the 8 triplet combinations that indicate a win. It would look like ((1 2 3) (4 5 6) (7 8 9) (1 4 7) (2 5 8) (3 6 9) (1 5 9) (3 5 7)).
I then looped through the 8 possible combinations to see if the current player's letter was in all 3 of the canvases. the blocks for doing this are shown below.

The Intro Screen below loops through each of the 9 canvases putting random paintcolor and backgroundcolor and turning the intro text randomly between +/- 10 degrees.


Single player (playing against the computer):
Selecting the Two players option (the Mute Sound mutes the 'Host's' voice and sound effects):
Sarah won this game...
List of canvas components (count 'em --9)
Combinations (nested) list contains the 8 triplets that indicate a win. Note that these number indicate the position of the canvas component in the Components list.
The next group of blocks will do the lookups in the Letters list to see if the player won...

These blocks loop through the 8 possible win combinations....
All I can say is this was a LOT of work for such a simple game, but it was worth it :)
Project is attached...

--

댓글 없음:

댓글 쓰기