banane

How Cootie Catcher is Made

Cootie Catcher is a game girls play around the world, and is more commonly know contemporarily as Fortune Teller. I have a nostalgic love for the old name, but should probably start using the more boring modern term. Anyways. This is how it is made from a real paper game to a computer game.

  1. First you take 3 photos of your cootie game in real life: open wide, tall and closed.
  2. Then, I drew on them the numbers and colors, using freeware called PaintBrush.
  3. I virtually cut them into four relatively even pieces – using Preview (also an installed Mac application).
    After I was content with the images, I wrote the HTML and CSS so that they would line up and look natural, despite being cut up.

    I just learned HAML, so I prefer to write in that now instead of HTML. I recommend it as it’s a lot less code and keeps your HTML very clean and properly ended (if you’re not too hot with details like me!). This is what it looks like:

    
%div{:style=>"", :id=>"closed"}
  %div{:class=>"cootieRow1"}
    %a{ :href=>"javascript: playCootie('red');" }
      %div{:class=>"cootieLeftCell"}
        %img{:src=>"/images/red.png"}

    I’m so addicted to HAML now that I write in HAML, then view the source in a browser and copy it out to HTML when I’m done. Yep. Nerd.

    Page Elements

    The key to flipping the cootie visually is to show and hide two Divs – one that is wide, and one that is tall. The initial state is the “closed” Cootie with the colors. After the initial selection by the user, though, it’s never seen again. I create 3 of these Div blocks, representing each state of the Cootie. Inside that div are two horizontal regions, one called “row1” and “row2”. Inside each row are two of the cooties, LeftCell and RightCell. With some tweaking the Cootie appears as if it is an organic whole, not 4 images. I split up the images instead of using a Gif Map because I know how to do it this way. Ha! So much for learning.

    I hard-code the first div, “closed” to display, but the other two are set to: %div{ style=>"display:none"}

    Each corner of the Cootie is a div and image. The Div is clickable, and it calls to a JavaScript function where the game play occurs- playCootie. The JavaScript application turns on the closed/long/wide divs, imitating the opening and closing of the Cootie Catcher. So I’m using the ProtoType JavaScript toolset, which makes switch commands like show() and hide() of divs quite easy:
    $('closed').hide()

    I store the stage of play- whether they are in the first color round or the second number choice round- in the visible dashed border Progress Bar below the title. I thought this was a neat way of revealing the way the application was built without giving away the fun.

    Game Play

    An important aspect of this game is the progression from the top level, down to the bottom level, revealing the fortune. To recreate this process I created the progression bar that hopefully communicates the levels of play.

    The “playCootie” function in the JavaScript file checks on the status in the Progress Bar. If the first stage is empty, literally, if($('stage1').empty()) then it knows it is at the very beginning, and follows the play instructions for the color round. User selects color, and the Cootie should move to the number of letters in the color.

    For round 1, the length of the color is the limit on JavaScript for-loop. for (i=0; i<stage_value.length; i++)

    The flipping of the Cootie occurs in the “switchCootie” function, which takes no argument but simply flips the Wide and Tall from show/hide depending on the current state. There is an initial clause regarding “what if it’s at the initial state,” but other than that it’s quite simple.

    Upon ending the Color round, the program writes the color chosen to the Progress bar, and colors the bar that stage_value. It also writes to an “instructions” area that will become the Fortune box.

    The next user selection is a number- which of course isn’t 1-8, but whatever the Div the viewer saw at the end of the last round. This loop is much simpler, as the limit is the number chosen. At the end it updates the Progress Bar and Instructions.

    The third loop- the final loop- takes user input and selects a fortune. We could have made it very random, but I was practicing restraint, and “keeping it simple,” so I made the computer behave just like the real paper game. The number you choose is the index in the array of the fortunes- just as the number you choose, you flip over and see the fortune written in the back.

    Fortune selection function sets up the array and also retrieves the appropriate fortune. You pass to it the index (the chosen number, or stage_value), and returns the corresponding fortune to that index position. I.E., You selected 3, you get the third fortune in the list. It is updated to the Instructions area, and the progress bar is filled. A new link allows you to start over, clearing your choices.

    What I learned in this exercise:

    Mostly some Prototype commands that I’d used before but had forgotten!
    – $(element).setStyle({backgroundColor:blue}); took many go’s to figure out the proper syntax!
    – $(element).getStyle(backGroundColor); – using no curly braces. It’s in the details, it seems, with JavaScript
    – $(element).empty() – very handy

    I had built it completely wrong and led my niece through the game a few times. She didn’t question when it didn’t work, but I was frustrated. I think the problem was I hard-coded the stages into the image links, instead of managing them in an object in the DOM. The Wide/Tall visual difference was being confused with stages of play. At one point I was passing 3 argments to the JS script, instead of a single one, or really, I could also do none and simply deal with it all more asynchronously. I think the next change, though, will be user input as that lifts this game from a replication of a physical game to a fun virtual one.

    I had started out doing a very complex version in Ruby on Rails, by building tests and starting to code. I was daunted and frustrated by the project, and ended up going back to the very beginning and simply doing what I’d imagined- cutting up photos and flipping objects. I still had it embedded in a Rails architecture, running on a ruby server, until the very last few lines were written. In denial, perhaps, that it wasn’t going to be a complete JS game.

banane