Advanced Blockly


Now that you're familiar with the basic functionality of Blockly, let's learn some more advanced techniques.


Variables allow you to save something and remember it for later. To get a feel for variables, we're going to start by making the same blink sketch that we made before, but we're going to use a variable instead of copying the code twice.

First we're going to make our variable. Click on the "+" button on the start block to create a new variable. Then, change the name of the variable to "on" and change the type of the variable from "Number" to "Boolean". Now, you can connect all of the blocks that make up the program. You can find all of the blocks in the menus on the left. Here's what it should look like when you're done:

Blink Program with VariablesBlink Program with Variables

Upload the program to your board. It should do the same thing as the old blink sketch.


Once you start making bigger programs you might notice that things become very long and there might be some big chunks of code that you have to copy into a bunch of different spots. Functions allow you to get a chunk of code, separate it out, and then use that chunk of code in other places. Functions can be useful to help organize things even in smaller programs.

Let's start by building part of a Tic-Tac-Toe game. This program is just going to print out the Tic-Tac-Toe board over serial.

First, lets make our board. Press the "+" button on the start block to add a variable and then change its type to "List Number". Press the "+" button on the list block until you have 9 items in the list (for 3 rows of 3). Now you can set some values in the list. We're going to use 0 to signify an empty spot, 1 to signify a spot with an X, and 2 to signify a spot with an O. Here's what it should look like when you're done:

List representing a Tic-Tac-Toe GridList representing a Tic-Tac-Toe Grid

Once you've done that you'll have to set up the blocks. Here's how it should look like:

Blocks to print out a Tic-Tac-Toe GridBlocks to print out a Tic-Tac-Toe Grid

Upload that to your board and check the serial monitor. You should get a printout of your Tic-Tac-Toe board each second.

Now this works, but the code is starting to get pretty big, and it's going to get messy when you start adding more features to your game, so let's use a function. Go to the functions panel and grab the function block without a return part. The block will have a "+" button and a name. Now name your function something that makes sonse to you, such as "printGrid". Note that there are some restrictions on when name you can choose.

Once you've added your function, drag all of the blocks that you added before into the function. I'm going to leave the last two blocks behind though. Go back to the functions menu and you should now see a block at the bottom with the name of your function. Place that block where your other blocks used to be. Your program should now look like this:

Tic-Tac-Toe with a FunctionTic-Tac-Toe with a Function

You can upload this program and it will work just like the last one. You might notice another spot where functions could help us: see the two identical chunks that check if the number is 0 or 1? We can move that into a function so that we don't have to copy it. This time you're going to grab the fuction block with the return part on it, since we want to get a value from the function. Give the function a name like "getGridSlot" and make sure that the return type is set to "Number". Once you have your new function, find the part that is exactly the same in both blocks (the "in list" part) and connect it to the return section of the new function.

The "i" and "j" variables that you were using before are no longer valid, because those variables are only found inside the loops, so we'll have to make new ones. Press the "+" button on your new function to add arguments. Arguments are like variables except that their value is set by whatever code uses your function. Give them names like "x" and "y", and set their types to "Number". "y" replaces "i" and "x" replaces "j".

Now go back to the function menu and grab the block for your new function and put it where the duplicated code used to be. Connect a "j" block to the "x" connection and connect a "i" block to the "y" connection. Do the same for both places where the duplicated blocks used to be. Once you're done your program should look like this:

Tic-Tac-Toe with a Function Returning a ValueTic-Tac-Toe with a Function Returning a Value


That was a lot to learn, but hopefully you managed to keep up! Have fun with your new programming skills, maybe even make this into a full Tic-Tac-Toe game!