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.
👉 Watch the full YouTube tutorial here:
How to Make a Health Bar in Scratch | Healthy vs Junk Food Game | Scratch Animation | Kodex Academy
Best Tablets to Make Scratch Even More Fun
Coding this health bar game is awesome on any device, but a tablet + stylus makes drawing custom food, backgrounds, and testing the Pen extension feel like real magic! These are the tablets parents recommend to buy for Scratch:
Disclaimer: This post contains Amazon affiliate links. We may earn a small commission at no extra cost to you.
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
Step-by-Step Video Tutorial Link
- To follow along visually, watch the complete tutorial: YouTube Video: How to Make a Health Bar in Scratch | Healthy vs Junk Food Game | Scratch Animation | Kodex Academy
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:
when green flag clicked
go to x: 0 y: -100
forever
if <key [up arrow] pressed?> then
change y by 10
end
if <key [down arrow] pressed?> then
change y by -10
end
if <key [right arrow] pressed?> then
change x by 10
point in direction 90
end
if <key [left arrow] pressed?> then
change x by -10
point in direction -90
end
endExplanation:
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.foreverloop
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 usingpoint in direction 90.if key left arrow pressed → change x by -10
Moves left AND faces left withpoint in direction -90.
This creates smooth 4-direction movement like typical game controls.
Fix upside-down flipping:
set rotation style [left-right v]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:
forever
next costume
wait 0.1 seconds
endnext costumeswitches to the next image within the sprite.- The
wait 0.1 secondsmakes 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:
when green flag clicked
set [health score v] to 1005. Increase Health on Healthy Food Collision
forever
if <touching [fruit salad]> then
change [health score v] by 1
wait 0.5 seconds
end
end- Checks if the Cat sprite touches the healthy food.
- If yes → increases health by +1
- The
wait 0.5 secondsprevents score from increasing too fast.
This simulates the player eating healthy food and becoming stronger.
6. Decrease Health on Junk Food Collision
forever
if <touching [cheesy puffs]> then
change [health score v] by -1
wait 0.5 seconds
end
end- 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
when green flag clicked
set [health score v] to 100- 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
- Go to My Blocks → Make a block → “update health”
- Check ✔ Run without screen refresh
Code for health bar (fill animation):
define update health
erase all
go to x: -51 y: 140
repeat ((health score / 100) * 169)
stamp
change x by 1
endThis 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.
10. Broadcast Health Changes to the Bar
From the player sprite: (Sender Code)
broadcast [health v]From the bar sprite: (Receiver Code:)
when I receive [health v]
update health- 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 score) < 1> then
erase all
stop all
end
if <(health score) > 100> then
erase all
stop all
end- If health drops below 1 → game ends.
- If health becomes greater than 100 → also end (optional safety rule).
stop allfreezes the entire game.erase allclears the health bar from the screen.
12. Include Background Music
Choose a loop sound from the Scratch library.
when green flag clicked
forever
play sound [dance chill out v] until done
end- Plays background music continuously.
until doneensures the track is not spammed.
Headphones & Speakers for Scratch Game Testing
Nothing beats hearing your sound effects and background music while testing the game! These kid-safe, volume-limited headphones and speakers are the exact ones Scratch parents grab so their coder can play (and debug) without disturbing the whole house.
Optional Enhancements: Level Up Your Game
These features make your Scratch game even more exciting.
1. Add a Speed Booster for Bonus Healthy Food
Add a new sprite: Carrot / Apple / Juice
when green flag clicked
forever
if <touching [carrot]> then
change [health score v] by 3
change [speed v] by 2
wait 1 second
set [speed v] to 10
end
end- 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 score < 1
switch backdrop to [Game Over]
stop all- When health reaches 0 → change the background to a Game Over screen.
- Stops the entire game.
3. Make Food Move and Respawn
when green flag clicked
forever
change y by 3
if <touching edge> then
set y to -150
end
end- 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
when green flag clicked
set [timer v] to 60
forever
wait 1 second
change [timer v] by -1
end- Counts down from 60 seconds.
- Perfect for time challenge levels.
5. Add Sound Effects for Eating Food
if <touching [fruit salad]> then
play sound [pop v]
end- Plays a satisfying sound whenever the player eats food.
- Improves user experience through audio feedback.
Summary of Steps: Healthy vs. Junk Food Game Tutorial
How to Create a Health Bar Animation in Scratch: Healthy vs. Junk Food Game Tutorial
A step-by-step guide to building a simple Scratch game where a player sprite moves with arrow keys, collects healthy food to increase a health score, and junk food to decrease it. The health score drives a live-drawn health bar using the Pen extension, with optional enhancements such as speed boosters, game-over screens, moving food, timers, and sound effects.
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.)
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!
FAQ: Frequently Asked Questions
| Question | Answer |
|---|---|
| Do I need any prior Scratch experience? | No! It starts from a blank project and explains every block step-by-step. |
| Which Scratch version should I use? | Scratch 3.0 (online at scratch.mit.edu or the latest desktop app). The Pen extension is built-in. |
| Why isn’t my health bar updating? | Check that the cat broadcasts “health” and the bar sprite has “when I receive [health] → update health”. Make sure “health score” variable is “For all sprites”. |
| My cat flips upside down when moving! | Add set [rotation style v] to [left-right v] in the cat’s “when green flag clicked” script. |
| Can I use different food sprites? | Yes! Replace Fruit Salad or Cheesy Puffs—copy the collision and broadcast code to new sprites. |
| Health changes too fast when touching food | Add wait (0.5) secs after each change [health score v] by block for cooldown. |
| How does the Pen extension draw the health bar? | In update health block: pen down, repeat (length) with stamp, pen up. Length = (health score / 100) * 169. |
| How do I add a Game Over screen? | Create “Game Over” backdrop, then switch backdrop to [Game Over v] + stop [all v] when health ≤ 0. |
| Where can I download the finished project? | Use the “Download Project (.sb3)” button at top/bottom—free! |
| Custom block “update health” not working? | Define it in bar sprite (Step 9), ensure it uses correct variable (health score), and broadcast matches exactly. |
| Food not respawning or moving? | In food sprite: when I start as a clone → go to random position + forever loop with glide or change x by. Delete clones after eat. |
| Collision detection not triggering? | Use if <touching [Cat v]?> inside forever loop on food sprites. Ensure sprites aren’t too small—resize if needed. |
| Health goes above 100 or below 0? | Add clamps: set [health score v] to (pick random (1) to (100)) or use if <(health score) > [100]?> then set [health score v] to [100]. |
| How to add sound effects for eating? | In collision script: play sound [pop v] until done after change [health score v]. Import custom sounds via library. |
| Pen bar not erasing properly? | Before drawing: erase all, pen up, go to [-200 -100], set pen color to [#00FF00], then pen down. |
