Introduction

Welcome back, coding enthusiasts! In this quick and exciting tutorial, we are going to learn how to build a Spider-Man-themed platform game using ScratchJr. This is a fantastic ScratchJr project for children to practise setting up simultaneous programs, movement blocks, and the crucial concept of message sending. You’ll customise the main Cat character to look like Spidey, create obstacles using simple shapes, and code diagonal movements to simulate web-slinging jumps across the apartment blocks. The goal is simple: navigate Spider-Man to Mary Jane to trigger the final ‘thank you’ scene. This tutorial is designed for use on an iPad but the concepts are easily transferable to other devices. Get ready to start coding!

The Video Embed

http://www.youtube.com/watch?v=hrCuCyWHhfE

What You Need

You will need the following characters and setting details to build this game:

• Background: The Apartment Building background.
• Characters:
  • The Cat sprite (to be customised/painted as Spider-Man).
  • The Person sprite (to represent Mary Jane).
  • Four (4) Square sprites (to act as the on-screen joypads/controls).
• Specific Setup:
  • The Cat should be customised to resemble Spider-Man by changing its colours, boots, and adding a spider emblem. [00:15]
  • The four Square sprites should be coloured Red, Orange, Yellow, and Green to match the messages they will send.
  • Place the Mary Jane character slightly raised above the apartment block, ensuring she is not touching it, to prevent the final scene from being automatically triggered. [01:31]

Step-by-Step Instructions

Follow these steps to build your complete Spider-Man game.

Step 1: Code the Joypads (Sending Messages)

The four coloured squares will act as the control buttons for Spider-Man’s movement. They only need a single line of code each to send a message when touched:

• For the Orange Square:
  • Start on Tap -> Send Orange Message
  • [Insert screenshot of Orange Square code here]
• For the Red Square:
  • Start on Tap -> Send Red Message
  • [Insert screenshot of Red Square code here]
• For the Yellow Square:
  • Start on Tap -> Send Yellow Message
  • [Insert screenshot of Yellow Square code here]
• For the Green Square:
  • Start on Tap -> Send Green Message
  • [Insert screenshot of Green Square code here]

Step 2: Code Mary Jane (Level Completion)

Mary Jane’s code is simple, as she acts as the trigger for the final victory scene (Page 2).

• For Mary Jane (Page 1):
  • Start on Tap -> Go to Page 2
  • [Insert screenshot of Mary Jane’s code here]

Step 3: Code Spider-Man (Horizontal Movement)

The Yellow and Green messages control Spider-Man’s basic horizontal movement across the screen.

• For Spider-Man (The Cat):
  • Start on Yellow Message -> Move Left (1 unit) -> Stop [01:46]
  • Start on Green Message -> Move Right (1 unit) -> Stop [01:53]
  • [Insert screenshot of Spider-Man’s horizontal movement code here]

Step 4: Code Spider-Man (The Diagonal Jump)

The Red and Orange messages trigger the complex diagonal jump, which simulates him web-slinging up to the next level of the building. This requires two programs running simultaneously.

• For Spider-Man (The Cat) – Red Message:
  • Start on Red Message -> Move Up (2 units) -> Move Right (3 units) -> Move Down (1 unit) -> Stop[02:07]
  • Tip: This is one program chain that includes two simultaneous movements (up and across), followed by a move down to land.
  • [Insert screenshot of Spider-Man’s Red Jump code here]
• For Spider-Man (The Cat) – Orange Message:
  • Use the exact same logic as the Red message, but adjust the movement blocks to land on the opposite side.
  • Start on Orange Message -> Move Up (2 units) -> Move Left (3 units) -> Move Down (1 unit) -> Stop[02:53]
  • [Insert screenshot of Spider-Man’s Orange Jump code here]

Step 5: Code the Final Scene (Page 2)

Create a new page (Page 2) for the game completion scene. Mary Jane will congratulate Spider-Man, and he will react.

• For Mary Jane (Page 2):
  • Start on Green Flag -> Say (“Thank you!”) [03:18]
  • Send Orange Message
  • [Insert screenshot of Mary Jane’s Page 2 code here]
• For Spider-Man (The Cat) (Page 2):
  • Start on Orange Message -> Grow (4 units) -> Wait (10 units) -> Shrink (4 units) -> Stop
  • Tip: This code makes him celebrate by growing and shrinking. You may want to adjust his size on the page first using the size blocks. [03:36]
  • [Insert screenshot of Spider-Man’s Page 2 code here]

Troubleshooting/Tips

• Avoid Auto-Triggering: Ensure the Mary Jane character on Page 1 is not touching the apartment building when you place her. If she is, the Start on Touch code will immediately trigger the end scene. She should be slightly raised above it. [01:25]
• Understanding the Diagonal Jump: The magic of the diagonal movement is that the Move Up and Move Right/Leftblocks run at the same time, creating the diagonal path. The Move Down block is then perfectly measured to ensure Spider-Man lands precisely on the next level, giving the illusion of jumping onto a platform. [02:07]
• Debugging in Action: When testing your code, press the full-screen view button. As you tap your joypads, the corresponding code blocks will light up in the Cat’s script, allowing you to visually debug your program and see exactly which blocks are running. [02:59]

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