How to Create a Health Bar Animation in Scratch: Healthy vs. Junk Food Game Tutorial

Introduction to Health Bar Animation in Scratch

Creating fun and engaging games in Scratch not only helps kids learn coding, but also encourages creativity and logical thinking. In this detailed Scratch game tutorial, you will learn how to make a Healthy vs Junk Food Game with a live health bar animation—just like real video games!

What You Will Learn:

This comprehensive guide teaches you how to:

• ✓ Create a health bar animation in Scratch
• ✓ Build a healthy vs junk food game
• ✓ Program movement controls (up/down/left/right)
• ✓ Detect collision between the player and food
• ✓ Increase/decrease health based on food choices
• ✓ Add custom sprites, variables, pen extension, and broadcast messages
• ✓ Add enhancement features like game over screens, sound effects, speed boosters, and bonus fruits

This project is perfect for beginners and intermediate Scratch users who want to learn Scratch programming, Scratch animation, and how to make games in Scratch.

Project Overview: What You'll Build

In this game:

• The player controls a cat sprite that moves around the screen.
• There are two types of food:
  • 🥗 Healthy Food (Fruit Salad) → Increases Health
  • 🍟 Junk Food (Cheesy Puffs) → Decreases Health
• A green health bar fills or shrinks based on the player's eating choices.
• When health becomes 0 or 100, the game ends.

This is an excellent starter project for learning live effects, animations, variables, and Scratch game logic.

Step-by-Step Guide to Coding – Health Bar Animation in Scratch

1. Set Up Your Scratch Project

Before writing any code, we prepare our scene:

• Open Scratch at scratch.mit.edu
• Choose a bedroom, kitchen, or any background that fits your game theme
• Keep the Cat sprite or replace it with any character you prefer

This step ensures your game starts with a clean, organized layout before you begin programming.

2. Program Player Movement with Arrow Keys

Add arrow key controls:

Explanation:

• when green flag clicked - This starts the movement script whenever the game begins.
• go to x: 0 y: -100 - Places the player sprite at the bottom center of the screen.
• forever loop - Continuously checks for key presses so movement feels smooth.
• if key up arrow pressed → change y by 10 - Moves the player upward.
• if key down arrow pressed → change y by -10 - Moves downward.
• if key right arrow pressed → change x by 10 - Moves right AND the sprite faces right using point in direction 90.
• if key left arrow pressed → change x by -10 - Moves left AND faces left with point in direction -90.

This creates smooth 4-direction movement like typical game controls.

Fix upside-down flipping:

By default, Scratch spins sprites in full rotation. This command forces the sprite to rotate only left and right, preventing upside-down movement.

Add walking animation:

• next costume switches to the next image within the sprite.
• The wait 0.1 seconds makes the animation smooth.
• This loop continuously plays a walking animation while the character moves.

3. Add Healthy and Junk Food Sprites

Choose sprites:

• ✓ Fruit Salad → Healthy Food
• ✓ Cheesy Puffs → Unhealthy Food

Place them on opposite sides of the screen.

4. Create the Health Score Variable

Go to:

• Variables → Make a variable → "health score"

Set initial value:

5. Increase Health on Healthy Food Collision

• Checks if the Cat sprite touches the healthy food.
• If yes → increases health by +1
• The wait 0.5 seconds prevents score from increasing too fast.

This simulates the player eating healthy food and becoming stronger.

6. Decrease Health on Junk Food Collision

• Detects if the Cat is touching junk food.
• Reduces health by 1 point.
• The delay keeps the health bar from instantly dropping to zero.

This creates the game's challenge mechanic.

7. Initialize Health Score at Game Start

• At the start of the game, health is set to 100%.
• Prevents previous game data from carrying over.

8. Build the Visual Health Bar with Pen Extension

You need two custom-painted sprites:

1. Health Bar Outline (Rectangle)

• Draw a rectangle with only outline.

2. Green Fill Sprite (the actual growing bar)

• Draw a filled green rectangle.
• Place the fill sprite inside the outline.

Use the Pen Extension for Live Health Bar Drawing

Add the Pen Extension:

• Extensions → Pen

9. Define the Update Health Custom Block

Code for health bar (fill animation):

This is the core engine of the health bar.

Line-by-line breakdown:

• define update health - Creates a reusable block that updates the green bar.
• erase all - Removes old drawings from previous health updates.
• go to x: -51 y: 140 - Sets the starting point of the green bar.
• repeat ((health score / 100) * 169) - Converts health score into pixel width:
  • 100 health → full bar
  • 50 health → half bar
  • 0 health → empty bar
• stamp - Draws one small piece of the bar.
• change x by 1 - Moves a tiny step to extend the bar horizontally.

