Valentine’s Day Coding Project: Heart Message Generator

Candy heart messages are one of the most fun parts of Valentine’s Day. Wouldn’t it be great if your child could create a virtual message generator to send messages to his friends online? In this fun Valentine’s Day Scratch coding project tutorial, I’ll show you how to do just that by creating a Candy Heart Message Generator.

If you want to follow my version of the project, you can find it here. Let’s start coding!

To get hands-on, expert guidance on creating all kinds of cool games in Scratch, enroll your kids in a fun online game coding class designed by experts from Google, Stanford, and MIT. Get started with beginner-friendly Scratch coding.

Fun Valentine’s Day Coding Projects With Scratch Coding

Creating a sweet heart message generator in Scratch is a great Valentine’s themed coding activity. Follow along to learn how to create a candy heart message generator in Scratch!

1. Create a New Project and Add a Background

The first step of course is to create a new project. Navigate to Scratch and click “Create” to create a new project. Delete the cat sprite that will load by default and then select a suitable background by clicking the “Choose Background” button in the bottom right corner (shown in green in the image above). We chose “Flowers”, but the choice of background is yours!

2. Add Candy Heart Sprites

Since Scratch doesn’t come with Candy Hearts boxed sprites, we can upload them from our own computer. Download the sprite image here! Then, in Scratch, hover your mouse over the “Select sprite” button and click “Upload sprite.” Find the Candy Heart image on your computer and upload it to Scratch. Then, move it to the center of the screen and update the “size” column to make it the appropriate size – we chose 70.

3. Create a “Number of Clicks” Variable.

We’re going to make our candy heart box emit a message after being clicked four times. To control this, we need to create a new variable called “clickCount.” Click the orange “variables” tab and click “Create Variable.” Name it “clickCount” and press “OK.”

4. Put a code on the Candy Heart Box

With the variables in place, we are ready to code the Candy Heart Box sprite. Read below to learn what each code block does; then, add it to your own program.

• When this sprite is clicked: The code below will run every time the candy box is clicked
• Play the sound (high hat) until finished: This block makes a “high hat” sound when the box is clicked. We chose these sounds because we thought they were suitable, but you can choose any sound you like from the Scratch sound library. Note that, to import sounds into your project, you must click on the “sounds” tab at the top and click on the blue “+” sign. Once you click on the sound, go back to the “code” tab to use it in your project.
• Change (clickCount) by 1: We need to keep track of how many times the sprite has been clicked, so this will increase the clickCount variable by 1 each time the box is clicked.
• If ([direction] < [90]) then…more: We want our box to rock back and forth every time it is clicked. This if/else block checks whether the current angle is less than 90. If so, the box will rotate 15 degrees clockwise; otherwise, the box will rotate 15 degrees counterclockwise. Essentially, this makes the box spin back and forth every time it is clicked.
• If ([clickcount] > 3) then: This block checks if our clickCount variable is greater than 3. If it is, it will execute the line below.
• Broadcast (candy drop): This block broadcasts a message called “dropcandy” which can be received by other blocks. This will be useful in the next steps.

5. Add and Edit Message Sprites

We will use the second sprite to display messages in our program. Click the “Select Sprite” button, search for “candy hearts,” and click the sprite to load it into your program. The sprite is preloaded with four messages; You can customize these messages and add additional costumes using the “costumes” tab at the top of the page.

6. Code the Message Sprite

Once your message sprite has been added and customized, it’s time to code! We will add two different blocks of code to our program. Read below to better understand the code in the image above. Then, when you’re ready, add the block to your program.

• When the green flag is clicked: The code below will run when the green flag is clicked
• Hiding: We don’t want our message to be displayed at the beginning of the program. This block will hide the message when the green flag is clicked, and we can code it to appear later when we are ready.
• When I received (dropcandy): Previously, we coded our Heart Candy Box to broadcast “dropcandy” when it was clicked four times. The code below will be executed on our message sprite when this “dropcandy” message is received.
• Go to (front) later: We want the message to be on the front of the Heart Candy Box, which can be accomplished with this code block.
• Change costume to (choose at random [1] to [4]): We want random messages to be displayed. Since each of our sprite’s costumes has a different message, we can do this by changing the costume to a random number between 1 and the total number of costumes our message sprite has. In our case, the number of costumes is 4, but it may be more or less depending on how you customize the sprite.
• Show: If you remember, we previously instructed this block to “hide” at the start of the program. At this point, we are ready to see it, so we use this “show” block.
• Repeat (10): The code in this repeating block will be executed 10 times.
• Resize by (10): This makes our message grow by 10. Because it is repeated 10 times, this has the effect of making the message look like it is expanding into the program.

7. Create a Reset Button

Chances are, users will want to use our program more than once. Let’s code a button that will reset our program! First, click “select sprite” and “paint.” Reset button design; it’s best to use an oval containing the word “again?” in the. Finally, reduce the size of the button and place it in a convenient location in your project – the bottom left corner works great!

8. Reset Button Code

Once the reset button is created, you are ready to code it. Let’s see what these three code blocks do, and then you can add them to your program.

• When the green flag is clicked: The code below will run when the green flag is clicked
• Hiding: We don’t need this reset button to be displayed until the first message appears, so we will hide it at the start of the program when the green flag is clicked.
• When I receive (dropcandy): Users will need access to the reset button every time the message appears. The message is triggered when a dropcandy message is broadcast, so we can use this block to execute the code below it every time this dropcandy message is received.
• Show: This block makes the reset button appear.
• When this sprite is clicked: The code below will run if someone clicks the reset button
• Set (clickCount) to 0: Since we are resetting the program, we need to reset the clickCount variable
• Press (reset): This will send a “reset” message that we will use in the next step
• Hiding: The button has served its purpose, and can now be hidden until needed again.

9. Reset Message Sprite

Click on the “Heart Candy” sprite – now that we have implemented the “reset” function, we can combine it here. Read the new code description below, then add it to your program.

• When I receive (reset): The code below will be executed when a “reset” message is received from our reset button.
• Set size to (100%): Previously, we increased message size by 10, 10 times. If we want to run the program again, we must reset the message size to normal.
• Hiding: If we were to run our program again, we would have to hide the sprite message until the box is clicked 4 more times.

10. Allow Reset From Green Flag

Click the “candy heart box” sprite. In addition to allowing users to reset the program with the “again?” button, it’s best to let them reset the program when the green flag is clicked. We can do it with the code above.

• When the green flag is clicked: The code below will be executed every time the green flag is clicked.
• Set (clickCount) to 0: This will reset our clickCount variable to 0.
• Press (reset): This will broadcast our reset message, which will be received by the “Heart Candy” sprite.

Enjoy Your Valentine’s Day Coding Project

If you and your child have followed along so far, congratulations! You’ve successfully created a message generator in Scratch, just in time for Valentine’s Day. If you had fun with this project and are ready for another Scratch tutorial, check out How to Make a Virtual Pet in Scratch. If your child wants to learn more about building with Scratch, sign them up for a free Scratch class. They can even get a certificate! Thanks for reading, and happy coding!

Written by Matt Schofield, an educator and avid coder. After studying Spanish at the University of Pennsylvania, Matt began teaching English as a second language to elementary school students in Baltimore. In addition to his full-time teaching position, Matt enjoys teaching computer science in the evenings and weekends with Create & Learn.