🎲 — Create a Dice App and Roll Away!

Love playing board games?

It’s Saturday night, and your family gathers around to play your favorite board game. You open the box, and…Oh no! You realize a die is missing. Don’t worry, Sketchware has your back. Today, we will create a simple Dice application that will always stay in your phone!

What you’ll need

1. Sketchware Application from Google Play

What you’ll learn

1. Concept of Random, Image, and MoreBlock

Step 1: Starting the project

Step 2: Designing the Application

This is going to be a single-paged application — which means the application won’t have any other views. The design above doesn’t seem too difficult; if you don’t think you can design this, please review previous tutorials.

Step 3: Understanding MoreBlock

MoreBlocks!

Before we move on, I want to talk more about MoreBlock. What is a MoreBlock? Basically, MoreBlock is a customizable function block you can create on your own. If you want to create a block that adds String and number, for example:

“Hello World” + 3 = “Hello World3”

Sure, you can do this every time you need to add a String and a number; however, what if you were to use this same operation for five times… or maybe five hundred times?

It would not be the most efficient way to use this method over and over. Imagine — if the operation was more complicated, the logic section would look very messy.

This is where MoreBlock comes in. You create a custom block that adds a String and a number, and you can use that block over and over.

MoreBlock handles the repetitive logic for you.

Creating a MoreBlock

Under the blocks, go to the More Block tab and click on Make block.

You will be prompted with this pop-up.

There are a couple things you need to know:

1. Name of the block you want to create, for this example, we can call it StringAddNumber

2. Boolean, Number, String blocks it will take as an input. For this block, we want it to take String and Number.

3. Label for any extra description; for this example, we can add a + label between two inputs.

After we create the block, it should look something like this:

Does this block work out of the box? We wish it did — now we need to create logic for this block to operate on.

Creating Logic for MoreBlock

If you check the Logic tab, you will see that a new event is created. Click on the event.

This is where we edit the logic for the block. Note that the inputs we’ve defined are already given to us — we only need to define how these values are going to be manipulated.

Just like how we previously added the strings, we add the blocks we need like this:

Note that showMessage block was used just for connecting purposes. Now, we can simplify what looks like this to this!

Remember!

Remember that MoreBlocks don’t need to take in input. If you want to make a MoreBlock that performs a certain action, you can do that as well!

Now that we understood what MoreBlock does, let’s apply this idea into our Dice app. Please note that we are NOT going to use this “StringAddNumber” MoreBlock inside our Dice Application.

Step 4: Setting up the logic

Let’s look at the demo before we think about how the application should function. From the observation, we can conclude:

1. The user clicks on the “DRAW DICE” button.

2. The application creates a random number between 1 and 6.

3. Depending on the number, we display the image accordingly.

We’re going to create a MoreBlock that will handle both step 2 and three.

First, create a MoreBlock that takes in a single Number — I am going to call it displayDice. Then, inside the created MoreBlock’s logic, let’s complete our logic! This example already provides all the necessary images for you.

Lastly, inside the button’s onClick event, we want to add our freshly created displayDice block — like this:

That completes all of our logic steps. Click on RUN to see your app come to life!

Conclusion

Today, we learned the purpose of MoreBlock, and how we can utilize it to clean repetitive logic. It can come in very handy when your project gets big in size. Here is a challenge for you guys:

Create two dice that show two different numbers

This could come in handy when you’re playing a board game like Monopoly! That’s it guys. Thank you and happy coding! 🎲 😄