Scribd
Upload
1K views15 pages

MIT App Inventor Tic-Tac-Toe Guide

The document provides steps to create a Tic-Tac-Toe app using MIT App Inventor. It describes designing a three-by-three grid play screen with buttons, labels, and a notifier. It also explains initializing global variables to track game state, programming button presses to check for a winner and reset the game, and testing the completed app by downloading, installing, and playing the game.

Uploaded by

Srestha Chattopadhyay
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1K views15 pages

MIT App Inventor Tic-Tac-Toe Guide

The document provides steps to create a Tic-Tac-Toe app using MIT App Inventor. It describes designing a three-by-three grid play screen with buttons, labels, and a notifier. It also explains initializing global variables to track game state, programming button presses to check for a winner and reset the game, and testing the completed app by downloading, installing, and playing the game.

Uploaded by

Srestha Chattopadhyay
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

1

MIT App Inventor Tutorial:


Tic-Tac-Toe
2

Overview

Tic-tac-toe is a well-known game that is traditionally played on a piece of


paper, wherein two players fill in squares in a three-by-three grid of spaces
with either a letter “X” or a letter “O”. The goal of the game is to fill in three
spaces in a row, either diagonally or across the grid. Since the game itself
is so simple, developing an app that simulates it should not be a terribly
difficult task. In this tutorial, we will program our own tic-tac-toe app, and
possibly revive any childhood memories you may have of playing this game
with a sibling or friend.

This guide assumes that you have some background with MIT App Inventor
and that you have it set up properly on your device.
3

Step 1: Design of the Play Screen

The most important part of tic-tac-toe is the three-by-three grid of spaces


that players mark as their own in order to win the game. However, we will
also need nine buttons for the playable spaces, a button to reset the game,
a label that indicates whose turn it is, and a notifier to let us know when a
game is over.
4

Things to note about the play screen include, but are not limited to:

● The Screen itself is center-aligned, both horizontally and vertically.


● The “Play!” Label has a font size of 22.
● The height of each Horizontal Arrangement is set to 25 percent.
● Each Button on the grid has a font size of 50, their heights are set to
“Fill Parent”, and their texts are center-aligned.
● The Reset Button has a font size of 14 and is set to a width of 50
percent.
● The Notifier will be used for a pop-up that congratulates the winner of
the game; we will program this soon.

Now that we have a field to play on, so to speak, we are ready to program
the back-end of the game.
5

Step 2: Initialization of Globals

Next, we will initialize the variables that will keep track of the state of each
game. There are a total of 12. They include:

● A “winner” variable, which is set to “*” at the beginning of each game


● A “turnsPassed” variable, which starts at 0
● A “turn” variable, which starts with “X” to keep it simple
● Nine total buttons that are all initialized to 0

In the blocks editor, the global initialization blocks will look something like
this:

It is strongly recommended that you keep all of your global variable


declarations in one place, for the sake of your own time and sanity.
6

Step 3: The New Game Routine

We need a function to start new games. Otherwise, we will have to re-write


the same “new game” code for every possible win condition. It is much
easier to just write a newGame procedure and call that procedure every
time someone wins the game. We will also call this function when the
screen is first initialized, and when someone hits the reset button.

The newGame procedure resets the turns passed counter, sets the current
turn to “X”, resets the winner variable, puts the nine playable buttons in a
list, and sets all their text to an empty string. An image is included below.
7

Step 4: Equality Check for 3 Button Texts

The next procedure that we should write is called isWinning in the image
below. This procedure just checks three text variables for equality, and sets
the winner to the text found in the case that they are all the same. In the
next step, we will call this procedure for every possible combination of
buttons that could win the game at the end of a turn. Giving the equality
check its own function vastly simplifies the next one.
8

Step 5: Checking for a Winner

To check for a winner, we will need to call the equality check hasWon
procedure on 8 total combinations of buttons. You can win tic-tac-toe
vertically, horizontally, or diagonally, and we will need to check every
possible win condition each time this procedure is called. Otherwise, we
run the risk of denying victory to the winner of each game.

This is, by far, the longest procedure we have to write because of the many
ways you can win the game.
9

Step 6: Programming the Playable Buttons

We are missing a procedure that handles the pressing of the playable


buttons. Each time a button is pressed, we want to ensure that it hasn’t
already been played, call the win-check procedure, announce a winner if
the game has been won, and reset the game after the victory ceremonies
are complete.
10

The procedure itself needs to be called any time someone presses one of
the nine playable buttons. Sadly, there is no way to program a handler for
all nine buttons in a single block of code, so we have to just write nine
blocks of code- one for each button.

Once the grid of button handlers is programmed, congratulations! You are


ready to test your tic-tac-toe app!

Known Issues/Suggestions

● The game does not announce whose turn it is at the start of the
game, even though it should always be X’s turn at the start.
● We can probably afford to set X’s text color to red and O’s text color
to blue, but whether that is necessary is a subject matter.
11

Step 7: Testing

Now in testing part we are going to test the application by following the below
steps.

You need to click on the option “Build” at the top of MIT App Inventor. Then,
you get the above options and click on the Android App (.apk) to download
the apk file.

Once you click on the Android App (.apk), you will get the above popup,
which shows the compiling percentage

Click on the “[Link] now” to download the apk file.


12

Click on the “Files”, then you will get different folders and given right click on
the downloads folder.

