Hello friends and welcome to Obsidian Soft.
Today, I will teach how to make a tic tac toe game in mit app inventor. Go to MIT App Inventor and start a new project. Name it TicTacToeGame.
Design the Game Interface
Make screen orientation portrait and change the title to Tic Tac Toe
Drag and drop a horizontal arrangement from layouts onto the viewer. Make height 28% and width fill parent. Drag and drop a button from the user interface inside this viewer. Make the background color: light grey. Make font bold and font size 60. Make height fill parent. Width 33%. Remove text from it.
Select button. Duplicate by pressing Ctrl + C & Ctrl + V on the keyboard for Windows or Command + C and Command + V on the keyboard for MacOS.
Duplicate button again. There should be 3 buttons in the horizontal arrangement.
Now, select the horizontal arrangement. Duplicate it. Duplicate it again.
Drag another horizontal arrangement. Make align horizontal and align vertical both center. Make width full parent and height 10%. Drag and drop a label from the user interface inside this arrangement. Name it statusLbl.Set its properties:
Text: “Turn: X”, FontSize: 20, Font: bold
Drag a button on the right of this label. Make font bold, font size 20 and background color: yellow. Rename button to resetBtn. Make width 40% and shape rounded. And change the text to Reset.
Our screen is done so let’s go to the blocks section.
Make global variables for the current player with the initial value “X”, a status boolean variable whether the game is active. It will become inactive after a win or a draw. We will also make a list of game buttons that will contain all the buttons that are part of our 3×3 game grid. We also need a list for storing our winning combinations.
Get the screen1. Initialize event. We need to load our lists. Winning combos are lists too: [1, 2, 3], [4, 5, 6], [7, 8, 9], [1, 4, 7], [2, 5, 8], [3, 6, 9], [1, 5, 9], [3, 5, 7] so store them as lists in winning combos list. Last, but not least, fill up the gameButtons list with our buttons: the order of adding is super important so be careful.
As we have made our own game buttons list, we can use any component‘s any button click event to handle game logic. We don’t need to make a separate button click event for our game buttons. But we do need to check if the button clicked in any button click event is the reset button or some other button. Some other button will mean the game button. In case you add another button when you make this game such as a back button, make sure to handle it appropriately.
If the button clicked is the reset button, we need to put all our variables back to the initial state.
In the else condition is our game logic:
But before working on that, let’s make two procedures for checking for the game draw and checking for the winner.
We check for the winner by checking if our game buttons has text with the current player (X or O) at the winning combos: the 3 rows or the 3 columns or the 2 diagonals.
If yes, we will set those winning buttons background yellow. We will also set gameActive to false and update the status to the player who has won.
Next, we need a procedure to check for a draw. A game is a draw if the text on all game buttons is empty. We can check by making gameActive false in the beginning and making it true only if a single button is found that has empty text (this means that one play position is still left). We will break out of the loop if empty slot found after making gameActive true. And in the end, we will check if gameActive is not true and if isn’t, we will set status to draw (This means that not a single empty slot was found)
Now, let’s come back to the else condition in our any button click event.
We will first check if the game is active i.e. gameActive status variable is true and also, the game button that the user has clicked on is still empty and still needs to be filled:
If the button is still playable, then we will set its text to the current player which can be either X or O. Then, we will check for the winner by calling our custom procedure. If a winner is found, the gameActive status will be set to false in that procedure. So, before checking for the game draw, check that the game is still active. If the game draw condition is not met, the game will still be active so check again that the game is still active and then change the current player and set the status label appropriately.
And this is done. I hope you are getting used to any component block by now as we used it in our memory i.e. picture matching game too. It might look a little difficult in the beginning but once you get the hang of it, it will make our code much readable with less lines and it will be easier to change too.
AIA project file: https://obsidiansoft.gumroad.com/l/hapqn
I hope you liked this tutorial. Please consider supporting me:
You can have a look at the video tutorial here:
Please like my video and share it with your friends and family. Also, subscribe to my channel and press the bell icon so that you don’t miss any of the great projects that I have planned for you.
https://www.youtube.com/c/obsidiansofteducation
For links to free educational apps, have a look at the educational apps page
Please like my Facebook page and Instagram page for more educational resources and tips.
Facebook: https://www.facebook.com/ObsidianSoft/
Instagram: https://www.instagram.com/obsidiansoftapps/
Pinterest: