Thunkable X

Maze Game App

Learn Thunkable App Development with Hands On Coding
The Goal

At the end of the course:

1. You will have created your own version of a maze app.

2. You will have a basic understanding of important coding
principles like object orientation, reusability, and arrays.
3. You will have a better understanding of how to use the
Thunkable app development tool.
We will begin with a We will review all we have
We will develop the
demo of the app, so learned and discuss
app step by step start
you know what you potential enhancements
to finish.
will be creating. to the app.

Preview Setup Develop Test Review

We will create our

We will frequently test
Thunkable accounts,
changes made to the
download the testing app,
app to quickly resolve
and create the app images.
any errors.
 We will begin with a demo of
the app, so you know what
Preview you will be creating.
 App Demo

Watch the demo on YouTube:

https://youtu.be/NVerUaCROoc
Start Maze Success
 The Concept of Our Maze 1 2 3
To the right you will see an example of the
maze. It is quite simple IF you can see the
whole thing. 1
In the app, you can only see the current “cell”
you are in and which direction you can go.

Each cell is defined by its position and which

“walls” exist. 2
For example we start in column 2 : row 3. The
East, South, and West walls exist and we can
go North. So when playing, you only have the
option to go forward. 3
 We will create our Thunkable
accounts, download the
Setup testing app, and create the
app images.
 Create Thunkable Account
All Thunkable accounts are tied to a Google
account. You can sign in with yours here:

https://x.thunkable.com/login

Note: We are using Thunkable Cross-platform

so that the course will work for both Android
and Apple devices.

If you do not already have a Google account,

you can create one for free here.
 Download Thunkable Live
When using the cross-platform version of
Thunkable, you can use the Thunkable Live
app which is available on both the Apple App
Store and Google Play Store.

Download and Sign In to Thunkable Live

using the account you just created.

For more information check out the

Thunkable Docs here.
 Maze App Images
There are only 4 images used in the app. I
created the 4 images from 3 Minecraft
textures I found by searching through the
Google Images.

I actually just pieced my images together in

Google Slides and took screenshots, but you
could edit your pictures anywhere you would
like. Some favorites of mine: MS Paint or
Canva.com

If you would like to use the images I created

for your app as well, you can download them
here.
Develop: Start Screen

We will develop the app step

by step start to finish.
 Create a New Project
To begin, log into your Thunkable account
and create a brand new project.

I’m calling mine “AmbleMind Maze App”.

Screen 1: Start

Design Blocks

For this screen, we simply want to We will only add one block of code that
welcome the user to the app and invite will go to the Maze screen when the “Let’s
them to start the maze. Begin” button is pressed.

We will add a background image, a

welcome message, and “Let’s Begin”
button.
 Setup Start Screen

1. Rename the screen to “Start”.

2. Set the background picture to

“Grass.png”.
 Add Column with Label and Button

1. Add a Column called “Start Column”.

2. Set the Justification of Start Column to

“space-around”. This will force
everything within the column to be
evenly spaced throughout.

3. Add a Label called “Welcome Label”

within Start Column.

4. Add a Button called “Let’s Begin Button”

within Start Column.
 Style the Label

1. Set the Text to “Can you escape a maze

you cannot see?”.

2. Set FontSize to “45”.

3. Set the Color to white.

4. Set the Height to “Fill contents”.

5. Under the Advanced tab and in the Text

Style section, set TextAlign to “center”.
 Style the Button

1. Set the Text to “Let’s Begin”.

2. Set the TextColor to white.

3. Set the Background Color to orange.

4. Set the FontSize to “30”.

5. Set the cornerRadius to “20”.

6. Set Raised to “true”.

 Add Block to Go to Maze Screen

1. Create a new Screen called “Maze”.

2. In the Start screen’s Block page, grab

the “navigate to” block from the Control
section.

3. Grab the “when Let’s Begin Button is

clicked” block from the Let’s Begin
Button section.

4. Put the 2 blocks together and set

navigate to “Maze”.
Test: Start Screen

We will frequently test

changes made to the app to
quickly resolve any errors.
 Test the Start Screen
This one is fairly straightforward. Go to your
Thunkable Live app and navigate to the Maze
App project.

When you press the “Let’s Begin” button, the

app should bring you to the Maze screen
(which should be blank at this point in the
tutorial).

NOTE: To return to the Thunkable Live menu,

shake your phone!
Develop: Maze Screen

We will develop the app step

by step start to finish.
Screen 2: Maze

Design Blocks

We will divide this screen into 3 sections: No blocks are needed for dividing up the
Header, Maze, and Footer. Maze screen, but MANY blocks will be
needed to manipulate the components
We will use the “Row” component to divide
within each screen.
the sections, and we will develop each of
the sections one at a time.

The Maze section will be the most

complex, so get ready!
 Divide Maze Screen into Sections

1. Set the BackgroundPicture of the Maze

Screen to “Grass.png”.

2. Add 3 Row components to the Maze

screen. Rename the rows to reflect the
sections:

a. Section - Header

b. Section - Maze

c. Section - Footer

Note: No 2 components can have the same

name.
Develop: Maze Screen - Header

We will develop the app step

by step start to finish.
Screen 2: Maze Section - Header
Design
We will add 2 components to this section:
1. A button to return to the Home screen.
2. A label to display the grid position
where we are in the maze. This will be
useful for testing in the future.
We will position these 2 components in the
top right and left corners.
Blocks
For the “Home” button, we will add blocks
that say:
● ‘When Home button is pressed,
navigate to the Start Screen.’
For the “Position” label, we will add blocks
that say:
● ‘When I change positions, get my
current position, and update the
position label.’
 Add a Button to Return Home

1. In the ‘Section - Header’ row, add a

button and name it “Home Button”.

2. Set Text = “Home”

3. Set TextColor = white

4. Set BackgroundColor = transparent

5. Set FontSize = “20”

6. In the Maze screen’s Block page, grab

the “navigate to” block from the Control
section.

7. Grab the “when Home Button is clicked”

block from the Home Button section.

8. Put the 2 blocks together and set

navigate to “Start”.
Add a Label to Display Current Position

1. In the ‘Section - Header’ row, add a label

and name it “Position Label”.

2. Set Text = “Position”

3. Set FontSize = “20”

4. Set TextColor = white

5. Set Height = “Fill contents”

 Add Blocks to Display Current Position

1. Create 2 new variables called “x” and “y”

and set both to null.

2. Referencing ‘The Concept of our Maze’,

our starting position is x:2, y:3. So when
the Maze screen opens, set:

a. x=2

b. y=3

3. Create a function called

“displayCurrentCell” that updates the
text of Position Label to the values “x, y”.

4. When the Maze screen opens, also call

displayCurrentCell.

Note: displayCurrentCell will be expanded in

the future to do more cool things.
Position the Components in the Corners

1. Navigate to the Maze design tab and

select the ‘Section - Header’.

2. Set Justification = space-between

3. Set Alignment = flex-start

Test: Maze Screen - Header

We will frequently test changes

made to the app to quickly
resolve any errors.
 Test the Maze Screen - Header
Go to your Thunkable Live app and navigate
to the Maze App project. Navigate to the
Maze screen by selecting “Let’s Begin”.

Verify that when you select “Home” you return

to the Start screen. Repeat this a few times.

Verify that when you open the Maze screen “2,

3” is displayed in the top-right corner.
Develop: Maze Screen - Maze

We will develop the app step

by step start to finish.
Screen 2: Maze Section - Maze
Design
We will create a 3 x 3 grid by adding 3
columns that each have 3 buttons stacked
vertically.
● We will set and change the
background images of the buttons to
show what paths are available.
● We will toggle the ‘Disabled’ button
property to control which directions
the player can move.
Blocks
We will define the maze using a double
array. On each move we will change the
players current position and update which
‘cell’ is displayed.
We will consider the maze completed if our
position is ever less than or equal to 0 or
greater than 3. We will rely on the maze walls
to only allow us outside of the perimeter
when the maze has been solved.
 Create the Maze Button Grid
