Valentine’s Day is a time to bring smiles to that special loved one. This year, you can set hearts aflutter with a handmade, hand-coded card. You will save the trees and spread the love.

Follow this easy Scratch coding tutorial to build a Valentine’s Day scratcher that reveals a personalized card.

What is Scratch? Scratch is a 100% free block-based programming language and it’s one of our favorites. Developed by the minds at MIT, the Scratch platform lets you drag and drop code blocks to build fun games and apps. Scratch is a great way to introduce younger students to coding and how to think like a programmer. 

Try our Valentine’s Day Card Scratcher. Scratch off a heart to reveal a very special Valentine’s message.

What you need:

  1. Scratch account: Create a free Scratch account 
  1. Starter files: Download the images we are using in our game. You can also use your own images to customize your application. Download starter files

No coding experience necessary for this tutorial. Beginner-friendly for ages 8 and up. Give it a try!

Step 1: Create a new project

Let’s start by creating a new project. 

Visit https://scratch.mit.edu/, login to your account, and click on the “Create” button.

Now, we can code your Valentine’s scratcher! 

Hint: You can also remix this project and others to see the code.

Step 2: Upload game board and card images

A new project will open up and you can see the Scratch interface.

In the starter files, we’ve included images for your game board, Valentine’s cards, and candy hearts.

These are the 6 different Valentine’s cards that can show after our user scratches a heart.

Hint: Instead of uploading backdrops, you can draw your own backdrops and add special messages here. 

X, Y positioning in Scratch

Before we move on, let’s talk about x and y coordinates. 

Scratch uses x, y coordinates to position sprites on the screen. You might have seen these in math class. 

We’ll use these (x, y) coordinates to position our hearts and scratchers. 

Step 3: Position hearts and scratcher sprite

In Scratch, your images are called sprites. 

Hint: You can put any heart in any position. Change the x, y positions of each heart to match your theme and background.

Step 4: Add a wand to scratch with

Our first scratcher is in position! We just need a way to scratch it. You can use or create any sprite as your scratcher, I’m using a magical wand.

Hint: Draw your own sprite to use as a scratcher. A claw, an arrow, a coin, you choose!

Step 5: Wave your wand

Next, we want the wand to follow our mouse cursor.

We can use a “Forever” block, which acts like a loop to repeat code. Pairing it with the “Go to mouse pointer” and “go to front layer” block means the wand will show up on the top and follow our mouse forever.

When you click the green flag, you should see your wand following your mouse.

Hint: You can also move your wand with your keyboard using an if then the “Key Pressed” block.

Step 6: Create the scratched heart effect

Ready for scratching! Let’s create the scratcher effect every time our wand touches the silver scratcher. 

Instead of erasing the actual sprite, we will create a series of costumes that look like our heart is being scratched off.

Hint: The more costumes you have, the longer it will take to reveal your card.

Step 7: Add scratcher logic

We’re going to reveal our candy heart by changing costumes. When the candy heart is fully revealed, we will get to see our final Valentine’s card.

Now, when your wand hovers over the scratcher heart it should begin to disappear. But, it’s not coming back? 

Hint: Instead of changing the costume when the sprites touch, you could also do it when you click on the heart.

Step 8: Reveal your Valentine’s card

What should happen when we’ve scratched off a heart? We finally get to reveal our sweet Valentine’s message! 

Each scratcher heart should reveal a different card. We will use the “broadcast” block to hide all the blocks and show our card. 

Your card will show up, but all of your other sprites are still showing up. The other sprites need to receive the “Hide” message and do something with it.  

For each of the other sprites, use the “Hide” block when they receive the message and then stop the script.

Hint: You can easily copy blocks of code from one sprite to another. Just grab the code block and hover over the sprite you want to copy it to.

Step 9: Show the game board when we restart

When we click the green flag, our game restarts. We’ll want to show our game board and hearts again.

Hint: You don’t have to stick to just one game board. Add several and switch them when the green flag is clicked.

Step 10: Add more scratcher hearts

You have one scratcher working! 

You can easily duplicate and update scratcher1 to cover the remaining hearts. Each new scratcher heart should reveal a different card. 

Your Valentine’s scratcher is complete!

Put it all together and give it a try. The most important step is to send it to a person you love this Valentine’s Day. 

https://scratch.mit.edu/projects/480067907/

You can “see inside” my project to get a peek inside the full Scratch code.

Free Scratch Tutorials

For bug fixes and to share your creations, join our Facebook group. Plus that’s where you can get these BONUS steps: 

Learn more about Scratch in our Elementary School Coding Program. It’s so much fun and the possibilities to be creative are endless! 

Did you remix this project? Share a picture or link with us on Facebook or Twitter with #NowYouCode to be featured. 

Hoping you have a sweet Valentine’s Day!