This creates a smooth, dynamic health bar that grows or shrinks.

To set this up:

• Go to My Blocks → Make a block → "update health"
• Check ✓ Run without screen refresh

10. Broadcast Health Changes to the Bar

From the player sprite: (Sender Code)

From the bar sprite: (Receiver Code:)

• The Cat sprite triggers "health update" whenever food is eaten.
• The Health Bar sprite listens for this broadcast and redraws the bar.
• This keeps the bar perfectly synced with the health score.

11. Add Game Over Logic

Stop health from going beyond limits:

• If health drops below 1 → game ends.
• If health becomes greater than 100 → also end (optional safety rule).
• stop all freezes the entire game.
• erase all clears the health bar from the screen.

12. Include Background Music

Choose a loop sound from the Scratch library.

• Plays background music continuously.
• until done ensures the track is not spammed.

Optional Enhancements: Level Up Your Game

1. Add a Speed Booster for Bonus Healthy Food

Add a new sprite: Carrot / Apple / Juice

• Adds bonus food that increases both health and movement speed.
• Speed boost lasts for 1 second before resetting.
• Great for making gameplay more dynamic.

2. Implement a Game Over Screen

Create a new backdrop with GAME OVER text.

• When health reaches 0 → change the background to a Game Over screen.
• Stops the entire game.

3. Make Food Move and Respawn

• Makes food move automatically toward the player.
• When it hits the top of the screen, it respawns at the bottom.
• Adds difficulty and excitement.

4. Add a Timer

• Counts down from 60 seconds.
• Perfect for time challenge levels.

5. Add Sound Effects for Eating Food

• Plays a satisfying sound whenever the player eats food.
• Improves user experience through audio feedback.

Summary of Steps: Healthy vs. Junk Food Game Tutorial

1. Start a New Scratch Project

Open Scratch, choose or draw a backdrop, keep or replace the default cat sprite as your player.

2. Code Player Movement & Walking Animation

When green flag clicked → go to x:0 y:-100 → set rotation style [left-right] → forever: move with arrow keys (change x/y by 10), point in direction 90/-90, next costume, wait 0.1 secs.

3. Add Healthy & Junk Food Sprites

Add two sprites (e.g., Fruit Salad = healthy, Cheesy Puffs = junk). Position them anywhere on the stage.

4. Create and Initialize the Health Score Variable

Make a variable "health score" (for all sprites) → when green flag clicked → set [health score v] to [100].

5. Program Food Collisions (Increase/Decrease Health)

In player sprite → forever: if touching healthy food → change [health score v] by (1), wait 0.5 secs; if touching junk food → change [health score v] by (-1), wait 0.5 secs → broadcast [health v] after each change.

6. Draw the Health Bar Outline & Fill Sprites

Create two sprites: one empty rectangle outline and one solid green fill. Position the fill inside the outline at top-left (e.g., x:-200 y:140). Add the Pen extension.

7. Create the "update health" Custom Block

In the fill sprite → My Blocks → Make a block "update health" (run without screen refresh) → erase all → go to x:-51 y:140 → repeat ((health score / 100) * 169) { stamp → change x by 1 }.

8. Make the Health Bar React to Broadcasts

In the fill sprite → when I receive [health v] → update health. Also call update health once at game start.

Add Game Over Logic

In player or stage → forever: if <(health score) ≤ [0]> or <(health score) > [100]> then erase all → switch backdrop to [Game Over] → stop [all v].

9. Add Background Music & Final Polish

Add a looping sound → when green flag clicked → forever play sound until done. (Optional: moving food, speed boost, custom sounds, etc.)

FAQ: Frequently Asked Questions

Conclusion: Your Scratch Game Is Ready!

Great job! You've successfully built a complete Healthy vs Junk Food Scratch Game with a fully working health bar system, character movement, scoring logic, sound effects, and interactive gameplay.

Along the way, you learned essential Scratch concepts like variables, sensing, loops, custom blocks, and the Pen Extension.

This project not only teaches how to make a fun game but also shows how health bars, life meters, and progress indicators work in real games. With these skills, you can now add more features such as levels, moving food items, power-ups, animations, or even create your own unique games.

Keep experimenting and exploring—your game development journey has just begun!

Next Steps: Learn More with Kodex Academy

Explore more:

• 💻 Scratch Blogs
• 🧠 Block Programming Course
• 🎓 Scratch Udemy Course

Stay updated with new content, free tutorials, and coding challenges!

• 📸 Instagram
• 📢 Telegram
• 💬 WhatsApp Channel
• 📎 Patreon
• 💼 LinkedIn
• 🌐 Games Website
• 𝕏 Twitter