Enchiridion

Adventure Time bannner

The Enchiridion from Adventure Time!

The Enchiridion (which translates to “The Handbook” or “The Manual”) is an ancient book with codes of conduct, guidelines, and other helpful information for heroes. The book also has magical powers that are unlocked by inserting the royal gems into their appropriate slots on the front cover of the book. Create your own Enchiridion and try to collect all the gems!

The Enchiridion cover


Prepare

This project

Level: Medium
Duration: 60 minutes
Flipgrid: https://flipgrid.com/3a051ac5

Materials

Collect the materials in the list before starting your project Make.

Materials

  • Adafruit Circuit Playground Express Base Kit
  • Favorite hardcover book
  • Brown grocery bag, or brown butcher paper
  • Crayons, colored pencils, paint or colored markers
  • Tape (clear, duct tape or packing tape will work)
  • Scissors

Make

Step 1: Cover the book

If using a brown grocery bag, cut it along the side and cut out the bottom to open up as a flat piece of paper, and remove any handles.

Prepare the paper from the bag

Use the brown bag or brown butcher paper to cover the outside cover of the book. To do this, mark the top and bottom edges of the book on the paper, then fold the paper to fit the height of the book.

Top and bottom of cover marked on the bag

Top and bottom edges folded

Wrap the paper around the book and fold and tape the ends around the front and back cover flaps. Depending on the size of your book, you may need to trim the ends if they are too long.

Ends of the cover taped to top and bottom edge

Step 2: Position and attach the Adafruit Circuit Playground Express

Use a small piece of tape and roll it inside out to form a loop so that the sticky side is on the outside.

Loop of tape stuck to back of board

Place the tape on the back of the Adafruit Circuit Playground Express and press the Adafruit Circuit Playground Express in the center of the front cover of the book. Make sure the battery pack port is at the bottom, and the USB port is at the top.

The board attached to the front cover of book

Step 3: Draw the book cover details

Draw a bigger circle around the Adafruit Circuit Playground Express (you may want to use a cup or a roll of duct tape to trace the outline of the circle). Inside the circle, draw the 6 royal gems and color them in.

Draw gems around the board

"Enchiridion" written on the cover

Draw a rectangle with curved corners around the whole thing. Then draw the sword, shields and any other details you would like, and color with colored pencils, crayons or markers.

Sword and shields drawn on the cover

Step 4: Insert the batteries and attach battery pack

Insert the batteries into the battery pack.

3 batteries inserted into the battery pack

Attach the wire from the battery pack to the Adafruit Circuit Playground Express.

Wire from the battery pack connected to the board

Tape the battery pack onto the back of the book, being careful not to tape over the On/Off switch. If your battery pack includes a clip, you may want to remove that as well.

The battery pack taped to the back of the book

Complete!

Congratulations! You have made your own magical Enchiridion!

Move on to the next step to code your Enchiridion.

Code

Code a “Collect the Gems” game on your Enchiridion – where you have to press the button to match the right gems in their places.

Concepts

  • Light
  • Variables
  • Booleans
  • Conditionals

Blocks

input.buttonA.onEvent(ButtonEvent.Click, function () {})
if (true) {}
let x = 0
light.showRing("")
light.pixelColor(0)
music.magicWand.play()

Step 1: Create a Play variable

The first thing we’ll want to do is to create a variable to let us know if we are playing the game or not. This variable will only have two values – True or False.

  • Open MakeCode in your web browser
  • Click on New Project

New project button

  • Name your Project as Enchiridion (note – you don’t need to click the Save button, just type the name)

Project name box

  • From the ||loops:LOOPS|| Toolbox drawer, drag out an ||loops:on start|| block to the coding Workspace
  • In the ||variables:VARIABLES|| Toolbox drawer, click on the Make a Variable button and name your variableplay.

Name the 'play' variable

From the ||variables:VARIABLES|| Toolbox drawer, drag out a ||variables:set|| variable block to the coding Workspace and drop it into the ||loops:on start|| block.

