Mr Vullo – Alternative Education

How to Make a Batman Game in ScratchJr

Introduction

This tutorial will guide your child through creating an action-packed, multi-level shooting game! They will learn how to set up a challenging ScratchJr project where a custom-designed Batman character must defeat three iconic villains: The Riddler, The Penguin, and The Joker. The game is designed to teach essential coding concepts like messaging to chain events, collision detection to register hits, and character customisation to bring their favourite heroes and villains to life. By the end of this engaging lesson, your child will have a fully functional game, gaining confidence in the fun, block-based world of ScratchJr. This is a brilliant way to develop problem-solving skills and imaginative play.

The Video Embed

What You Need

  • Characters:
    • Batman (Customised Cat character)
    • Batarang (Customised and shrunk Bat character)
    • The Riddler (Customised Person character, green with question marks)
    • The Penguin (Stock Penguin character)
    • The Joker (Customised Person character, purple clothes and green hair)
    • Three Buttons (To control Left, Right, and Shoot actions)
  • Backgrounds:
    • Page 1: A suitable City or Night background.
    • Page 2: A simple background with a text box for the ‘Win’ message.
  • Specific Setup: A second page is required for the final “Gotham is safe for now” screen [02:51].

Step-by-Step Instructions

Step 1: Setting up Batman and the Batarang

Start by customising your characters.

  • Select the Cat character, repaint it black, and add a yellow emblem to make it look like Batman [00:22].
  • Select the Bat character, resize it to be very small, and rename it ‘Batarang’ [01:34].
  • Place your villains (Riddler, Penguin, Joker) in their starting positions on the stage.

[Insert screenshot of characters on stage here]

Step 2: Coding Batman’s Movement and Shoot Actions

You will use the three custom buttons (e.g., arrows for movement, a circular button for shooting) to control Batman.

  • Left Button Code: Use the Start on Tap block followed by a Send Left Message block.
  • Right Button Code: Use the Start on Tap block followed by a Send Right Message block.
  • Shoot Button Code: Use the Start on Tap block followed by a Send Blue Message block.
  • Batman’s Movement Code: On the Batman character, create two scripts:
    • Start on Left Message -> Move Left (by a few squares).
    • Start on Right Message -> Move Right (by a few squares) [01:17].

[Insert screenshot of Batman’s movement code here]

Step 3: Coding the Batarang’s Movement and Spin

The Batarang requires two separate scripts to function correctly.

  • The Shooting Script (Movement): This is triggered by the Shoot button.
    • Start on Blue Message -> Appear block -> Move Right (e.g., 8 squares) -> Disappear block -> Stop block -> Go to Home block (to reset its position) [01:48].
  • The Spinning Script (Effect): This makes the Batarang spin continuously.
    • Start on Green Flag -> Repeat Forever -> Spin Right block [02:03].

Step 4: Coding The Riddler (First Villain)

The Riddler should be the first to move and the first to be hit.

  • Initial Movement: Add a script to make the Riddler move when the game starts, e.g., Start on Green Flag -> Move Left and Move Right (repeatedly) [02:22].
  • Hit Sequence:
    • Start on Bump (this block detects collision with the Batarang) -> Disappear block -> Send Orange Message block (this will activate the next villain) [02:30].

[Insert screenshot of Riddler’s full code here]

Step 5: Coding The Penguin (Second Villain)

The Penguin is activated by the Orange Message.

  • Movement Sequence:
    • Start on Orange Message -> Add a movement script, e.g., Move Up and Move Down (repeatedly) [02:36].
  • Hit Sequence:
    • Start on Bump -> Disappear block -> Send Red Message block (this will activate the final villain) [02:44].

Step 6: Coding The Joker (Final Villain)

The Joker is activated by the Red Message and ends the game.

  • Movement Sequence:
    • Start on Red Message -> Add a movement script, e.g., Move Left and Move Right (repeatedly) [02:44].
  • Hit Sequence:
    • Start on Bump -> Disappear block -> Go to Page block (select page 2) [02:51].

Step 7: Creating the Win Screen

On Page 2, add the Batman character and a text box that says “Gotham safe for now.”

  • Add a script to the Batman character on Page 2 to make him talk: Start on Page -> Say block (with the text: “Gotham safe for now”) [02:51].

Troubleshooting/Tips

  • Ensure your Batarang has two separate scripts: one starting on the Blue Message for the shooting movement and a second starting on the Start on Green Flag with a Repeat Forever loop for the spinning effect [02:03].
  • The villains must be chained correctly using messages. The Riddler must Send Orange Message to start the Penguin, and the Penguin must Send Red Message to start The Joker. If a villain isn’t moving, check the colour of the message block in the previous villain’s code [02:36].
  • The collision block (Start on Bump) only works if the character it’s attached to is hit by another moving character. Make sure the Batarang is actively moving (using the Move block) when it strikes the villains [02:30].

If you are interested in doing more coding with your children and pupils, please check out the other ScratchJr tutorials I have created.