Tic Tac Toe on MicroBit Using Tinkercad Circuits

What’s better than playing a classic game on a pocket dev board with a method to display output using LEDs. So in this Instructables I tried to make a Tic Tac Toe game to play with your friends whenever you want.

All you need is a BBC Micro Bit and access to a reliable internet Connection and access to https://www.tinkercad.com/circuits

To follow with the tutorial we can go to the following link to have a look at the Tinkercad project.

https://www.tinkercad.com/things/jbi6XJvTViM

BBC Micro Bit (both v1.5 and v2 works)

3D Printer (optional)

As Micro Bit consist of 25 LEDs in 5X5 matrix we need to utilize the grid of 3X3 from corners and the middle cell leaving the # grid pattern in the center.

As the LEDs of the Micro Bit are only red in color so to differentiate between different players and current position we can have different brightness levels or can have blinking LEDs of different speed.

I tried the former method but the brightness level doesn’t seem that intriguing so I switched to the blinking method. So now the first player will have its position defined by a slow blinking led and the second player position is defined by solid red led and the current position is defined by a fast blinking led as you can see in the video.

And to choose the position we are going to utilize the built in accelerometer sensor so by tilting towards the position you want to choose and pressing button A you can lock the position.

As any one of the players wins or the game ties you can reset the game by Pressing A and B together or by resetting the whole micro bit by reset button at the back of the Micro Bit.

In the upcoming steps we are going to understand the code for the Tic Tac Toe. If you wish to try the game first or skip the code part you can go directly to step number 8 to see how to program the micro bit.

Before starting with the code let me tell you about some of the important variables used:

• State : This is going to store the state of all the 9 positions and it is initialized with the value 333333333 where each 3 represents that the position is empty and as the game goes, players lock their positions so the state variable will store either 1 or 2 at the respective position.
• PlayerFlag : It is used to determine the current player, it gets updated between 1 or 2 as the game goes and the winner gets the chance to start the next game. If a game ends with a tie then the opponent player gets a chance to start the next match.
• WinnerFlag : It is used to determine whether the game is still going on and it determines it by updating itself with 2 as soon as one of the players wins or when the game is a tie it changes to 3.
• currentPos : It is used to choose the desired position to lock and it gets updated based on the tilt angles of the Micro Bit. it can be from 0 to 8 as shown in the figure.
• currentBlinkFlag / BlinkFlag : The blink flags are used to create a slow or fast blinking pattern to allow differentiate between the players or the current position which is going to be chosen
• Count : it is used to determine the total number of places blocked by the players and it is mainly utilized to determine the tie game.
• B0 - B8 : These will extract the 9 positions from the state variable to determine the winning pattern when any of the player plays his/her move.
• accX / accY : These are storing the data from accelerometer in x axis and y axis to determine the current desired position of the player in 3X3 Grid.

Note: The Block code is utilizing multiple Forever blocks which helps in execution of multiple blocks of code simultaneously and the programmer gets the liberty to arrange a dedicated section of code together.

This block is used to initialize the variables with appropriate values and also create the first grid pattern and rather than utilizing the show pattern block i have used plot(x,y) led because it lets to control the brightness and it was necessary to have a contrast between the players position and the grid but if you are going to use the cover for the Micro Bit as discussed in the step ahead ( Step Number 9 ) then that's not necessary.

This block reads the state by taking the modulus of the state with valLoop which gets updated in next iteration of loop and the position is determined with ct1 value so if the first position of the state number is 2 then the first led will be solid red to show 2nd player has marked the position similarly if any position is 1 then that position in the grid will be blinking to show that the position is marked by player 1.

These blocks are used to determine the tilt angle of the Micro Bit and maps it to the position in the Game by updating the currentPos variable which then is used for quickly blink the led, first it just checks whether the position is already blocked or not, if not it blinks that led there quickly to differentiate from the the player one’s comparatively slow blinking led.

Also when the game is over either by winning this block will show the string of winning or tie.

Note : The given code the simulation in the make code will be different from the tinker cad as the acceleration value in Makecode and Tinkercad are different in y axis so the simulation in Tinkercad may show the micro bit opposite leds when tilted in y axis but in Makecode it will work fine so does in real life after programming.

This block of code runs as soon as the player press the button A and it first checks whether the chosen position is already blocked or not if not blocked then it blocks it with the current player and update the state variable and later it checks for the winner by first separating values at all the nine positions and find the winning pattern if any one is winning or it is a tie it will update the winner flag otherwise it change the playerFlag so the next turn is of the other player.

When the game either gets tie or anyone wins you can press buttons A and B together to reset the game and this blocks does that by simply overwriting the variables with fresh values and clearing the screen and redrawing the grid on the screen.

Now as our code is finished we can go forward to program our Micro Bit which is pretty easy, it's merely a copy/paste of the hex file that is provided below to the folder which appears when you connect your MicroBit to the PC.
If you want to do it by yourself then you first need to download the code from the Tinkercad circuits. You will find the button in the block code section as seen in the image above. Then open that file in any text editor like notepad and copy all the code from there and paste on the make code editor https://makecode.microbit.org/#editor and make sure the JavaScript tab is selected. Now you can just directly download the Hex code needed for programming the Micro bit or you can simulate here also. Your will find the download button at the bottom of the make code page as a save button. Now upload that file to your Micro Bit by just copy and pasting it to the drive which opens when you connect your Micro Bit to the PC.

The led # grid pattern is fine for the game play but for better looks and to better differentiate between the nine positions we can use a 3D printed snap fit cover for our Micro Bit. It is just a 10 minute print and easily snaps onto Micro Bit. I have attached the .stl file.

The cover is correctly fitted only when all the 9 leds are visible from the holes, if cover is fitted in wrong orientation all the 9 leds won't be visible directly.

With all the steps completed just plug the micro bit to any usb cable or 3V battery pack and enjoy the classic Tic Tac Toe Game on a modern development board.

If you have any queries regarding any part of the project please comment below, so I can try to resolve it.