# Making a Stopwatch

**URL:** <https://forum.makecode.com/t/making-a-stopwatch/3814>\
**Category:** Show & Tell\
**Tags:** game, tutorial\
**Created:** [October 8, 2020, 7:34pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814 "2020-10-08T19:34:48Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [October 8, 2020, 7:34pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/1 "2020-10-08T19:34:48Z")

</div>

MakeCode Arcade has a built-in countdown timer which works really well. It’s an easy way to add a timing element to your games. But, what if we wanted a stopwatch instead, where the timer counts _up_ instead of down? @Dreadmask197 posed this question in a different thread, which inspired this post.

I also think this would be a good opportunity to show an example of how to plan a project. For small projects that are familiar to you, you might get away with just jumping into the code. However, for complex projects or projects with unfamiliar elements, many of us develop a plan before writing a single line of code.

This is going to be a _long_ post. But, if you’re willing to go on a journey, then please join me!

# Finished code

Here is a link to the finished version of the project. Feel free to run the project in the simulator. If you’re planning on walking through this journey with me, then please _don’t_ look at the code yet. You don’t want to spoil the story! 🙂

> **[Stopwatch I](https://arcade.makecode.com/14439-19802-66274-47615)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

# Developing the project plan

I’ve split this post into sections. Walk through the sections in order with me by clicking on the headings.

> **Project description**
>
> When writing a project plan, we start with a _project description_. The project description is a brief but complete statement that describes our project. We also can include a project name.
> 
> Here’s the start of my project plan:
> 
> **Project name**
> 
> MakeCode Arcade Stopwatch
> 
> **Project description**
> 
> This MakeCode Arcade project will display a stopwatch in a text sprite. The stopwatch will count up from zero. The player can start the stopwatch by pressing **A**. The user can pause the stopwatch also by pressing **A**.

> **Sprites**
>
> Because we are making a project in MakeCode Arcade, we need to think about sprites. What sprites do we need for this project? What do those sprites need to show, or what do they need to look like? Are there any properties that we need to set, like velocity or position?
> 
> Consider these questions and add to our project plan. Then, compare your notes with mine below. (Click on the spoiler text to view it.)
> 
> **Sprites**
> 
> _Stopwatch sprite_
> 
> - Text sprite
> - Located at top center of screen
> - Displays current timer in seconds

> **Events**
>
> MakeCode Arcade is an _event-driven_ environment. Events are “things that happen” in our program, like collisions and button presses. What events do we need to consider in our program? When those events occur, what does our program need to do?
> 
> For this project, we only have one event that we need to handle. What should we do when the player pressed **A**? Add this information to your project plan. Then, compare your notes with mine below.
> 
> I’ll give you a hint: When the player presses **A** , _two different_ things can happen. What are those two different actions? When would the first action happen, and when would the second action happen?
> 
> **Events**
> 
> _Player presses A_
> 
> - If the timer is running, then stop the timer.
> - If the timer is stopped, then start the timer.

> **Variables**
>
> In the _Events_ section, we noticed that one of our events depends on the current _state_ of the program. If the timer is running, then we need to stop the timer when the player presses **A**. So, we need to keep track of whether the timer is running. To do that, we can use a variable.
> 
> There are other variables that we will need, but they may not be very obvious right now. That’s OK. We’ll deal with them later.
> 
> Add this to your project plan:
> 
> **Variables**
> 
> - IsRunning
> - Data type: Boolean
> - Indicates whether the timer is currently running.
> - Value at start of the program: `false`

> **Final project plan**
>
> Here is my final project plan. It doesn’t show all of the details, but it gives me a good starting place for our project.
> 
> **Project name**
> 
> MakeCode Arcade Stopwatch
> 
> **Project description**
> 
> This MakeCode Arcade project will display a stopwatch in a text sprite. The stopwatch will count up from zero. The player can start the stopwatch by pressing **A**. The user can pause the stopwatch also by pressing **A**.
> 
> **Sprites**
> 
> _Stopwatch sprite_
> 
> - Text sprite
> - Located at top center of screen
> - Displays current timer in seconds
> 
> **Events**
> 
> _Player presses A_
> 
> - If the timer is running, then stop the timer.
> - If the timer is stopped, then start the timer.
> 
> **Variables**
> 
> - `timerIsRunning`
> - Data type: Boolean
> - Indicates whether the timer is currently running.
> - Value at start of the program: `false`

# Building the project

Now that we have a plan, let’s start building the project! Join me in MakeCode Arcade, start a new project, and let’s build this together.

When starting a project, I typically add the information in the project plan to my code as comments. I do that because the project plan that I just wrote is really a “starter plan.” As I build a project, I add to this plan with more comments. By transferring my “starter plan” to my code, my code actually becomes my plan … it’s built right into it!

For this project, we won’t be adding these initial comments. We will, though, be adding other comments that will build on our “starter plan” that we have just created.

> **Text Sprite extension**
>
> In our project plan, we stated that we were going to use a text sprite to display our stopwatch. Text sprites are not built into MakeCode Arcade. We need to add an extension to our project.
> 
> If you have not used extensions before, then we need to take a little detour. Go through the **Simple Extensions** tutorial, found in the **Tutorials** section on the home page for MakeCode Arcade. Then, come back here to continue on your journey.
> 
> In your stopwatch project, add the **arcade-text** extension. You also can search for _text sprite_ to find the extension.

> **Create the stopwatch sprite**
>
> We need to create a text sprite to show our stopwatch. We also need the ability to update the text in that sprite.
> 
> Let’s create the sprite first. Since we will be using it throughout our program, let’s create it in the `on start` block.
> 
> ![arcade-screenshot](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/7/7c0a13609b095e9a29659c545e51e96969e2b378.png)
> 
> Let’s also format it a bit and place it at an appropriate location on the screen. These are just suggestions; feel free to style the sprite however you like!
> 
> ![arcade-screenshot (1)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/6/6f2a047fef0b955337bbfe6c92be8e493bdf4b67.png)

> **Create other variables**
>
> If we look at our project plan, we mentioned that we need a variable that tracks whether the timer is running. Let’s create the variable now in the `on start` block.
> 
> ![arcade-screenshot (2)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/9/9692570f66a1be2336656e29e0148443592ae86a.png)

> **Update stopwatch sprite**
>
> Now, let’s come up with a way to update the text sprite. We don’t know yet _when_ we’ll need to update the text; we just know that we’ll have to at some point. This sounds like a perfect reason to use a function.
> 
> When writing a function, consider the following things:
> 
> - What information does our function need to know? Any information that our function needs to know would be good candidates for _parameters_. Parameters make our functions more flexible.
> - What task does our function need to do? How will it use the information sent to it through the parameter(s)?
> 
> Create a function that updates the `stopwatch` sprite. Then, at the bottom of the `on start` block, call the function. For the parameters, pass initial information that seems reasonable to you. Then, compare your function and function call with the ones that I wrote below.
> 
> ![arcade-screenshot (3)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/5/521813ce9e8ae062f623086ea1c5595144e18bb4.png)

> **Button event handler**
>
> From our project plan, we know that we need to include an event handler for the **A** button. Let’s add that empty event handler to our project. Let’s also add a comment to remind ourselves what needs to happen when the player presses **A**.
> 
> ![arcade-screenshot (5)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/0/076ad206018cf9836ba7a516850dfb645bd5ab7a.png)
> 
> Now, the description that we wrote for this event handler basically describes the code that we need to write. We don’t actually have a timer yet, but we _do_ have a Boolean variable (also called a _flag_) that we need to change. Give it a try! What should our initial code look like for this event handler?
> 
> After you’ve written your code, compare it with my code below.
> 
> **Basic version**
> 
> If we take our description literally, we could write it like this:
> 
> ![arcade-screenshot (4)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/9/92c9053eca62bbb37b7ae2e38f30909eb7f4fb88.png)
> 
> **Advanced version**
> 
> We actually can write this block in a more compact way if we use a special logical operator: **not**.
> 
> With Boolean values, the **not** operator “flips” a value to the opposite. If a Boolean value is `true`, then **not** will switch it to `false`. If a Boolean value is `false`, then **not** will switch it to `true`.
> 
> When the player presses **A** , we “flip” the current value of `timerIsRunning` and then save it back to the variable:
> 
> ![arcade-screenshot (6)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/2/25d958681bbf5fbcf80045168f7051399b9f6de1.png)

> **Creating the basic timer**
>
> So, we’ve created a text sprite to display our timer, and we have the ability to start and stop the timer. Now, we just need to figure out how to actually keep time. This is the challenging part!
> 
> We have a block that we can use to help us keep time. You can find it in the **Game** drawer in the toolbox.
> 
> ![arcade-screenshot (7)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/c/c768e782f91bf8c880098191953e4c6dd9104dbd.png)
> 
> Notice the shape of this block. It’s round, which means it contains a value. In this case, the value is a number. This number represents that amount of time that has passed since the game has begun. Think of it as a clock; this value will tell you the current “time,” just like a clock does.
> 
> When the player presses **A** to start the timer, we can save this value so that we know what “time” the timer began. We can use variables to save information that we need later. Let’s do that now.
> 
> ![arcade-screenshot (8)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/8/8d85c2fedce057cbbdc83e3e4a842764c7235d7e.png)
> 
> Now, let’s think about what we have.
> 
> - When the player presses **A** , we’re storing the “time” that happens in a variable. Pretend this has happened, and that we’ve stored _22_ in `startTime`.
> - At any other time afterward, the clock will have a different value. Let’s say the clock has a value of _37_.
> - How much time has gone by since the player pressed **A**?
> - How do we calculate that value?
> 
> Let’s use this information to update the stopwatch sprite. Create an `on update` block. We’ll use this to update the timer whenever the game updates. Now, we should _only_ update the stopwatch sprite when the clock is running. So, what should we place inside of our `on update` block first?
> 
> Once you’ve added that first set of blocks to `on game update`, check your work with mine.
> 
> ![arcade-screenshot (9)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/5/5093ce5ada4aa891eeae282a9df5d68fbfb4ae84.png)
> 
> Now, think again about how we can calculate the time we need to update the stopwatch sprite. What code goes inside of that `if` block in the `on game update` loop? Give it a try! Once you think you have your code working correctly, compare it with mine below.
> 
> ![arcade-screenshot (10)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/e/e1bd454c4a87a6ab7356c7f3b2af972ea7e28f6c.png)
> 
> One last thing. Did you notice that the timer seemed to be counting _very_ quickly? If we look at our new block again, we notice that it says `time since start (ms)`. That `(ms)` means that the clock is being kept in _milliseconds_. There are 1,000 milliseconds in a second. So, we need to adjust the value that we send to `updateStopWatch`. Give it a try on your own, then compare your adjustment to mine below.
> 
> ![arcade-screenshot (11)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/4/4c191babfd3eb737ac7d51264a0e187a4eb2f6b3.png)
> 
> We’ve done it! We’ve created a basic stopwatch!

# Next steps

In the next post, we’ll create a more advanced stopwatch that can be stopped and then started again.

---

<div class="post-metadata">

**Author:** ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)\
**Post date:** [October 8, 2020, 7:45pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/2 "2020-10-08T19:45:58Z")

</div>

Love the very informative explanations and your use of spoilers! This should become a full-blown tutorial on the Arcade home screen or even a YouTube video!

(I made a stopwatch by abusing the built-in countdown by setting it to the `time since start (ms)` return value in an `on game update` after 500 ms has passed. It’s not as flexible or as nice as yours though!)

---

<div class="post-metadata">

**Author:** ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)\
**Post date:** [October 8, 2020, 8:03pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/3 "2020-10-08T20:03:49Z")

