Activity

E.A.K. Code Game

E.A.K. (Erase All Kittens) is an open source platform game that teaches kids to code and create on the web, using HTML and CSS.

Made by the lovely humans at Drum Roll, remixed by Laura

Background

E.A.K. teaches code using 'stealth learning' - our goal is to provide learners with their first steps towards digital literacy in the most entertaining way possible. By changing the source code of the levels - written in HTML and CSS, just like a web page - players must rescue kittens to complete the game. E.A.K. is available to play online at eraseallkittens.com. Read more on the Webmaker blog.

Learning Objectives

  • Combine an opening tag and its corresponding closing tag
  • Identify text between <p> tags
  • Copy and paste boxes using the <div> tag
  • Identify the various header tags
  • Use appropriate header tags in context of the game
  • Navigate game levels and follow keying directions

Steps for the Activity

  1. Get everyone to visit eraseallkittens.com. Click 'Play the Demo' to start the game.

    Watching the video is best done as a group. The rest of the game can be played in pairs or as individuals.

  2. photo by erase all kittens In the tutorial level, use the left and right arrow keys to move, and press the spacebar to jump over the obstacle. Move over the box to release a kitten gif, and press the down arrow key when you are in front of the portal. This will lead you to the first code level.

  3. The forest level involves learning how to edit simple code to make the ledge you are standing on longer. If you try jumping to the ledge on the right, you will miss it and fall. You’ll reappear, and a message will pop up, telling you to click 'Edit', or press the 'E' key.

    photo by erase all kittens After doing this, you’ll see a box with text appear. The initial text explains that the sentence below (with the coloured text) is the source code for the ledge you are standing on. Click in between 'Woohoo!' and the blue p tag, and start typing any letters on your keyboard eg. 'I'm a ledge that's getting bigger!'. When the ledge is long enough, click 'Save' in the top right-hand corner of the edit box. Run over to the kitten and portal and complete the level.

  4. In the space level, learners create new elements by copying the pattern of existing ones. Once again, you'll need to click 'Edit' or press 'E' to change the code. Copy the pattern of the two div tags to add enough boxes to reach the kitten and portal. Press 'Save', and complete the level.

  5. photo by Future City Explorers The cave level involves learning how to create headings, by following the pattern for previous headings. If you try jumping down to the next ledge, and then jumping off it, you’ll die, then reappear in the same place. Type out the code for some extra headings, using the ones above as a reference. Change the numbers so they are consecutive eg. <h3> for the third heading, <h4> for the fourth heading etc. keeping the rest of the code consistent. You'll need to create 3 or 4 new headings, but remember that they only go up to 6: it won't let you add a <h7>. Don't forget to end each tag with a /! After saving, you might find you need to edit again to tweak the length of the ledges. Watch out for spikes!

  6. At the end of the game, you’ll see a questionnaire - it would be really helpful if everyone filled this out, so we can use your feedback to improve the game.