Enchiridion

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!

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.

• 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.

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.

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.

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.

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.

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 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.

Step 4: Insert the batteries and attach battery pack

Insert the batteries into the battery pack.

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

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.

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

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

• 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.

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.

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.

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.

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.

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

• 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.

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:

• 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.

• 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.

• 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.

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.

• 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.

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.

• 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.

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.

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!