</div>

Wow! Thanks @AlexK for making this!!

---

<div class="post-metadata">

**Author:** ![purna079](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/purna079/32/4018_2.png) [@purna079](https://forum.makecode.com/u/purna079)\
**Post date:** [October 8, 2020, 8:14pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/4 "2020-10-08T20:14:08Z")

</div>

this is amazing!  
`on game update.0.1 millaseconds tell @AlexK that he is amazing`

---

<div class="post-metadata">

**Author:** ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)\
**Post date:** [October 8, 2020, 8:43pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/5 "2020-10-08T20:43:56Z")

</div>

![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/4/4cea04a9173c72d99f320c3bcacc5bf05cbb6c13.png)  
Do you know why this isnt working for some reason when I press A?  
Here’s the link: [https://makecode.com/\_i1fHYqTvMg0V](https://makecode.com/_i1fHYqTvMg0V)  
I’ll keep working on it!!  
The problem is in the updateStopwatch function.

NVM!! Figured it out 😃

---

<div class="post-metadata">

**Author:** ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)\
**Post date:** [October 8, 2020, 8:55pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/6 "2020-10-08T20:55:20Z")

</div>

Sadly, now I have a new question.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/8/8bd248cf42cd139f5d3fb55d093ad2ac8b379427.png)  
I want them to see how much time it took them to solve it.  
Also, can you check my math? I’m making my guess after all the math things that @jacob_c told me about. Thanks for making this stopwatch!!