'set' variable block

From the ||logic:LOGIC|| Toolbox drawer, under the Boolean subcategory, drag out a ||logic:true|| block and drop it into the ||variables:set|| block replacing the 0.

'true' logic block

Step 2: Create color patterns

To play the game, we’ll flash different color patterns onto the Adafruit Circuit Playground Express. One of these color patterns will match the magic gem colors on the Enchiridion.

The first thing we need to do is check that we are still playing the game.

  • From the ||logic:LOGIC|| Toolbox drawer, drag out an ||logic:if then|| block and drop into the ||loops:forever|| block.

'if then' logic block

From the ||variables:VARIABLES|| Toolbox drawer, drag out a ||variables:play|| variable block to the coding Workspace and drop it into the ||logic:if then|| block replacing true.

'play' variable placed into 'if then'

  • From the ||light:LIGHT|| Toolbox drawer, drag out 3 ||light:show ring|| blocks and place them inside the ||logic:if then|| block.

'play' variable placed into 'if then'

  • In the ||light:show ring|| blocks, click on the color wheel to select different colors and then click on the outside ring lights to change the lights to different colors. The middle grey color in the wheel turns the lights off.
let play = 0
forever(function () {
    if (play) {
        light.showRing(
        `black green white black blue yellow red black pink purple`
        )
        light.showRing(
        `red yellow orange black red white blue green red black`
        )
        light.showRing(
        `yellow pink black green black black purple black green blue`
        )
    }
})
  • For the last ||light:show ring|| block, copy the color pattern below – this matches the gem colors on the Enchiridion: blue, green, off, purple, off, off, green, off, pink, yellow.

Ring on the Enchiridion cover

light.showRing(
        `yellow pink black green black black purple black green blue`
        )

Step 3: Check for the matching gem colors

When a player presses the A button, we want to check if the current colors match the gem colors on the Enchiridion. If they don’t match, we continue playing the game. But if they do match, then we’ll stop playing the game and play a sound.

There are six gems on the Enchiridion, so we’ll need to check the colors in six different locations on the Adafruit Circuit Playground Express. The light locations go from 0 – 9 counter-clockwise:

Pixel locations on the board

  • From the ||input:INPUT|| Toolbox drawer, drag out a ||input:on button click|| block onto the Workspace.
  • From the ||logic:LOGIC|| Toolbox drawer, drag out an ||logic:if then|| block and drop into the ||input:on button click|| block.
  • From the ||logic:LOGIC|| Toolbox drawer, drag out an equals ||logic:0 = 0|| comparison block, and drop into the ||logic:if then|| block replacing the default true.

Comparison block placed into 'if then' block

  • In the ||light:LIGHT|| Toolbox drawer, scroll down to the More section and drag out a ||light:pixel color|| at block onto the Workspace, and drop it into the first slot of the ||logic:0 = 0|| comparison block replacing the 0.

'pixel color' placed into comparsion block

  • From the ||light:LIGHT|| Toolbox drawer, in the Color section, drag out a ||light:color|| value block onto the Workspace and drop it into the second slot of the ||logic:0 = 0|| comparison block replacing the other 0.
  • In the ||light:color|| block, use the drop-down menu to select the yellow color.

Color choices for the 'color' block

Now, we need to do the same thing to check the colors on the other five locations.

  • Right-click (or long-press) on the ||logic:if then|| block to see the context menu appear. Click on Duplicate to make a copy of this block.

Duplicate selection on block menu

  • Drag this duplicated block inside the original ||logic:if then|| block.
  • Do this 4 more times, so there are 6 total nested ||logic:if then|| blocks.