1. Add 3 columns to the ‘Section - Maze’
row.
2. In each column add 3 buttons.
3. Use whatever naming convention makes
sense to you. Here is mine:
a. Column - Left
i. Grass - L - T
ii. btn.W
iii. Grass - L - B
b. Column - Center
i. btn.N
ii. Grass - Center
iii. btn.S
c. Column - Right
i. Grass - R - T
ii. btn.E
iii. Grass - R - B
 Configure the Maze Buttons
For each of the 9 maze buttons:

1. Text = “” <- nothing / empty string

2. Height = “Fill container”
3. Width = “Fill container”
4. Disabled = “true”

The next IMPORTANT step is to update the

‘Section - Maze’ row:

1. Height = “60%”’
 Add Default Background Images
For the 4 Corner buttons:

● BackgroundPicture = “Grass.png”

For the Center button:

● BackgroundPicture =
“Middle_Path.png”

For the North and South buttons:

● BackgroundPicture =
“Vertical_Path.png”

For the East and West buttons:

● BackgroundPicture =
“Horizontal_Path.png”
 Define the Walls of the Maze
1. Add a new variable called “maze”.

2. Create a new function called

“defineMaze” that will set the maze
variable.

3. Set maze to a list. This first level list will

represent the 3 rows of the maze.

4. For each list element, add another list

that will represent the 3 cells in each
row.

5. Create an object in each of the 9 list

slots with 4 fields: N, E, S, W.

6. Set the walls of each cell where ‘true’

means the wall exists and ‘false’ means
it does not.

7. Call defineMaze when the app opens

but before you call displayCurrentCell.
 Get the Walls at the Current Position
1. Create 2 new variables called “currentCellRow” and “currentCellWalls”.

2. From our defined maze get whatever is in the current row. We determine current row by getting
the value in ‘y’. This will return a list of 3 objects that should be stored in currentCellRow.

3. From the list of 3 objects get the cell we are currently in. We determine current cell by getting the
value in ‘x’. This will return the object that defines the current cell’s walls. Store this in
currentCellWalls.

4. Do all of this in the displayCurrentCell function. Now we have the values of the walls for the cell we
are currently in.
 Update the Buttons to Current Cell
1. Create a new function called
“updateButtons” that will update which
paths the player can take on the screen. We
will run this function every time the player
changes position.

2. For each button / direction (N,E,S,W):

a. Set the button’s Disabled property to

the value of the wall.

b. If the button is disabled, set the

button’s BackgroundPicture to
“Grass.png”.

c. If the button is not disabled, set the

BackgroundPicture to:

d. “Vertical_Path.png” for N and S

e. “Horizontal_Path.png” for E and W.

3. Call the “updateButtons” function in the

displayCurrentCell function AFTER you set
the currentCellWalls variable.
Change Position When a Path / Button
is Selected
For each button / direction (N,E,S,W) that is
clicked:

1. Adjust the x/y of the current cell

position:

a. N: y - 1

b. E: x + 1

c. S: y + 1

d. W: x - 1

2. Call the displayCurrentCell function

AFTER the position is adjusted.
 If Outside of the Maze, You Win!
1. Create a new screen and name it “Success”

2. Put what is currently in the displayCurrentCell function in an if statement that checks the
following before continuing.

a. x>3

b. y>3

c. x <= 0

d. y <= 0

3. If any of the conditions are true, navigate to the Success screen.

Test: Maze Screen - Maze

We will frequently test changes

made to the app to quickly
resolve any errors.
 Test the Maze Screen - Maze
Go to your Thunkable Live app and navigate
to the Maze Screen.

You should see the 9 blocks of the maze and

see one path forward.

Verify when you choose a path, the buttons

update showing that you moved.

Verify you cannot select disabled buttons.

Verify that you can navigate through the

maze and when you exit you are brought to
the blank Success screen.
Develop: Maze Screen - Footer

We will develop the app step

