Challenge: Four Function Calculator

@Dreadmask197 got me to thinking.

When learning a new language, a typical exercise is to create a four-function calculator. I thought it might be an interesting exercise to build one in MakeCode Arcade. So, I’ve created a skeleton:

The challenge now is to write the event handler for the A button. It’s a four-function calculator, so you don’t need to worry about order of operations or anything like that. Just collect digits and assemble them into numbers (that’s your first challenge; I can think of a couple of ways to accomplish that) and then deal with the operators as they are selected. Use the outputSprite (the duck) to say your output.

This isn’t an easy challenge! You shouldn’t need to switch into JavaScript, although you’re welcome to do so if that’s easier for you.

This project uses both my Grids extension[1] and the excellent Sprite Data extension[2] from the MakeCode team.

I’ll post a completed solution later…and maybe some hints along the way. Have fun!


[1] Grid extension
[2] https://arcade.makecode.com/pkg/microsoft/arcade-sprite-data

See all of my MakeCode Arcade games and extensions here!

5 Likes

@AlexK thank you for the challenge and this got me thinking about the Simon Says game you made using Functions with parameters. Can you give a simple example of using functions with parameters to get a better understanding of how to apply to a game like Simon Says or possibly this challenge!

Thank you as always!

1 Like

Think I got it - only single digit operation at the moment.

Nice challenge! I tried to use as few blocks/variables as I could.

1 Like

Woah AlexK! This is great. I usually get bored and just thought of a calculator. Challenges are just the best though. Thanks @AlexK

1 Like

I was thinking something like this

Great question, @rymc88 !

We write functions for a few reasons. Two reasons come to my mind right away:

  • We find that we’re writing the same code over and over again.
  • We know the basic steps of an algorithm and want to use functions to represent those steps.

When we’re first learning to program, we typically write functions because of that first reason. Chapter Eight of my book is called “Better than right-click-duplicate”[1] because functions definitely are better than right-click-duplicate in MakeCode when you can use them! :slight_smile:

So, let’s take a look at how I built the skeleton for the calculator. If you’d like to follow along, then open this project:

My code started like this:

Notice that I haven’t built any functions yet, because I’m not entirely sure how they need to look. It’s a little more obvious, though, when I add the code for the next button. I’ve added console log blocks just to help separate the blocks.

If we look at those two sets of blocks – the blocks we used to create the zero button and the blocks we used to create the one button – it’s pretty obvious that those sets of blocks are nearly the same. This is a great candidate for a function, especially since I need to create eight more digits! So, that’s where I start: I move the blocks for the zero button into a function:

First thing: I should make the variable in the function more generic. It’s not that important, but it helps convey meaning a bit better. I’ll call it digitSprite instead.

Notice that I haven’t created any parameters for the function yet. I simply moved the code over to the function.

Now, take a look at the code used to create the zero button and compare it to the code used to create the one button. What is different?

  • The image for the sprite is different.
  • The row and column for the location of the sprite are different.
  • The value for the sprite is different.

These differences, then, are what we will use for the parameters. We need this information for each sprite in order to build it. Right-click on the function and select Edit Function from the context menu to create the parameters. Our code now looks like this:

Now that we’ve created the parameters for our function, we need to use them. Drag the placeholders from the function header to their appropriate locations in the function’s code. Our code now looks like this:

Now, let’s call our function so that it can build the zero button. BTW, you can find an empty image in the Advanced section of the toolbox, in the Images category.

Now, we can get rid of that duplicate code for the one button and replace it with an appropriate function call:

Now, when we create the other eight digits, we only need to add one block of code for each button!

That’s a great way to start to use functions in your own code. Look for blocks that you’re duplicating over and over again and create functions for those repetitions. It’s not always possible to do so, but when it is, it makes your code easier to read and easier to maintain.


[1] You’re getting ahead of me, @rymc88 ! I’m just getting started on writing Chapter Three! :smiley:

Nice work, @techahoynyc ! It looks like you’re comfortable with the Text blocks in MakeCode, so if you want to try to handle multi-digit values, you could try building strings (just tack the new digit onto the end). For those of you who are comfortable with the arithmetic, you also could try to come up with a formula for adding a digit to an existing number. (Hint: Think about place values.)

Good job!

Multi-digit (string concatenation to number conversion)

Again, good exercise @AlexK!

1 Like

@AlexK This is a great explanation and I appreciate the help! I am looking forward to the book!

1 Like