Bluetooth Tic-Tac-Toe Game in MIT App Inventor

This time I share with you a STEM activity we did at classroom this year (Grade 9-10).

I think it is very interesting because the kids learnt the basics concepts of programming with MIT App Inventor and how to develop ANDROID Apps creating a game.

The challenge: create a TIC-TAC-TOE ANDROID App where each player plays on its own mobile phone using Bluetooth.

For STEM (science, technology, engineering and mathematics) education, gamification is uniquely suited to create an environment that transforms the traditional classroom setting into a space that encourages interaction and exploration.

MIT App Inventor is an intuitive, visual programming environment that allows everyone even children to build fully functional Apps for mobile phones. The blocks-based tool facilitates the creation of complex Apps in significantly less time than traditional programming environments.

The final result of this project, you can dowload from here, is the best App built by the kids. You can download the "aia" file of the App you can import from the MIT App Inventor editor.

I am very satisfied with the result.

• Two ANDROID mobile phones
• A MIT App Inventor free account

The basics of the App are the following:

• One mobile phone or player is the red one and the other the blue one
• The red player always is the Blutooth server and waits for a client
• The blue player always is the Blutooth client and try to connect to the server
• Once both mobile phones are connected, both interchanges messages each time one player touches the 3x3 game matrix or another buttons in the App while they play Tic_Tac_Toe

The image shows the deigner editor for the App, where we can observe:

• Phone size
• Several horizontal arrangements where to place other components in a horizontal way
• Several visibles labels used to show information as the number of games won
• Several hidden labels used to show other information
• Nine buttons labeled as: B11, B12, B13, B21, B22, ... (game matrix)
• Two check boxes: red and blue player
• A BlueTooth server component and a timer to check if a message has been received
• A BlueTooth client component and its timer
• A notifier component

As you can see in the second image, the App has many blocks, so in the following steps I will try to explain them separatly

The fisrt action one player have to do is to choose who will be the red player and the blue one.

In the image you can see what happens when the player selects one option.

Basically:

• Initialize several variables
• Enable the timer to listen incoming messages
• Check the Bluetooth status: activated or not

One of the key of this activity is how to synchronize the same App running in different mobile phones.

In the image you can see how it works.

Basically:

• the App declare two differents global boolean variables: "serverturn" and "clientturn"
• Only when "serverturn"/"clientturn" are true, the player can touch a button in the game matrix
• Each time the server/client App receives a byte from the other client/server, the App updates the status of these variables to true (first image)
• Each time the server/client App touch a button in the game matrix, the App updates the status of these variables to false (second image, where you can see what happens when the player touch the button labeled B11)

"Action" (ByteReceive) procedure

This procedure is called whenever a byte is received either the client or the server.

The App uses integer messages (one byte): 11 (the player has pushed the button labeled B11), 12 (the player has pushed the button labeled as B12) and so on. One special message is the number 99 (Reset the game).

"Winner" procedure

This procedure is called to check if one of the player has won a match.

You can dowload the "aia" file of this App from here

From your computer you can import the "aia" file from the MIT App Inventor editor and push build App to create a "apk" file ready to install on your ANDROID mobile phone.

This year we will continue with this App and we will try to include "the Computer " as a player, without intelligence at the begginnig and using AI techniques (some kind of reinforcement learning or something similar) at the end.