---

<div class="post-metadata">

**Author:** ![jacob\_c](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jacob_c/32/1532_2.png) [@jacob\_c](https://forum.makecode.com/u/jacob_c)\
**Post date:** [October 8, 2020, 10:33pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/7 "2020-10-08T22:33:46Z")

</div>

Nice! You’re pretty close.

First, you’ll need to compute the **total elapsed time** that you want to display; probably easiest to stick it in a variable right after the `TimerIsRunning` assignment:

```auto
set elapsedTime = {{time since start (ms)} - {StartTime}}

```

* * *

**EDIT:** For some reason I kind of assumed we were working with seconds after this point. So you can divide `elapsedTime` by `1000` to get total time in seconds before doing any of the following math.

* * *

The **minutes** are indeed `elapsedTime` divided by `60`. You’ve got exactly the right block in place, you just haven’t put any values in the slots. It should look something like:

```auto
{elapsedTime} integer ÷ {60}

```

The **seconds** are indeed a remainder, but you have an extra integer divide in there. Instead you want:

```auto
remainder of {elapsedTime} ÷ {60}

```

(The ÷ in the above snippet is the one that comes in the remainder block, _not_ an additional division block.)

---

<div class="post-metadata">

**Author:** ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)\
**Post date:** [October 8, 2020, 11:49pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/8 "2020-10-08T23:49:33Z")

