Mr Vullo – Alternative Education

How to Make a Captain America Maze Game in ScratchJr

Introduction

In this exciting ScratchJr project, your child or pupil will learn how to code a two-player maze game featuring the iconic Marvel characters, Captain America and Red Skull. The primary goal is simple yet challenging: guide Captain America through a custom-made maze to reach his shield before the villainous Red Skull gets there first. This tutorial introduces core programming concepts such as sending and receiving messages, creating game-specific movement with a ‘joypad’ interface, and designing multiple end-game scenarios (a win screen and a lose screen). By adapting the basic sprites and drawing your own backgrounds, you’ll unlock the creative potential of ScratchJr and build a fun, engaging, and fully interactive experience.

The Video Embed

What You Need

To create this game, you will need the following characters and backgrounds, many of which require adapting the default ScratchJr sprites:

  • Characters:
    • Captain America: Start with the default Cat sprite and adapt it (e.g., changing the head/outfit to resemble Captain America). [00:31]
    • Red Skull: Adapt another character (the video suggests a basic ‘bald’ character) by dressing them in black and colouring the head red. [00:40]
    • Shield: Custom-made using circles and triangles to create the star in the Paint Editor. [00:51]
    • Joypad Buttons: Four separate character sprites (labelled with letters, e.g., Orange, Red, Yellow, Green) to act as directional buttons. [01:05]
  • Backgrounds:
    • Maze: A blank background with hand-drawn shapes to create the pathways. [01:52]
    • Win Screen: A background for the scene where Captain America attacks Red Skull.
    • Lose Screen: A background for the scene where Red Skull attacks Captain America.

Step-by-Step Instructions

Follow these steps to build the code for your Captain America Maze Game.

Step 1: Coding the Movement Joypad

The directional buttons send messages that Captain America receives to move. You need to code the four button sprites:

  • For the Orange button: Start on Tap block connected to the Send Orange Message block. [01:20]
  • For the Red button: Start on Tap block connected to the Send Red Message block.
  • For the Yellow button: Start on Tap block connected to the Send Yellow Message block.
  • For the Green button: Start on Tap block connected to the Send Green Message block.

[Insert screenshot of Joypad button code here]

Step 2: Coding Captain America’s Movement and Win Condition

Captain America must respond to the messages from the joypad and trigger the winning scene upon touching the shield.

  • Movement: Use Start on Receive Message blocks for each colour (Orange, Red, Yellow, Green) connected to the corresponding Move Up, Move Down, Move Left, and Move Right blocks. [01:36]
  • Win: Use the Start on Bump block connected to the shield sprite, followed by the Go to Page block that takes the game to the Win Screen. [02:09]

[Insert screenshot of Captain America’s movement and win code here]

Step 3: Coding Red Skull’s Movement and Lose Condition

Red Skull is coded to follow a defined path through the maze.

  • Movement: Use the Start on Green Flag block and connect a sequence of Movement blocks (Move Forward, Move Up, Turn blocks, etc.) to navigate the character through the maze pathway. [01:43]
  • Lose: At the end of Red Skull’s movement sequence, place the Go to Page block that takes the game to the Lose Screen. [03:06]

[Insert screenshot of Red Skull’s pathfinding code here]

Step 4: Coding the Shield Rotation

To make the shield look more dynamic on the maze screen, add a rotation effect.

  • Start with the Start on Green Flag block.
  • Connect the Repeat Forever block.
  • Inside the loop, place the Turn Right block (e.g., set to 1 or 2 turns) to create a continuous rotation effect. [02:47]

[Insert screenshot of the Shield rotation code here]

Step 5: Coding the Win Screen Animation

On the Win Screen, Captain America attacks Red Skull. The animation is a continuous loop.

  • Captain America (Attacker): Use Start on Green Flag, then a Repeat Forever loop containing a Wait block (e.g., 5-10 tenths of a second) and a Jump Up block. [02:31]
  • Red Skull (Wobble): Use the Start on Bump block connected to the shield sprite (which is part of the scene) and a Wobble block to show the character being hit. [02:52]

[Insert screenshot of the Win Screen code here]

Step 6: Coding the Lose Screen Animation

On the Lose Screen, Red Skull is now the attacker. The code essentially reverses the roles from the Win Screen.

  • Red Skull (Attacker): Use Start on Green Flag, then a Repeat Forever loop containing a Wait block and a Jump Up block. [03:33]
  • Captain America (Wobble): Use the Start on Bump block connected to the shield sprite and a Wobble block. [03:18]
  • Shield: The shield should move towards Captain America. Use Start on Green Flag, the Repeat Forever block for rotation, and a sequence of Go to blocks or movement to fly it towards Captain America. [03:37]

[Insert screenshot of the Lose Screen code here]

Troubleshooting/Tips

  • Adapting Sprites: Creating Captain America and Red Skull involves using the Paint Editor on existing sprites. Don’t be afraid to experiment with the colours and shapes to get the right look for your superheroes and villains. [00:31]
  • Maze Design: Creating the maze background is often a process of trial and error. You may need to adjust the drawing to ensure your characters can comfortably move through the pathways created. [02:01]
  • Animation Timing: Use Wait blocks in the end-screen animations (Steps 5 and 6) to control the speed and rhythm of the Jump Up loops. For example, a setting of 5 or 10 tenths of a second creates a nice, controlled animation effect. [02:31]

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