Once you click on the “Open in Terminal”, terminal will be opened as below

Give the below command in the terminal to run the apk file
$ adb install [Link]
13

Give the command and click on ENTER

Once the app is installed click on the “Anbox Application Manager” to start
the application installed.

App installed is shown as above, you just need to DoubleClick on the


application, so that Screen is opened as below
14

Click on the buttons and start playing it!!!!


15

Click on the reset button, if you want to play a new game!

Common questions

Powered by AI

Initializing global variables simplifies game development by providing a centralized, consistent state management framework. It allows for efficient tracking of the game's progress and state, as well as resetting values for new games. By initializing a 'winner' variable, a 'turnsPassed' counter, a 'turn' indicator, and button states to default values at the game's start, the app can reset all elements quickly using a single 'newGame' procedure, rather than rewriting code for each reset scenario . This organization reduces redundancy, ensures consistency across game sessions, and improves code maintainability.

Structuring the app's code around specific procedures like 'newGame' and 'isWinning' exemplifies best practices in software development by promoting modularity, reusability, and maintainability . Procedures encapsulate distinct functionalities, allowing each to be developed, tested, and debugged independently, reducing complexity and interdependencies. This organization adheres to the DRY (Don't Repeat Yourself) principle, where code is written once and reused across different scenarios, such as resetting games or checking win conditions . Such practices lead to cleaner, more comprehensible codebases, facilitating easier updates and scalability within the application.

Suggested improvements include announcing turns at the start and applying distinguishing colors for the 'X' and 'O' symbols, such as red and blue respectively . Announcing turns could prevent initial confusion, setting clear expectations right from game initiation, thus promoting smoother gameplay. Color differentiation would visually distinguish opposing players' moves, making the interface more intuitive and aesthetically appealing. These enhancements could elevate user engagement, making the game visually dynamic and easier to follow, thereby enriching overall user experience.

The implementation of an equality check in the game's win-check procedure is crucial as it determines the core victory condition for tic-tac-toe. The 'isWinning' function cross-references the text of three specified button combinations to verify if they are the same, identifying when a player has successfully aligned three identical marks . By abstracting this logic into a dedicated function, the process is simplified and the validation of win conditions across possible configurations is efficiently managed. This ensures accuracy in determining victories, prevents oversight, and enhances the game's reliability by consistently applying the rules for winning across all gaming scenarios.

The reset function in the tic-tac-toe app significantly impacts gameplay by ensuring a seamless transition between games. By invoking the 'newGame' procedure, the turns counter, current turn indicator, and board states are promptly reset to their initial values, eliminating manual state adjustments after each game . This functionality enhances user interaction by facilitating easy new game sessions, maintaining player engagement, and reducing downtime between games. The consistent and automatic reset of the game state maintains the app's reliability and ensures an optimal user experience by avoiding potential errors or confusion from lingering game states from previous sessions.

The tic-tac-toe play screen's design focuses on usability and clarity, which enhances the user experience. The grid is central to the game and is designed with nine buttons that occupy the play area, making interaction straightforward . The screen itself is centered, both horizontally and vertically, which provides balance and ease of access to all controls . The font sizes and text alignments for labels and buttons are specified to ensure that the information is legible and visually appealing, such as the Play! label's font size of 22 and the buttons' font size of 50 . Additionally, the simple layout with a Reset button, a label for indicating turns, and notification features for game completion, ensures users can easily understand game status without distractions .

The transition from paper-based to an MIT App Inventor version introduces several user interface differences. In the digital version, interactive buttons replace hand-drawn grids, allowing users to click instead of write, which speeds up interactions and minimizies errors . Automated notifications and turn indicators are featured digitally, reducing confusion about whose turn it is and announcing game results instantaneously . The digital format introduces uniformity in grid appearance, consistently aligning and spacing elements, unlike varied hand-drawn grids. These changes streamline and regulate the flow of gameplay, making the digital experience more interactive and error-resistant than its paper predecessor.

The iterative testing process is essential for identifying and resolving issues in the tic-tac-toe application, thus strengthening its development. Through stages of building the app and downloading the Android APK for testing, developers validate the user interface, functionality, and game logic . Testing exposes flaws in the game mechanics, such as button responsiveness and win condition checks, allowing for adjustments before release. Continuous testing ensures that each component functions within real-world usage constraints, and iterative improvements refine performance, usability, and reliability, collectively contributing to a polished final product.

Programming individual handlers for the nine buttons presents challenges such as code redundancy, increased potential for errors, and maintenance overhead, since each button requires similar but separately defined logic . These challenges can be mitigated by employing abstraction techniques, like creating a general handler function that is invoked with button-specific parameters, thus reducing code duplication. Using loops to assign functions to buttons dynamically can streamline the process, although MIT App Inventor's environment might limit certain advanced programming practices. Clear documentation and consistent naming conventions would also help in managing and debugging the handlers effectively.

User notification plays a critical role in maintaining clarity and enhancing user experience by promptly communicating game outcomes and state changes . Notifications are used to congratulate winners, inform turn changes, and signal game resets, enhancing transparency in game progress and aiding users in anticipating subsequent actions. This immediate feedback minimizes user confusion and ensures continuity of play, which is necessary in maintaining player engagement, providing closure to game sessions, and facilitating seamless transitions between games.

You might also like