by step start to finish.
Screen 2: Maze Section - Footer
Design
We will add a label that will display the
number of moves the player has made so
far.
Blocks
For the “Moves Label”, we will add blocks
that say:
● ‘When I change positions, increase the
number of moves I’ve taken by one.
Then update the Moves Label with the
new move count’.
 Add a Label to Show Move Count

1. In the ‘Section - Footer’ row, add a label

and name it “Moves Label”.

2. Set Text = “Moves: 0”

3. Set FontSize = “24”

4. Set Color = white

5. Set Height = “Fill contents”

 Store and Update Move Count

1. In the Maze screen’s Block page, create

a new variable called “moveCount”. Set it
to “0”.

2. Also set moveCount = 0, when the Maze

screen opens.

3. Create a function called

“incrementMoveCount”.

4. In incrementMoveCount:

a. Set Moves Label text to

i. “Moves: “ & moveCount

b. Increment moveCount by “1”.

5. Call incrementMoveCount in
displayCurrentCell.
Test: Maze Screen - Footer

We will frequently test changes

made to the app to quickly
resolve any errors.
 Test the Maze Screen - Footer
Go to your Thunkable Live app and navigate
to the Maze Screen.

“Moves: 0” should display at the bottom of the

screen.

Each time you make a move in the maze,

Moves: should increase by one.

If you go home and return to the Maze

screen, Moves: should be set back to 0.
Develop: Success Screen

We will develop the app step

by step start to finish.
Screen 3: Success

Design Blocks

For this screen we simply want to We will only add one block of code that
congratulate the player for completing will go to the Start screen when the
the maze and give them the ability to go “Reset” button is pressed.
back to the home page.

We will add a background image, a

congrats message, and “Reset” button.
Set the Success Screen Background

1. Navigate to the “Success” screen.

2. Set the background picture to

“Grass.png”.
 Add Column with Label and Button

1. Add a Column called “Success Column”.

2. Set the Justification of Success Column

to “space-around”. This will force
everything within the column to be
evenly spaced throughout.

3. Add a Label called “Success Label”

within Success Column.

4. Add a Button called “Reset Button”

within Success Column.
 Style the Label

1. Set the Text to “You Escaped!”.

2. Set FontSize to “45”.

3. Set the color to white.

4. Set the Height to “Fill contents”.

 Style the Button

1. Set the Text to “Reset”.

2. Set the TextColor to white.

3. Set the BackgroundColor to orange.

4. Set the FontSize to “30”.

5. Set the cornerRadius to “20”.

6. Set Raised to “true”.

 Add Block to Go to Start Screen

1. In the Success screen’s Block page,

grab the “navigate to” block from the
Control section.

2. Grab the “when Reset Button is clicked”

block from the Reset Button section.

3. Put the 2 blocks together and set

navigate to “Start”.
Test: Success Screen

We will frequently test changes

made to the app to quickly
resolve any errors.
 Test the Success Screen
Go to your Thunkable Live app and navigate
to the Maze screen.

Verify that when you navigate through the

maze and complete the maze, you are
brought to the Success screen.

When you press the Reset button, you should

be brought back to the Start screen.
Review

We will review all we have learned

and discuss potential
enhancements to the app.
Congrats!

You have completed a new app with Thunkable! You’ve learned

some cool things along the way:

1. The basics of block coding.

2. Storing objects in variables and double arrays.
3. Conditional logic like “If - Then” statements.
4. Reusability by creating functions that can be called from
multiple places.
How Can You Improve the App?

➔ Add a high-score page for the least number of moves?

➔ Add more mazes?
➔ Add bigger mazes?
➔ Add a timer?
➔ Let me hear your ideas!
Make Your Maze Harder!

Remember the Position Label we added on

the Maze screen to help us know where we
are in the maze?

Since testing is over, I encourage you to

hide this when you show the app to your
family and friends. It will drive them crazy!

Just set the color to transparent.

Don’t stop here...

This guide was made by me, Darren! I started

AmbleMind to inspire creativity in my life and
others. I’d love to hear from you!

➔ Website: Amblemind.com
➔ Youtube: Thunkable X Tutorials
➔ Email: darren@amblemind.com