Build Tic-Tac-Toe with App Inventor
Uploaded by
ScribdTranslationsBuild Tic-Tac-Toe with App Inventor
Uploaded by
ScribdTranslationsComputational thinking App Inventor
The program we will conduct in this session will be the game of 'TIC-TAC-TOE'.
Once again, enter to[Link]
and start a new project. Name it CAT.
DESIGN.
Insert a tabular arrangement from the Palette and Layout:
Since it is a cat game, the layout needs to be modified to 3 columns and 3.
records:
Add a button to each of the tabular provisions, so that they are
the 9 possible positions in the game:
In order to prepare the game, clear the text from each of the buttons:
Now in Screen, center the created tabular layout both horizontally and
vertically:
Add a button that you will change the NAME and the TEXT to call it RESET.
From Sensors add a Clock and from User Interface, a Notifier.
NOTE: These last two added components will be seen at the bottom of the screen:
EVENTS SCHEDULING
Add two variables. Assign the name of the first one as TURN, which will be useful for us.
so that each player takes their turn and, to the second variable, assign it the
nameSQUARE that will represent each of the 9 added buttons.
Initialize the variable TURN to 1 and the variable SQUARE to an empty list.
DesdeScreen1agregaCuando [Link].
From the variable CASILLAcarga load the option to set [Link] and
build a list of the options for the 9 boxes of our game:
From TabularDisposition1, add to the list the 9 corresponding buttons:
Change the width of each button using:
FromControl option
for each element in the list. execute
combining it from an option that is at the bottom
Any component -> Any button
the option
put [Link] the [Link]
From the variableSQUARE, insert
take Global CASILLLAy divide by 3 the width of the screen so that the
buttons remain homogeneous.
Duplicate this block to determine the width of the boxes.
NOTE: what you just did is a very efficient way to modify the
properties of various elements at the same time.
Utilizaremos el mismo truco anterior para modificar elTamaño de letrade todas las
goalkeeper.
This will be divided by 5 instead of 3.
In the same way, it will be necessary to activate (Enabled) all the elements.
We will create a RESET procedure by repeating some of the elements of the
screen initialized and we will enable the RESET button sequence that we added
to the home screen:
Next, we will program the click logic for each of the buttons, that
será nuestro juego. Para ello es necesario cambiar la condición de cada botón
activated (Enabled = false) so that it can no longer be chosen. As we are
We who play will assign aXa to our game. We remove from the
List that button to play and we switch the turn to player 2, that is, the computer.
Finally, we will add the "key" procedure that temporarily only
it will be indicated and will contain all the logic of the game:
We will replicate this same code in the remaining buttons, just be careful with
assign the corresponding button in each case:
Now it is necessary to build the module CHECK.
The first thing to do is to validate if the shift is already assigned to the
computer.
Remember that we determined that SHIFT 1 is us and SHIFT 2 is the
computer.
The gameplay process is:
1) Randomly choose one of the remaining buttons, since we made the first one.
throw
2) In the selected box, write the letter 'O' which will represent the circle of the game.
Disable the option for later choice
4) Remove from the list the button that the computer selected
Here I stayed
Finally, we need to add the condition of what would happen when there is no longer
boxes to choose from. If this is not added, the program would generate an error.
Up to this point, if you test with what is already programmed, you will see that it works.
correctly, the next step is to build the logic that allows playing tic-tac-toe
correctly and determine the winner.
The first thing we will do is modify the IF-THEN condition taking advantage of
the mutation options that App Inventor has and rearranging the modules that already exist
we had built towards the bottom so that the modules we add
execute first.
Now we will be sweeping through the possible combinations to win in the game.
The first combination is that of horizontal, upper line:
The blocks to be built must: obtain the text from the 3 buttons and
merge them into a single string and check that the joined text is equal to the text "XXX"
to determine that we have won. Use the 'mutant' feature of
block uniting to concatenate the text of the 3 buttons. Use a notifier to
Show the text that you won the game.
We will need a total of 9 checks to determine that we have won.
8 correspond to the game we are playing and one to the game of the
computer.
At the end of each of these checks and the notification that we have
cattle, it will be necessary to reset the game.
Use the 'mutant' condition of the parser to add the missing conditions:
With the above, we determined the ways to win. Now we need to add from
in the same way the 8 ways to lose, or in other words, when the computer
it wins us over. For this, we will use again the mutant option of the app and copy and
take the same block sequence as we did earlier, but now in
place of "XXX" with "OOO".
We also need to add the option for a tie:
Finally, we will change the screen design a bit by hiding the bar of
status and the title bar:
Run tests to see how it works.