</div>

Make a variable called `elapsed time` and elapsed time is equal to uhhhhh. The math you know. I’ll see if I can understand it and try to follow! thx

---

<div class="post-metadata">

**Author:** ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)\
**Post date:** [October 9, 2020, 12:34am UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/9 "2020-10-09T00:34:28Z")

</div>

Sooooo… I tried it and mde 2.86 seconds. On the string, it says that I solved it in 44 mins and 48 seconds

---

<div class="post-metadata">

**Author:** ![jacob\_c](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jacob_c/32/1532_2.png) [@jacob\_c](https://forum.makecode.com/u/jacob_c)\
**Post date:** [October 9, 2020, 1:03am UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/10 "2020-10-09T01:03:58Z")

</div>

Right… it looks like from those numbers you’re treating the milliseconds as seconds (which… I also did at first in my write-up 😅).

You’ll need to `set elapsedTime = elapsedTime ÷ 1000` to get from milliseconds to seconds before doing the `÷ 60` and `remainder` parts.

---

<div class="post-metadata">

**Author:** ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)\
**Post date:** [October 9, 2020, 1:14am UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/11 "2020-10-09T01:14:22Z")

</div>

That’s true. You divided by 1000 afterwards in that return block

---

<div class="post-metadata">

**Author:** ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)\
**Post date:** [October 9, 2020, 1:25am UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/12 "2020-10-09T01:25:33Z")

</div>

> **[Rubiks Cube Scrambler](https://arcade.makecode.com/56350-72128-59695-63405)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

  
Thank you @jacob_c @UnsignedArduino @AlexK @jwunderl for helping me. This is the most advanced thing I think I’ve ever done. Then again, thanks!!

---

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [October 10, 2020, 5:27am UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/13 "2020-10-10T05:27:26Z")

</div>

This is wonderful! Great project, @Dreadmask197! It looks really nice!

---

<div class="post-metadata">

**Author:** ![purna079](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/purna079/32/4018_2.png) [@purna079](https://forum.makecode.com/u/purna079)\
**Post date:** [October 12, 2020, 8:54pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/14 "2020-10-12T20:54:53Z")

</div>

😆  
 ![Screenshot 2020-10-12 165357](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/0/099635bd449f252d707a9def5e100bedaf09d8af.png)

---

<div class="post-metadata">

**Author:** ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)\
**Post date:** [October 12, 2020, 9:50pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/15 "2020-10-12T21:50:13Z")

</div>

Wut in da wurld

---

<div class="post-metadata">

**Author:** ![purna079](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/purna079/32/4018_2.png) [@purna079](https://forum.makecode.com/u/purna079)\
**Post date:** [October 12, 2020, 9:51pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/16 "2020-10-12T21:51:31Z")

</div>

that’s what happend!

---

<div class="post-metadata">

**Author:** ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)\
**Post date:** [October 12, 2020, 10:03pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/17 "2020-10-12T22:03:04Z")

</div>

That usually happens because floats aren’t the best at representing, well, floats. They will always have some inaccuracy like this, so you will need to round to the hundredths place or something like that because TBH, that looks _very_ ugly.

---

<div class="post-metadata">

**Author:** ![purna079](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/purna079/32/4018_2.png) [@purna079](https://forum.makecode.com/u/purna079)\
**Post date:** [October 12, 2020, 10:06pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/18 "2020-10-12T22:06:59Z")

</div>

Sorry what are you saying?

---

<div class="post-metadata">

**Author:** ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)\
**Post date:** [October 12, 2020, 10:11pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/19 "2020-10-12T22:11:25Z")

</div>

Sorry, gone overboard again. 😅

Decimals in programming are called `floats`. They are designed to hold decimals from 3.4028235E+38 to -3.4028235E+38, which is quite a big number. But floats only take 4 bytes in memory. 8 for the exponent and 24 for the actual number if I remember correctly. So they have to approximate the decimal.

A side effect of that is that when you do math with floats, they end up as how you showed up as above. So you have to round them before printing them, etc.

---

<div class="post-metadata">

**Author:** ![purna079](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/purna079/32/4018_2.png) [@purna079](https://forum.makecode.com/u/purna079)\
**Post date:** [October 12, 2020, 10:27pm UTC](https://forum.makecode.com/t/making-a-stopwatch/3814/20 "2020-10-12T22:27:53Z")

</div>

thanks for `clearing that up!`