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.

📌 [Download] Printable Scratch Coding Tutorials Get 2 printable Scratch tutorials, Rocket Landing and Flying Space Cat, to code your own games step by step. Download Now

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.

Valentine's Scratcher game

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 is 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.

Valentine's Scratch tutorial step 1

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.

Valentine's Scratch tutorial step 2

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

Recommended: Scratch Coding: Benefits, Tips, and Resources

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. 

Valentine's Scratch tutorial xy position

Step 3: Position hearts and scratcher sprite

In Scratch, your images are called sprites. 

Valentine's Scratch tutorial step 3
Valentine's Scratch tutorial step 3.2
Valentine's Scratch tutorial step 3.3
Valentine's Scratch tutorial step 3.4

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.

Valentine's Scratch tutorial step 4

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.

Valentine's Scratch tutorial step 5

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

Valentine's Scratch tutorial step 5.2

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.

Valentine's Scratch tutorial step 6
Valentine's Scratch tutorial step 6.1

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 hearts 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? 

Valentine's Scratch tutorial step 7
Valentine's Scratch tutorial step 7.2

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

Recommended: How to Make a Game on Scratch

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. 

Valentine's Scratch tutorial step 8