input.buttonA.onEvent(ButtonEvent.Click, function () {
    if (light.pixelColor(0) == Colors.Yellow) {
        if (light.pixelColor(0) == Colors.Yellow) {
            if (light.pixelColor(0) == Colors.Yellow) {
                if (light.pixelColor(0) == Colors.Yellow) {
                    if (light.pixelColor(0) == Colors.Yellow) {
                        if (light.pixelColor(0) == Colors.Yellow) {

                        }
                    }
                }
            }
        }
    }
})
  • In each of the ||light:pixel color at|| blocks, change the location that you are checking, and in the ||light:color|| value block, use the drop-down menu to change the color that you’re checking:
  • Location 0 = Yellow
  • Location 1 = Pink
  • Location 3 = Green
  • Location 6 = Purple
  • Location 8 = Green
  • Location 9 = Blue

Step 4: Stop playing when you match the gem colors

If all the colors match, then let’s stop play and also play a winning sound.

  • From the ||variables:VARIABLES|| Toolbox drawer, drag out a ||variables:set|| variable block onto the Workspace and drop inside the ||logic:if then|| blocks.
  • From the ||logic:LOGIC|| Toolbox drawer, under the Boolean subcategory, drag out a ||logic:false|| block and drop it into the ||variables:set|| block replacing the 0.
let play = false
input.buttonA.onEvent(ButtonEvent.Click, function () {
    if (light.pixelColor(0) == Colors.Yellow) {
        if (light.pixelColor(1) == Colors.Pink) {
            if (light.pixelColor(3) == Colors.Green) {
                if (light.pixelColor(6) == Colors.Purple) {
                    if (light.pixelColor(8) == Colors.Green) {
                        if (light.pixelColor(9) == Colors.Blue) {
                            play = false
                        }
                    }
                }
            }
        }
    }
})
  • From the ||music:MUSIC|| Toolbox drawer, drag out a ||music:play sound|| block onto the Workspace and drop inside the ||logic:if then|| blocks after the ||variables:set|| variable block.
  • In the ||music:play sound|| block, use the drop-down menu to select the magic wand sound effect.

Sound effect selections

Step 5: Restart the game

  • From the ||input:INPUT|| Toolbox drawer, drag out a ||input:on button click|| block onto the Workspace.
  • In the ||input:on button click|| block, use the drop-down menu to select Button B.

Input button selections

  • In the ||loops:on start|| block on the coding Workspace, right-click on the ||variables:set|| variable block and select Duplicate to make a copy of this block.
  • Drag this new copy of the ||variables:set|| variable block into the ||input:on button B click|| block.
let play = false
input.buttonB.onEvent(ButtonEvent.Click, function () {
    play = true
})

Your final program may look something like this:

let play = true
input.buttonB.onEvent(ButtonEvent.Click, function () {
    play = true
})
input.buttonA.onEvent(ButtonEvent.Click, function () {
    if (light.pixelColor(0) == Colors.Yellow) {
        if (light.pixelColor(1) == Colors.Pink) {
            if (light.pixelColor(3) == Colors.Green) {
                if (light.pixelColor(6) == Colors.Purple) {
                    if (light.pixelColor(8) == Colors.Green) {
                        if (light.pixelColor(9) == Colors.Blue) {
                            play = false
                            music.magicWand.play()
                        }
                    }
                }
            }
        }
    }
})
forever(function () {
    if (play) {
        light.showRing(
            `black green white black blue yellow red black pink purple`
        )
        light.showRing(
            `red yellow orange black red white blue green red black`
        )
        light.showRing(
            `yellow pink black green black black purple black green blue`
        )
    }
})

Step 6: Test and Download

Try playing the game in the Simulator – click on button A whenever the Enchiridion gem color pattern shows up. If you correctly match the gems, the animation should stop and a sound effect plays. When you press button B, play should resume. You can add more difficulty to the game by adding more ||light:show ring|| color patterns.

Simulator

Once you’re happy with your program, click the Download button and follow the instructions to download the code to your Adafruit Circuit Playground Express.

Download dialog

Disconnect the Adafruit Circuit Playground Express from the USB cable, turn on the batteries, and try to collect all the gems and unleash the magical powers of the Enchiridion!

Great work!